VRML:
Virtual Reality Modeling Language

CS 6204: Java and the WWW

References

Background

Describes 3D objects, shapes
Allows navigation (zoom, turn, rotate, ...)
Can embed VRML into HTML
Displays in Web browser (e.g., Cosmos VRML plugin for Netscape)

Use of Web with VRML

Web servers publish VRML worlds
User types URL to access VRML
Browser retrieves VRML file

Some Examples

Typical Navigation

Zoom in/out

Walk-through or fly:

Move along x, y, or z directions

Spin or rotate:

Spin on x, y, or z axis or about a point to look at all sides of object

Follow hyperlinks:

Loads linked file

Return to viewpoint:

e.g., restore view to that upon entry to world

Rendering controls:

Display wireframe (polygon outlines only) vs. solid rendering (add color/texture)
Wireframe is faster.

Using VRML from HTML

Name VRML files with .wrl ("world") suffix
Web server storing file must map .wrl to x-world/x-vrml
Browser must either

have VRML plug-in or
be configured to spawn VRML browser for x-world/x-vrml MIME type

A Simple VRML Example

Step 1: Create file simple.wrl

#VRML V1.0 ascii.
Material {
    emissiveColor 1.0 1.0 1.0
}
Sphere {
    radius 2
}

Draws white sphere of radius 2 meters in the center of the world.

Step 2: Reference .wrl file from HTML file

Put a line like the following into an HTML file:


<EMBED SRC="simple.wrl" WIDTH=400 HEIGHT=200>


Here's the result:

Structure of VRML File

# starts a comment
Sequence of nodes
36 node types, in six categories

Shape nodes:

Sphere, Cone, Cube, ...

Geometry, Material, Transformation, Camera, Lighting nodes:

Control how shapes are drawn

Grouping nodes:

Gather nodes into collections that behave as one object

Nodes are listed in hierarchy called a scene

Example

#VRML V1.0 ascii.
Separator {
  Material  { emissiveColor 1.0 1.0 1.0 }
  Sphere    { radius 2 }
  Transform { translation 5 0 0 }
  Sphere    { radius 1 }
}

Notes on Above Example

#VRML V1.0 ascii.
Separator {
  Material  { emissiveColor 1.0 1.0 1.0 }
  Sphere    { radius 2 }
  Transform { translation 5 0 0 }
  Sphere    { radius 1 }
  }
}

Modifying properties:

A node (e.g., Sphere) can be preceeded by a modifying property (e.g., Material)

Material Node:

Can specify different surface characteristics (e.g., shininess, transparency, color)
Can apply texture to objects

Transform Node:

First object is drawn in middle of VRML world.
Transform moves drawing point relative to last object drawn using xyz coordinates.

Camera Nodes

When you first view a world, the browser selects a "camera viewpoint."
Can define your own viewpoint with Camera nodes.

Orthographic Camera

Flat view into world

Perspective Camera

Objects further from camera are smaller

Lighting Nodes

Used to illuminate objects and scenes.
Three types:

DirectionalLight

Parallel light rays, emitted in one direction

PointLight

Single light point, emitted in all directions

SpotLight

Cone of light, gradually dropping off with distance

Group Nodes

"Object oriented" view:

Use the DEF keyword to name a group (e.g., define object):

DEF orbit Separator{ 
  <same as before!>
}

Use the USE keyword to create an instance of a group:

USE orbit

WWWAnchor makes a node a hyperlink
WWWInline loads a VRML or other file, like HTML <IMG>

Miscellaneous Points

VRML files are often created with an editor.

Complex worlds can take a long time to download to Web browser.

gzip is built into most VRML browsers.

You can include GIFs and JPEG images in a VRML world.

You can make points in VRML world URL links.

Once .wrl file is downloaded to Web browser, all computation is done on browser computer.

Advantage:

Speed: You don't wait for mouse click to reach Web server

Disadvantage:

Speed: Rendering polygons, rotation, zoom can consume lots of CPU time

More Complex Example

Here is a more complex example from the VRML 1.0 spec. " It contains a simple model of a track-light consisting of

primitive shapes,
plus three walls (built out of polygons) and
a reference to a shape defined elsewhere, both of which are illuminated by a spotlight. The shape acts as a hyper-link to some HTML text."

Click here to see the resulting world!

#VRML V1.0 ascii
     Separator {
         Separator {       # Simple track-light geometry:
             Translation { translation 0 4 0 }
             Separator {
                 Material { emissiveColor 0.1 0.3 0.3 }
                 Cube {
                     width   0.1
                     height 0.1
                     depth   4
                 }
             }
             Rotation { rotation 0 1 0 1.57079 }
             Separator {
                 Material { emissiveColor 0.3 0.1 0.3 }
                 Cylinder {
                     radius 0.1
                     height .2
                 }
             }
             Rotation { rotation -1 0 0 1.57079 }
             Separator {
                 Material { emissiveColor 0.3 0.3 0.1 }
                 Rotation { rotation 1 0 0 1.57079 }
                 Translation { translation 0 -.2 0 }
                 Cone {
                     height .4
                     bottomRadius .2
                 }
                 Translation { translation 0 .4 0 }
                 Cylinder {
                     radius 0.02
                     height .4
                 }
             }
         }
         SpotLight {      # Light from above
             location 0 4 0
             direction 0 -1 0
             intensity       0.9
             cutOffAngle     0.7
         }
         Separator {      # Wall geometry; just three flat polygons
             Coordinate3 {
                 point [
                        -2 0 -2, -2 0 2, 2 0 2, 2 0 -2,
                        -2 4 -2, -2 4 2, 2 4 2, 2 4 -2]
             }
             IndexedFaceSet {
                 coordIndex [ 0, 1, 2, 3, -1,
                             0, 4, 5, 1, -1,
                             0, 3, 7, 4, -1
                             ]
             }
         }
         WWWAnchor {   # A hyper-linked cow:
             name "http://www.foo.edu/CowProject/AboutCows.html"
             Separator {
                 Translation { translation 0 1 0 }
                 WWWInline {   # Reference another object
                     name "http://www.foo.edu/3DObjects/cow.wrl"
                 }
             }
         }
     }

Exercise

Try creating a file named vrml.wrl, embedded in a html document called problem.html. When you view file problem.html, you should see something identical to this.

Stuck? Click here for a vrml model that solves the problem (but as a text file).

Last modified on 14 September 1999 by abrams@vt.edu

VRML: Virtual Reality Modeling Language