The Web was barely a year into its public life when people started wanting to stand inside it. Hypertext was fine. Hypertext with pictures was better. But science fiction had already promised a cyberspace you could walk through, and the people building the Web had read the same novels as everybody else.

Geneva, 1994

The usual version of the story goes like this. In early 1994, Mark Pesce and Tony Parisi built a prototype 3D web browser they called Labyrinth. At the first International Conference on the World Wide Web, held at CERN in Geneva in May 1994, there was a "birds of a feather" session about virtual reality interfaces to the Web. Pesce presented Labyrinth. Tim Berners-Lee and Dave Raggett were in the room. Out of that session came a name, Virtual Reality Markup Language, and a mailing list, www-vrml, hosted at Wired magazine.

The name lasted about as long as it took someone to point out that this was not a markup language. Nothing was being marked up. It became the Virtual Reality Modeling Language, and the acronym survived the change, which is the most important thing an acronym can do.

Borrowing a File Format

The mailing list wanted a specification quickly, and wisely chose not to invent one from nothing. Several existing 3D formats were proposed. The one selected was the ASCII file format of Open Inventor, a 3D toolkit from Silicon Graphics. Inventor files were readable text, they described a hierarchy of objects, and SGI was willing to let the community use the format. Gavin Bell of SGI did much of the work of adapting it, with Parisi and Pesce, and the VRML 1.0 specification was finished in 1995.

VRML 1.0 could describe a static scene: shapes, materials, lights, cameras, and links to other worlds. It could not describe anything that moved. You could fly through a world, but the world would not notice you were there. A clarified revision, VRML 1.0c, followed in early 1996.

Moving Worlds

Everyone agreed that the next version needed behavior: things that move, things you can click, things that react. In 1996 the VRML community issued a call for proposals and got several, from some very large companies. Among them, if memory and the archives serve, were Microsoft's ActiveVRML, Sun's HoloWeb, and Apple's Out of This World. The winner, chosen by a vote of the community, was Moving Worlds, a proposal led by Silicon Graphics with Sony and others.

Moving Worlds threw out the 1.0 state machine and replaced it with self-contained nodes (a Shape owns its appearance and geometry), added events and routes for wiring nodes together, added sensors for time and user input, and added prototypes so authors could define new node types in VRML itself. For anything those could not express, there was the Script node, which could run Java or JavaScript.

The VRML 2.0 specification was released in August 1996, at SIGGRAPH in New Orleans. After some editing and the standards process, it became the international standard ISO/IEC 14772-1:1997, better known as VRML97. For our purposes, VRML 2.0 and VRML97 are the same language, and this book uses the names interchangeably, as did everyone at the time.

The Browser Wars, in 3D

To see a VRML world you needed a VRML browser, which usually meant a plug-in for Netscape Navigator or an ActiveX control for Internet Explorer. There were a lot of them. Some names you may remember:

They disagreed with each other in small and maddening ways. The same world could look lovely in one browser, render half its textures upside down in another, and crash a third. Authors learned to test everywhere, then to give up and write "Best viewed with" on the page.

What Happened Next

VRML did not take over the Web. The reasons are easy to list in hindsight. Most people had slow modems and no 3D hardware. Plug-ins were a pain to install and a security worry. Building good 3D content was hard, and building it by hand in a text editor was harder. The companies that funded the big browsers changed direction, merged, or ran out of money.

But the ideas did not go anywhere. The Web3D Consortium (as the VRML Consortium renamed itself) carried VRML forward as X3D, which kept the node and field model and added an XML encoding. WebGL arrived in browsers around 2011, and suddenly the plug-in was unnecessary: the browser could draw 3D by itself. That is what this book's engine stands on. In a way, VRML finally got what it needed. It just got it about fifteen years late.

A VRML file is plain text. It starts with a header line, which tells the browser which version of the language follows, and then it lists nodes. That is the whole recipe. Here is the smallest world worth looking at.

Let's go through it line by line, because every later example is built from the same parts.

