CVVR Lab.@ National Dong Hwa Univ. 國立東華大學 VRML Virtual Reality Modeling Language

CVVR Lab.@ National Dong Hwa Univ. 國立東華大學

VRML

Virtual Reality Modeling LanguageVirtual Reality Modeling Language

http://www.parallelgraphics.com/products/cortona/http://www.parallelgraphics.com/products/cortona/


VRML

• In addition to HTML (HyperText Markup Language), that has become a standard authoring tool for the creation of home pages, VRML provides 3D worlds with integrated hyperlinks on the Web.

• Home pages become home spaces.


• A text file format • A simple language for describing 3-D shapes and interactive environments • A web standard

• VRML is endorsed by most 3-D graphics vendors and most web browser vendors

• Virtual environments are realized by a player (browser) that interprets, executes, and presents VRML files

1. What is VRML


You can write VRML files using: • Any text editor • Many world builder applications

You can view VRML files using: • A VRML browser • A VRML plug-in to an HTML browser

such as Cortona Player or Cosmo Player

Writing and Viewing VRML Files


VRML Example boink-penrose.wrl


VRML files contain:

• Header • Comments - notes to yourself • Nodes - nuggets of scene information • Fields - node attributes you can change • Field Values - attribute values • Node Names - names for reusable nodes

• Nodes have field and field values that describe their attributes. Shape nodes are used to define shapes with appearance and geometry.

VRML File Format


Nodes can be named, and used repeatedly

DEF MyCylinder Shape { . . . } . . .

USE MyCylinder . . . USE MyCylinder

Defining Names for Nodes


•Shapes are the building blocks of a VRML world •Primitive Shapes are standard building blocks:

• Box • Cone • Cylinder • Sphere

Example: prim.wrl

2. Building Primitive Shapes


Understanding Shapes

• Shape nodes describe:

• geometry - form, or structure • appearance - color and texture

Shape { geometry . . . appearance . . . }


• Shape geometry is built with geometry nodes

• Standard, primitive geometry nodes include:

• Box { . . . } • Cone { . . . } • Cylinder { . . . } • Sphere { . . . }

Specifying Geometry


• Geometry node fields control dimensions

Box { size 2.0 0.5 3.0 } Cone { height 3.0 bottomRadius 0.75 } Cylinder { height 2.0 radius 1.5 } Sphere { radius 1.0 }

• Dimensions are usually in meters, but they can be anything

Setting Geometry Dimension


#VRML V2.0 utf8 # A Cylinder Shape { appearance Appearance { material Material { } } geometry Cylinder { height 2.0 radius 1.5 } }

Examples: cylinder.wrl

A Sample Primitive Shapes


• children - a list of member nodes for the group

Group { children [ Shape { . . . }, Shape { . . . }, . . . ] }

Understanding Groups


A Sample GroupExample: space.wrl


• Text Shapes build text in a VRML world

• Signs, notes, annotation, control panels

• Text shapes are flat and have no thickness

• You can choose the font family, style, size, etc.

3. Building Text Shapes


•Text geometry nodes describe:

•text strings - the text to build •font style - how to build the text

Shape { geometry Text { string . . . fontStyle . . . } }

Understanding Text


• Text strings list the text to build

• Each string is built on its own line or column

Text { string [ "SIGGRAPH 96", "Conference" ] }

Building Text Strings


Font styles have: •family - serif, sans, or typewriter •style - bold, italic, both, or none •size and spacing- character size and spacing

FontStyle { family "SERIF" style "BOLD" size 1.0 spacing 1.0 }

Specifying Font Style


Font styles also have: •justification - begin, middle, end •direction - left/right, up/down

FontStyle { justify "BEGIN" horizontal TRUE leftToRight TRUE topToBottom TRUE }

Specifying Font Direction


Shape { . . . geometry Text { string [ "SIGGRAPH 96", "Conference" ] fontStyle FontStyle { style "BOLD" } } }

Examples: sigtext.wrl

A Sample Text Shape


4. Transform Shapes

• By default, all shapes are built at the center of the world

• A transform enables you to

1. Translate shapes

2. Rotate shapes

3. Scale shapes


•A VRML file builds components for a world

•A file's world components are built in the file's world coordinate system

Understanding Coordinate System


A transform creates a coordinate system that is translated, rotated, scaled relative to a parent coordinate system

Shapes built in the new coordinate system are translated, rotated, and scaled along with it

Understanding Coordinate System Transform


A Transform group node controls: •translation - position •rotation - orientation •scale - size

Transform { translation . . . rotation . . . scale . . . children [ . . . ] }

Specifying Transform