The header #VRML V2.0 utf8 must be the very first thing in the file, exactly as written. A browser reads it to decide whether it is looking at VRML 2.0 text in UTF-8 encoding or (if it says #VRML V1.0 ascii) the older language. Our browser speaks both.

Shape is a node. A node has a type name, then a pair of braces, and between the braces a list of fields, each a name followed by a value. A Shape has two fields: appearance, which says what the surface looks like, and geometry, which says what the object is. Both of those fields hold other nodes, which is how scenes become trees.

The Sphere has no fields listed, so it gets its defaults: a radius of 1. Every field of every node has a default, and the defaults were chosen so that leaving things out usually does something reasonable. You will come to rely on this.

Units are meters, by convention. Angles are radians, by law. The default camera sits at 0 0 10, ten meters back along the Z axis, looking toward the origin, and the Y axis points up.

Moving Things Around

Shapes sit at the origin unless something moves them. The Transform node is a grouping node with a position, rotation, and scale. Everything inside its children field is moved along with it. Here is a second world with two shapes and some text.

A few new things showed up. WorldInfo gives the world a title; it has no effect on what you see. Background sets the color of the sky. The text uses emissiveColor, which makes a surface glow as though lit from within, so it reads clearly no matter how the light falls. And the string field holds a list of strings, written inside square brackets, one per line of text.

Try the Walk and Fly buttons. Try Wire, too, which shows you the triangles that the browser actually draws. A sphere is not really a sphere. Nothing is.

Everything in VRML is a node, and everything a node knows is in its fields. That sentence is most of the language. This chapter is the rest.

Field Types

Every field has a type, and the type decides how its value is written. Type names start with SF (single field, one value) or MF (multiple field, a list). An MF value is written inside square brackets with values separated by whitespace or commas; if the list has exactly one value, the brackets are optional.

Rotations deserve a moment. 0 1 0 1.5708 means "turn around the Y axis by 1.5708 radians," which is 90 degrees, counterclockwise when you look down the axis toward the origin. You will type 1.5708 and 3.1416 so often that your fingers will learn them before your brain does.

Four Kinds of Fields

Fields also come in four kinds, which matter once things start moving in Chapter 6:

• A field is set in the file and never changes afterward.
• An eventIn receives values while the world runs. You cannot set one in the file.
• An eventOut sends values while the world runs.
• An exposedField is all three at once: set it in the file, change it with an event called set_name, and hear about the change from an event called name_changed.

Appendix A lists every field of every built-in node, with its kind, type, and default. It is generated from this browser's own internal tables, so if it is wrong there, it is wrong here too, and at least we are consistent.

DEF and USE

Any node can be given a name with DEF. Later in the file, USE puts that same node somewhere else in the tree. Not a copy: the very same node, appearing in two places. Change it once and both places change. The scene graph is therefore not strictly a tree. It is a directed acyclic graph, and if you say that at a party people will move away from you.

Click Wire and count the triangles in the status bar. The browser draws eight columns, but there is only one Cylinder node, one Appearance, and one set of triangles in memory. In 1996 memory was precious and this was a big deal. It still is, a little.

Grouping Nodes

Nodes that hold children are called grouping nodes. You have met Transform. Its plainer sibling Group just holds things. Switch shows one of its children, chosen by number. LOD (level of detail) picks a child depending on how far away you are, so distant things can be drawn with fewer triangles. Billboard turns its children to face you. Anchor makes its children into a hyperlink. Collision was supposed to stop you walking through walls, and in this browser it does not, which makes it the most relaxing node in the language.

VRML 2.0 has ten geometry nodes. Four of them are primitives that need almost no explanation: Box, Sphere, Cone, and Cylinder. Each is centered on the origin and sized by a field or two.

The cylinder has its bottom turned off. Orbit underneath it and you can see inside. You can see the inside faces too, as it happens, because this browser lights both sides of an open surface. Many browsers of the time didn't, and you would see straight through the back wall, which made everything look like a stage set.

IndexedFaceSet