•Translating positions a coordinate system in X, Y, and Z

Transform { # X Y Z translation 2.0 0.0 0.0 children [ . . . ] }

Translating


•Rotating orients a coordinate system about a rotation axis by a rotation angle

•Angles are measured in radians

Transform { # X Y Z Angle rotation 0.0 0.0 1.0 0.52 children [ . . . ] }

Rotating


• A rotation axis defines a pole to rotate around

• Like the Earth's North-South pole

• Typical rotations are about the X, Y, or Z axes:

• Rotate about Axis X-Axis 1.0 0.0 0.0 Y-Axis 0.0 1.0 0.0 Z-Axis 0.0 0.0 1.0

Understanding Rotating Axis


Using the Right Hand Rule


•Scaling grows or shrinks a coordinate system by a scaling factor in X, Y, and Z

Transform { # X Y Z scale 0.5 0.5 0.5 children [ . . . ] }

Scaling


•Scale, Rotate, and Translate a coordinate system, one after the other

Transform { translation 2.0 0.0 0.0 rotation 0.0 0.0 1.0 0.52 scale 0.5 0.5 0.5 children [ . . . ] }

Scaling, Rotating & Translating


Transform { translation 4.0 0.0 0.0 rotation 0.0 1.0 0.0 0.785 scale 0.5 0.5 0.5 children [ . . . ] }

Examples: archs.wrl

A Sample Transform Group


5. Controlling Appearance with Material

•The primitive shapes have a default emissive (glowing) white appearance

•You can control a shape's

Shading color Glow color Transparency


The appearance of a surface is defined by setting properties that define the material from which it is made. A texture can also be defined to improve the appearance of a surface.

•material properties - color, transparency, etc.

Shape { appearance Appearance { material . . . } geometry . . . }

Understanding Appearance


•A Material node controls: •diffuse color - main shading color •emissive color - glowing color •transparency - opaque or not

Material { diffuseColor . . . emissiveColor . . . transparency . . . }

Understanding Materials


Three types of Material Reflection

•diffuseColor Color of reflected light from diffuse reflection (light scattered randomly) •ambientIntensity Amount of background light the surface reflects •specularColor Color of reflected light from specular reflection (light reflected in a regular manner)


•Colors specify: •A mixture of red, green, and blue light •Values between 0.0 (none) and 1.0 (lots)

•Color Red Green Blue

White 1.0 1.0 1.0 Black 0.0 0.0 0.0 Yellow 1.0 1.0 0.0 Magenta 1.0 0.0 1.0 Brown 0.5 0.2 0.0

Understanding Colors


Shape { appearance Appearance { material Material { diffuseColor 1.0 1.0 1.0 } } geometry . . . }

Example: slabs.wrl

A Sample World using Appearance


Making a Shape Shining

• By specifying "high" values for the Material node's shininess field, direct light will cause a specular hilight (or shiny spot) on a shape

• By specifying a value for the Material node's specularColor field, you can control the color of specular hilights (or shiny spots) on a shape


A Sample of Shape Shining


6. Grouping Nodes

•Shapes can be grouped to compose more complex shapes

•VRML has several grouping nodes, including: Group { . . . } Switch { . . . } Transform { . . . } Billboard { . . . }


•The Group node creates a basic group

•Every child node in the group is displayed

Group { children [ . . . ] }

Understanding Basic Groups


•The Transform group node creates a group with its own coordinate system


Transform { translation . . . rotation . . . scale . . . children [ . . . ] }

Understanding Transform Groups


•The Switch group node creates a switched group

•Only one child node in the group is displayed

•You select which child

Switch { whichChoice 0 choice [ . . . ] }

Understanding Switching Groups


• The Billboard group node creates a group with a special coordinate system

• Every child node in the group is displayed

• Coordinate system is turned to face viewer

Billboard { axisOfRotation . . . children [ . . . ] }

Understanding Billboard Groups


•A rotation axis defines a pole to rotate round

•Similar to a Transform node's rotation field, but no angle (auto computed)

Billboard Rotation Axes


Group { children [ Billboard { axisOfRotation 0.0 1.0 0.0 children [ ... ] }, Transform { . . . } ] }

Example: robobill.wrl

A Sample Billboard Group


Inlining World Components

• VRML files describe components of a world: tables, chairs, lamps, walls, floors, doors

• Inlining combines files to build larger components: rooms, buildings, neighborhoods


•The Inline node creates a special group

•Children are read from a VRML file selected by a URL


Inline { url "table.wrl" }

Understanding Inlining


. . . Inline { url "table.wrl" }, . . . Transform { translation . . . children [ Inline { url "chair.wrl" } ] }, . . .

Example: dinette.wrl

A Sample Inlined File


Adding Anchors to Your World

•Any shape or group of shapes can be an anchor

•Selecting the anchor jumps to a new VRML world •Like the <a href="page.html"> syntax of HTML


• The Anchor node creates a group

• Every child node in the group is displayed

• Selecting any child jumps to VRML file specified by URL

• The anchor can have a description string

Understanding Anchors


A Sample Anchor

Anchor { url "stairway.wrl" description "Floating Stairs" children [ . . . ] }

Example: anchor.wrl


7. Coordinate based Geometry: Points, Lines, and Faces

•Create more complex shapes than primitives

•Generate more efficient VRML worlds

•Have more control and flexibility than primitives


• Hard to build using primitives• There's a more flexible way to describe

shapes...


(1) Specifying Coordinates (Define location of "dots“)• Location of dots (points) using Coordinate node Coordinate { point [ 2.0 1.0 3.0, 4.0 2.5 5.3, . . . ] }

(2) Creating Geometry Using Coordinates (Connect the dots )• Three nodes have a coord field which accepts a Co

ordinate node • PointSet • IndexedLineSet • IndexedFaceSet

Describe Geometry in two steps


PointSet Node

•A dot is drawn at each point PointSet { coord Coordinate { point [ . . . ] } color Color { color [ . . . ] }}

•No control over size of dot

•Also supports color field for Color node

Example: ptplot.wrl


•Straight lines are drawn between points

IndexedLineSet { coord Coordinate { point [ . . . ] } coordIndex [ 1, 0, 3, -1, . . . ] }

Example: lnplot.wrl

IndexedLineSet Node


coordIndex [ 1, 0, 3, -1, . . . ]

•Indexes reference ordered points of coord field •Index order is arbitrary (eg: 1, 0) •Indexes are Zero-based (eg: 0) •Can skip coordinates (eg: 0, 3) •Poly-line can be many points (eg: 1, 0, 3) •End of poly-line (eg: -1) •Multiple poly-lines (eg: . . .)

CoordIndex Value


IndexedFaceSet Node

•Faces are drawn within perimeter of points

IndexedFaceSet { coord Coordinate { point [ . . . ] } coordIndex [ 1, 0, 3, -1, . . . ] }

Example: vase1.wrl


8. Binding Color to Coordinate based Geometry

•Override Material node (overall color)

•Better color control for IndexedFaceSet, IndexedLineSet, PointSet, and ElevationGrid nodes

•Apply color per-face or per-vertex


•The Color node is used as the color field value of IndexedFaceSet, IndexedLineSet, PointSet or ElevationGrid nodes

•The Color node contains a list of RGB values

Color { color [ 1.0 0.0 0.0, . . . ] }

Color Node


IndexedFaceSet { coord Coordinate { . . . } coordIndex [ . . . ] color Color { color [ 1.0 0.0 0.0, . . . ] } colorIndex [ 3, 0, 1, . . . ] colorPerVertex TRUE }

IndexedFaceSet using a color node


•In IndexedFaceSet, IndexedLineSet nodes

•When colorPerVertex is TRUE, specify one color index per coordinate index (don't forget to account for the -1's !)

•When colorPerVertex is FALSE, specify one color index per face or line (eg. per -1)

ColorPerVertexField


•Colored triangles: per-face and per-vertex

•Example: color_face.wrl, color_vertex.wrl

A sample Color Binding


9. Mapping Texture

•Wrap images around shapes •Apply an image as an opaque "decal" •Apply an image with transparent "holes"

•Wrap a movie's images around shapes

•Add realistic appearance to shapes


•Texture color overrides Material node color

•Appearance node's texture field wraps an image around geometry

•The texture can be an ImageTexture, MovieTexture, or PixelTexture

Texture Property


Appearance { material Material {} texture ImageTexture { url "myimage.jpg" } }

ImageTexture Node


Appearance { texture MovieTexture { url "mymovie.mpg" speed 1 loop FALSE } }

MovieTexture Node


•The PixelTexture node contains data stored as width, height, number of channels, followed by width*height hex values representing the image

•Example: A 2x4 RGB image

PixelTexture { image 2 4 3 0xFF0000 0x00FF00 0 0 0 0 0xFFFFFF 0xFFFF00 }

PixelTexture Node


A sample Texture Mapping

Example: can.wrl


10. Texture Control

When applying a texture, you sometimes need to control:

• What piece of a texture is extracted from an image

• How the piece of texture is applied to a face


I. Build cookie cutter of desired size and shape

II. Set position, rotation and scale over sheet

III. Extract a piece of dough from sheet, and apply extracted piece of dough onto shape

Three steps to apply a piece of texture


texCoord TextureCoordinate { point [ 0.2 0.2, 0.8 0.2, 0.8 0.8, 0.2 0.8 ] }

• Note: texCoord is a field of IndexedFaceSet, ElevationGrid nodes

I. Build Cookie Cutter Shape


• Appearance node's textureTransform field sets position, rotation and scale of cutter over the dough

TextureTransform { translation 0.5 0.5 rotation 0.0 scale 2.0 2.0 }

II. Texture Transform


• IndexedFaceSet extracts and applies the piece of texture to faces

IndexedFaceSet { coord Coordinate { . . . } coordIndex [ . . . ] texCoord TextureCoordinate { . . . } texCoordIndex [ . . . ] }

III. Extract and Apply Texture


Texture Transform: Scale

TextureTransform { scale 3.0 3.0 }


Texture Transform: Transform

TextureTransform { translation 0.166 0.0 } # 1/6


Texture Transform: Rotation

TextureTransform { rotation 0.785 # 45 degrees }


11. Shading Control using Normals

•Normals define the direction of faces

•Faces used to approximate smooth surfaces, but normals can be used to control whether a surface is flat or smoothly shaded

•Default Normals are often good enough !


•To control shading of ElevationGrid, and IndexedFaceSet nodes

•Specify normal, normalIndex, and normalPerVertex field values or…

•Set the creaseAngle field to automatically generate normals

Shading Control Tools


•The normal field specifies face direction

Normal { vector [ 1.0 0.0 0.0, 0.0 1.0 0.0, 0.0 0.0 1.0, . . . ] }

Normal Node


CreaseAngle Field

•If angle between adjacent faces is larger than creaseAngle, then faces are flat shaded.•If angle between adjacent faces is smaller than creaseAngle, then faces are smoothly shaded.


Shading

Flat• Surface colored uniformly according to its orientation towards light sources • Faceted appearance

Smooth (Gouraud)• Each vertex is assigned a color according to its orientation towards light sources and intermediate points are a blend of the surrounding vertex colors • Smooth shading • Can be too smooth (can smooth away detail)


12. Lights

•Light sources illuminate and effect shading of faces

•Several types of lights available for maximum control •Lights do not cast shadows


•Three different light nodes

•PointLight, DirectionalLight, SpotLight

•Standard fields (common to all 3) and defaults:

•on TRUE •intensity 1.0 •ambientIntensity 0.0 •color 1.0 1.0 1.0

Light Node


Point lights have a location and glow radially

PointLight { # Standard fields, plus: location 0.0 0.0 0.0 radius 1.0 #specifies the maximum distance for the light rays to travel

attenuation 1.0 0.0 0.0 }

PointLight Node

2

1

cdbdafactornattenuatio


Directional lights point in a specified direction

DirectionalLight { # Standard fields, plus: direction 1.0 0.0 0.0 }

Directional Light


Spot lights point in a direction and focus in a cone

SpotLight { # Standard fields, plus: location 0.0 0.0 0.0 direction 1.0 0.0 0.0 cutOffAngle 0.785 radius 1.0 attenuation 1.0 0.0 0.0 }

Spot Light


•Backgrounds add realism to VRML worlds

•Backgrounds are cheaper than using geometry •Backgrounds always stay "infinitely distant"

13. Background


•Two types of background (can be combined)

•Backdrop: Sky and Ground color gradients(Mapped to inside of a sphere)

•Panorama: Surrounding images(Mapped to inside faces of a cube)

Backdrop vs. Panorama


•xxxColor specifies color values

•xxxAngle specifies angles in radians (0 .. PI)

Background { groundColor [ .14 .28 0, .09 .11 0, 0, 0, 0 ] groundAngle [ .785, 1.57 ] skyColor [ .02 0 .26, .02 0 .65, 0, 0, 0 ] skyAngle [ .785, 1.57 ] }

Example: m_bkgd1.wrl

Specifying Backdrop


Specifying Panorama

•xxxUrl fields specify images

•Images overlay backdrop (if any)(backdrop shows through transparent regions)

Background { frontUrl "f_image.jpg" backUrl "b_image.jpg" leftUrl "l_image.jpg" rightUrl "r_image.jpg" }

Example: m_bkgd2.wrl


•Fog is a "special effect" for added realism

•Exact effects (if any) are browser dependent

•Colors "fade" to a specified value over distance

14. Fog


VRML Fog Example#VRML V2.0 utf8 Group { children [ ... Fog { color 1.0 1.0 1.0 fogType "EXPONENTIAL" visibilityRange 30.0 } ] }

Fog Node


•Fog can be used to provide a depth cue, add atmosphere, and increase realism

•Colors fade to value specified in color field.

•visibilityRange specifies distance at which fog color predominates. Value 0 disables node.

Example: fog1.wrl, fog2.wrl, fog4.wrl

Fog Example


15. Level of Detail

•LOD (Level Of Detail):

•Can reduce "upfront" download time(have simpler models loaded first)

•Can improve frame rate(use simpler models for far away objects)

•Useful as a depth cue


• An object is rendered with more detail when a user is close to it than when the user is far away

• An object can have several levels of detail, each valid for a different range of distances

• Hardware assist the transition between levels of detail to make them as smooth as possible

Levels of Detail


•Range specifies distance from center of LOD to viewer (for each transition between levels) •Grouping node (one child displayed at a time).

LOD { range [ . . . ] center 0 0 0 level [ . . . ] }

LOD Node


Using Ranges

•List range values in increasing order.

•Define children in order of highest to lowest detail.

•For N ranges, provide N+1 children

range [ 20, 100 ] < 20 m 1st child used >= 20 & < 100 m 2nd child used >= 100 m 3rd child used

Example: m_lod1.wrl, m_lod2.wrl


•Making good levels of detail is tricky. •Two or three levels are usually enough. •Remove "details" that are easy to remove•Simplify geometry if appropriate

•Everything is a hint!(Browser decides which level to display.) •LOD can get large, use Inline for some kids.

•Don't use LOD to simulate behavior. •center is not a translation.

Optimizing Strategy


•Primarily used to define named camera positions

•Browser will usually present a list of viewpoints using their description strings.

•Browser may animate between viewpoints.

16. Controlling the View Point


Using Viewpoint

• Orientation defines direction of view and "up" direction (relative to default orientation). Rotation

Viewpoint { position 0 0 9 orientation 0 0 1 0 description "DefaultView" }

Example:m_vwpts1.wrl


• Sound adds realism and allows special effects • General uses:

1. Continuous background (traffic, muzak, ...) 2. Continuous localized (waterfall, monster, ...) 3. Triggered (bumping wall, clicking switch, ...)

17. Adding Sound


•A Signal •AudioClip or MovieTexture Node •Think of this as the "CD player"

•A Location •Sound Node •Think of this as the "speaker"

CD Player vs. Speaker


•AudioClip specifies a signal •Typically .wav or .mid file •Start time, pitch, looping or not

•Sound specifies a place •Location, direction, attenuation region •Intensity, "spatialized" or not

AudioClip vs. Sound


•Playback started by: •Setting startTime field

•Setting loop to TRUE

AudioClip { url [ . . . ] loop FALSE startTime 0 }

AudioClip Node


•Audible if clip is playing and node is "traversed"

Sound { source AudioClip { . . . } intensity 1 location 0 0 0 direction 0 0 1 spatialize TRUE }

Basic Sound Node


Advanced Sound Node

•Defines two ellipsoids aligned with direction

•Full intensity within inner ellipsoid

•Intensity drops to zero between inner and outer

Sound { . . . minFront 1 maxFront 10 minBack 1 maxBack 10 }



•In AudioClip node set •loop field to TRUE (Will start on entering world)

•In Sound node set •minFront and minBack to large values. •spatialize to FALSE (stereo clip will play as stereo)

Example: m_sound1.wrl

Continuous Background Sound


•Set AudioClip node same as previous. •In Sound node set

•position and direction •minFront, maxFront, ... values •spatialize to TRUE (clip will play as monaural)


Continuous Localized Sound


•In AudioClip node set •loop field to FALSE (for a "one shot") •startTime each time sound should play (discussed later)

•In Sound node set •location, direction, ... •spatialize to TRUE (usually)


Triggered Sound


18. Fields and Events

• Each node has specific fields and events

1. Field : A stored value (parameter), eg. url 2. EventIn : An event node can receive, eg. set_url 3. EventOut : An event node can send, eg. url_changed

• Event: A message that contains a data value


Routes

•Route: Connects an EventOut to an EventIn

•A Route is not a node!

•Output type must match input type exactly

•Output may connect to multiple inputs (fan-out)

•Multiple outputs may connect to single input (fan-in)

•Nodes must be named in order to use Routes


DEF NODE1 Collision { . . . } DEF NODE2 AudioClip { . . . } ROUTE NODE1.CollideTime TO NODE2.startTime

Example: m_route.wrl

Route Example

Documents

CVVR Lab.@ National Dong Hwa Univ. 國立東華大學 VRML Virtual Reality Modeling Language