For everything that isn't a primitive, there is IndexedFaceSet. You give it a list of points in a Coordinate node, then describe each face as a list of indexes into that list, ending each face with -1. Faces should go counterclockwise when you look at the side you want people to see.

Three fields in that listing earn a mention. colorPerVertex FALSE says the Color list has one color per face rather than per point. convex FALSE warns the browser that a polygon has dents, so it must cut it into triangles carefully. (Remove that line and watch the star break. It's educational.) And solid FALSE says the shape has no inside, so both sides should be drawn.

When you don't supply normals, the browser makes them up. By default every face is flat. The creaseAngle field changes that: where two faces meet at an angle smaller than the crease angle, the browser smooths across the join. Set it to about 0.5 radians for "smooth curves, sharp corners," which is what you wanted anyway.

ElevationGrid

Terrain is a grid of heights, and VRML has a node for exactly that. You give it a number of columns and rows, the spacing between them, and a height for every point, row by row.

In 1996, people mostly generated those numbers with a little program, often in Perl, and pasted them in. So did we, although it wasn't Perl. Times change.

Extrusion

Extrusion is the clever one. It takes a 2D outline (the crossSection) and sweeps it along a 3D path (the spine). At each point of the spine the outline can be scaled and twisted. Tubes, vases, torus rings, springs, picture frames, and anything turned on a lathe all fall out of it.

Lines, Points, and Words

That leaves three more. IndexedLineSet is like a face set but draws lines instead of filling faces; lines are never lit, so they take their color from a Color node or from the material's emissiveColor. PointSet draws dots. Text, which you have already used, draws flat text in the XY plane, with a FontStyle choosing among "SERIF", "SANS", and "TYPEWRITER". Those are the only three fonts. Choose wisely.

A Material has six fields, and between them they describe how a surface responds to light. diffuseColor is the color you think of as "the color." specularColor and shininess control highlights. emissiveColor is light the surface gives off on its own. ambientIntensity says how much of the scene's ambient light the surface picks up. transparency goes from 0, solid, to 1, gone.

The NavigationInfo node at the top turns off the headlight, a light every browser straps to your forehead by default so you can see where you are going. Turning it off lets the scene's own lights do the work. Use the Headlight button in the control bar to switch yours back on and see how flat everything becomes.

The three light types behave as you would guess, with one surprise. PointLight and SpotLight light everything within their radius, anywhere in the world. A DirectionalLight, though, only lights the other children of the group it is in. Put one inside a Transform and it lights that transform's contents and nothing else. This is useful, and nobody expects it.

Textures

A texture is an image wrapped onto a shape. ImageTexture loads a JPEG or PNG (or, in the old days, a GIF) from a URL. PixelTexture lets you type the pixels directly into the file, as hexadecimal numbers, which is exactly as fun as it sounds. TextureTransform scales, rotates, and slides a texture across the surface.

Look closely at the middle cylinder. Its texture is grayscale, and a grayscale texture multiplies the material's diffuse color instead of replacing it, so the gray checks come out red. Full-color textures replace the diffuse color entirely. The spec defines this per number of image components, and it is one of those rules that seems arbitrary until the day it saves you from making a second texture file.

Sky and Fog

Background paints the sky as bands of color at angles measured from straight up, and the ground as bands measured from straight down. Fog blends distant things into a color, with visibilityRange giving the distance at which they vanish entirely. In 1997 fog was a performance trick: if nobody can see past thirty meters, nobody notices you didn't build anything past thirty meters. It also looks rather lovely.

That world starts in Walk mode, because the NavigationInfo says so. Click in the view and use the arrow keys. Hold Shift to hurry.

Animation in VRML 2.0 is plumbing. Some nodes produce events, which are values stamped with a time. A ROUTE statement connects one node's eventOut to another node's eventIn, and from then on, every event that comes out of the first goes into the second. You build behavior by connecting pipes.

ROUTE FromNode.eventOut TO ToNode.eventIn

Both nodes must have names, given with DEF, and the two fields must have the same type. That's the only rule. A route from an SFFloat to an SFFloat is fine. A route from an SFFloat to an SFColor is a load error, and this browser will tell you which line it's on.

The Clock and the Translator

Nearly every animation is built from two parts. A TimeSensor is a clock. While it runs, it sends out a fraction_changed event that climbs from 0 to 1 over each cycleInterval seconds, then starts again if loop is TRUE. An interpolator takes that fraction and turns it into something useful: a position, a rotation, a color, a number. You give the interpolator a list of key fractions and a matching list of keyValue values, and it blends between them.

Notice that the spin uses four keys to get one full turn instead of two. An OrientationInterpolator always takes the shortest way between two rotations, and the shortest way from 0 to 6.283 radians is to not move at all. Spread the turn over several keys, each less than half a revolution apart, and it behaves.

Touching Things

A sensor watches for something and reports it as events. Pointing device sensors watch your mouse, and they work on all the geometry that shares their parent group. Put a TouchSensor next to a shape in a Group, and clicking the shape fires the sensor. The touchTime event it sends is an SFTime, and a TimeSensor's startTime is also an SFTime. Connect them and you have a button.

The cursor changes to a pointing hand over the red button. That's the browser telling you there is a sensor there. Press the button while the door is still moving and nothing happens, because a running TimeSensor ignores new start times. This is in the spec, and it is the reason every VRML author has at some point clicked a button nine times in a row while muttering.

Dragging Things

Three more sensors turn mouse drags into motion. PlaneSensor slides things on a flat plane. SphereSensor spins things like a trackball. CylinderSensor turns things around a vertical axis, like a knob. Each sends its result as a value you can route straight into a Transform.

A few nodes don't draw anything at all; they describe how a visitor experiences the world. Viewpoint marks a spot to stand, with a name for the menu. NavigationInfo says whether to walk, fly, or examine, how fast, and whether to turn on the headlight. Background and Fog you have met. These four are bindable nodes: there can be many in a world, but only one of each kind is active at a time, and sending TRUE to its set_bind eventIn makes it the active one.

Anchor is the Web part of the World Wide Web. It's a group whose children are a hyperlink. Clicking them follows the url, which can point to another world, to an HTML page, or (with a # in front) to a named Viewpoint in the current world. ProximitySensor watches an invisible box and reports when you walk into it, where you are, and which way you are facing.

Walk up the path toward the lamp. When you step inside the sensor's box, its isActive event goes TRUE, and that is routed straight into the light's on field. Walk away and it goes out. No scripting, just one route. The sign is an Anchor inside a Billboard, so it always faces you; hover over it and the status bar shows its description, and clicking it takes you up in the air. The viewpoint menu in the control bar lists the other places to stand, and the browser glides between them, which is a courtesy Cosmo Player taught us all to expect.

The Script node is a node whose behavior you write yourself. You declare its interface in the file, the same way the spec declares the fields of built-in nodes: a list of eventIn, eventOut, and field declarations. Then you give it a program in the url field. When an event arrives at one of its eventIns, the browser calls the function with the same name.

Which Language?

The VRML97 spec defines two scripting languages in its annexes: Java and ECMAScript, the standardized name for JavaScript. In practice there was a third. SGI's Cosmo Player supported VRMLScript, a cut-down JavaScript dialect designed to be small enough to embed in a plug-in. You told the browser which one you meant with a prefix on the source code:

url "javascript: function touched(value, time) { ... }"url "vrmlscript: function touched(value, time) { ... }"

This browser accepts both prefixes, plus ecmascript:, and runs them all as ordinary JavaScript. It does not run Java. If you point a Script at a .class file it will politely decline, which is probably for the best for everyone.

The Rules

• Each eventIn calls a function of the same name, with two arguments: the value, and the timestamp in seconds.
• Every field and eventOut is a variable your code can read. Assigning to an eventOut sends an event. (Changing part of one, as in position_changed.x = 2, also counts.)
• If you define initialize(), it runs once when the world loads. shutdown() runs when the world goes away. eventsProcessed() runs after a batch of events has been handled.
• VRML values arrive as objects: SFVec3f has x, y, z and methods like add(), length(), and cross(). SFColor has r, g, b and setHSV(). SFRotation can multiply(), slerp(), and rotate vectors with multVec(). MF types behave like arrays.
• print() writes to the console under the viewer. So does Browser.print().

The script has a field called count that keeps its value between calls, which is how a script remembers things. Notice also that the whole program sits inside a VRML string, between double quotes, which is why the JavaScript uses single quotes. Escaping quotes inside quotes inside a 3D file was a rite of passage.

Building the World from Code

A script can also make new nodes. Browser.createVrmlFromString() parses VRML text and hands back the nodes, which you can send to a group's addChildren eventIn. To send events to a node directly, rather than through a route, the script needs an SFNode field pointing at it, and its directOutput field set to TRUE.

Scripts Every Frame

Route a looping TimeSensor's time eventOut into a script and the script runs on every frame. That is enough to do your own animation, simulation, or anything else that needs arithmetic. Here a script computes ripples on a pond and sends four hundred new heights to an ElevationGrid, many times a second.

That one says vrmlscript: at the top, for old times' sake.

One More: A Clock

Since SFTime counts seconds from 1970, the same way JavaScript's Date counts milliseconds, a script can tell the real time of day. This makes it the only VRML clock in this book that is right more than twice a day.

The PROTO statement defines a new node type, written in VRML. You give it a name, an interface (the fields, eventIns, and eventOuts it should have), and a body made of ordinary nodes. Inside the body, the keyword IS connects a field of some inner node to a field of the interface. From then on you can use the new type exactly like a built-in one.

Only the first node in a prototype's body is drawn. The rest (here, a TimeSensor and a Script) are alive and running but invisible, which makes the first node the prototype's "face" and the others its "brains." Each instance gets its own private copy of everything, including its own clock, which is why the three beacons blink at their own speeds.

Borrowing from Other Files

EXTERNPROTO declares a prototype that lives in another file. You repeat the interface (without default values) and give a URL, with the prototype's name after a #. Inline is simpler still: it pulls in a whole other world and drops it into yours. Between them, VRML authors built shared libraries of parts years before anyone said "package manager."

The first version of the language looks familiar at a glance: nodes, braces, fields. But it works in a completely different way. A VRML 1.0 file is a list of instructions for a machine that walks the tree from top to bottom, carrying a traversal state: the current transformation, the current material, the current coordinates, and so on. A Material node does not belong to any shape. It changes the current material, and every shape drawn after it uses the new one, until something changes it again.

The Separator node is what keeps this sane. It saves the state on the way in and restores it on the way out, so whatever happens inside a Separator stays inside it. A typical 1.0 file is Separators all the way down.

Under the hood, this browser handles 1.0 by walking the tree exactly as described, with a stack of states, and writing out equivalent VRML 2.0 nodes as it goes. The cameras become Viewpoints, each Material and shape becomes a Shape with its own Appearance, and the state machine evaporates. VRML 2.0's designers did essentially the same thing to the language itself.

The Accumulating Staircase

Here is something 1.0 can do that 2.0 cannot. A Group, unlike a Separator, does not save and restore the state. So if a Group contains a Translation, every time you USE that Group, the translation adds to the one before. The same node, used twelve times, lands in twelve different places.

This was considered a feature, then a bug, then a historical curiosity, which is the usual life cycle. VRML 2.0 made every node self-contained, and the staircase trick went the way of the dinosaurs.

This appendix lists the interface of every VRML 2.0 node this browser knows about: each field's kind, type, name, and default value, in the same notation the specification uses. It is generated when the page loads, from the very tables the parser uses, so it cannot drift out of date. For what each field means, the specification remains the authority; see Appendix C.

Nodes marked partial are parsed and accepted but not everything about them works. The note under each says what's missing.

The engine behind this book is a little over four thousand lines of plain JavaScript modules, with no dependencies and no build step. You can read all of it in the js/vrml folder. Here is the tour.

The parser (parser.js)

A tokenizer splits the file into words, strings, and brackets, treating commas as whitespace (as the spec says) and remembering line and column numbers for error messages. A recursive-descent parser then reads statements. It knows the type of every field from the node tables, which it needs, because VRML values carry no type markers: 1 0 0 could be a color, a vector, or three separate floats, and only the field knows. The built-in node table in nodes.js is written in the spec's own interface syntax and parsed at startup by the same parser, which is a nice test that the parser works.

PROTO bodies are stored as token lists and parsed fresh for each instance, with IS wiring the inner nodes to the instance's interface. VRML 1.0 uses the same tokenizer and parser with a different node table, then goes through the converter in v1.js.

The runtime (world.js, behaviors.js)

Routes are stored in a map keyed by source node and field. Sending an event to a node stores the value (for exposedFields), passes it to that node type's behavior (an interpolator computes its output, a TimeSensor starts or stops), and then follows every route out of the node. Each route remembers the timestamp of the last event it carried and refuses a second one with the same stamp, which is the spec's loop-breaking rule in one line of code. Bindable nodes live on stacks, one per type.

Scripts (script.js)

Script source is compiled with the Function constructor and run inside a with block whose scope object is a JavaScript Proxy. Reading a name that matches a script field returns that field, converted to an SFVec3f, SFColor, or whatever its type is; assigning to it queues an event. The with statement is forbidden in modern strict-mode code, and there is something pleasing about using it to emulate 1997 scoping rules. After a function returns, any field objects it modified in place are noticed and sent as well.

Geometry (geometry.js)

Every geometry node becomes a flat list of triangles with positions, normals, colors, and texture coordinates. ElevationGrid and Extrusion generate face-set data and go through the same code as IndexedFaceSet, including crease-angle smoothing and ear-clipping for non-convex polygons. Text is drawn into a canvas and mapped onto a rectangle. Results are cached and rebuilt only when a field changes.

Rendering (renderer.js)

Each frame walks the scene graph, collecting shapes with their transforms, the lights in scope for each, and the pointing-device sensors above each. The shader is WebGL 2 and computes the VRML97 lighting equation per pixel: emissive, plus ambient, diffuse, and specular for each light, with attenuation and spotlight falloff, then linear or exponential fog. Real browsers of the period computed lighting per vertex, which is why big flat floors never showed a spotlight. We cheat in your favor.

Picking and navigation (viewer.js)

Mouse clicks become rays, tested against every triangle on the CPU after a bounding-box check. A hit tells us which sensors to wake. Navigation keeps the camera as an offset from the bound Viewpoint, so animated viewpoints carry you along, and jumps between viewpoints are blended over a fraction of a second.

What's missing

• Collision detection and terrain following. You can walk through walls and off cliffs.
• Spatialized sound. AudioClip plays, but not from anywhere in particular.
• MovieTexture and the image URLs of Background panoramas.
• Java scripting, and the External Authoring Interface that let Java applets on a page talk to a world.

Specifications

• The Virtual Reality Modeling Language, ISO/IEC 14772-1:1997, published online by the Web3D Consortium at web3d.org. This is VRML97, the authoritative description of everything in this book.
• The X3D specifications, VRML's successor, also at web3d.org.

Books of the Period

These are real books. Some are out of print, and all of them are easier to find second-hand than you might think.

• Rikk Carey and Gavin Bell, The Annotated VRML 2.0 Reference Manual. Addison-Wesley, 1997. The spec, with the reasons behind it.
• Jed Hartman and Josie Wernecke, The VRML 2.0 Handbook: Building Moving Worlds on the Web. Addison-Wesley, 1996.
• Andrea L. Ames, David R. Nadeau, and John L. Moreland, VRML 2.0 Sourcebook. Wiley, 1997.
• Mark Pesce, VRML: Browsing and Building Cyberspace. New Riders, 1995. Covers 1.0, and the dream behind it.
• Josie Wernecke, The Inventor Mentor. Addison-Wesley, 1994. Where the scene graph came from.