VRML version 2 Tutorial expose the visitors to the VRML ...se4d03/examples.vrml/vrml2tut.pdf · Welcome to my VRML Tutorial. This tutorial was put together as the result of a CS4Z03

- 1 -

VRML version 2 Tutorial

The following VRML v2 tutorial is provided by Mr.Paolo Cirone, an independent study student under my supervision for the 1997-98 academic year, CS4Z03. I appreciate his authorization to employ this system in the CS3SE3 course.

-- wfsp/March,1998 ---------------------------------------------------------------------------------------------------------------- Welcome to my VRML Tutorial. This tutorial was put together as the result of a CS4Z03 Self-Study with Dr. Poehlman. I hope you will find this a useful resource. It was meant to expose the visitors to the VRML language and some of its fundamentals.

All of the worlds were created by hand. You are welcome to cut and paste from these examples. You will need a 3D Web Browser. I suggest SGI’s CosmoPlayer.(A solid FREE product) Other than this requirement, you are ready to go. You can find more VRML resources on the web. You will also find a direct link to the CosmoPlayer download site in the VRML Links selection box on the left. Have fun.

CS3SE3 VRML2 Tutorial Page 2 of 2

Introduction Graphics computing in the early days was very limited to the average user due to hardware constraints. Only a select few with enormous and expensive computers were able to render anything worth looking at. Even for these fortunate individuals something was lacking realism. Today, most PCs have their own special 3D graphics card that helps the processor render more attractive images with greater speed. Even software vendors are creating their products so that they exploit this new technology. Many games are now released supporting common 3D accelerator chip-sets. Prototyping projects from large skyscrapers to home renovations are very commonplace in today’s market. Now clients have the opportunity to see working models of what they will be investing in before it is actually built. A significant improvement from computer graphics available a decade ago. So, with all of these positive steps in computer graphical representation, it only makes sense that 3D rendering over the World Wide Web become reality. If people crave 3D images, why should the web be limited to the 2D HTML format we are all accustomed to? VRML, pronounced vermal, is an acronym for the Virtual Reality Modeling Language. It was created to expand the web from a 2D to a 3D interface. Actually, VRML is neither a Virtual Reality tool nor a Modeling tool. "VRML is a 3D analog to HTML. This means that VRML serves as a simple, multiplatform language for publishing 3D Web pages. This is motivated by the fact that some information is best experienced three dimensionally, such as games, engineering and scientific visualizations, educational experiences, and architecture." (Gavin Bell) A quick VRML history VRML can be traced back almost four years now to the middle of 1994. A web conference in Europe raised the first issues of a 3D web standard. Tim Berners-Lee coined the term VRML as an acronym to parallel HTML. At the end of the conference a www-vrml mailing list was created to collect ideas and information on the topic VRML 1.0 was created some months after the mailing list was started. This was very fast considering that the specification was put together over e-mail communication. The Inventor graphical file format from Silicon Graphics was chosen to facilitate implementation over many platforms.(Gavin Bell) The only problem was that the animation capabilities of the Inventory file format were not included, so VRML worlds were still.


VRML 1.1 added little animation and audio to the VRML 1 specification in late 1995, but this was not enough. Upon the completion of VRML 1.1, work on VRML 2 started and was completed with some major overhauls in 1997. The WWW and VRML Initial planning and design made it possible for VRML to fit into the existing infrastructure of the WWW. This still holds true today. It uses existing web standards wherever possible, even if those standards are not ideal when used with VRML. "Using existing standards instead of inventing new, incompatible standards makes it much easier for the Web developer, who can use existing tools to help create VRML content. It also makes it much easier for somebody implementing the VRML standard, since libraries of code for popular standards already exist."(Gavin Bell) VRML can interact and incorporate many different types of files. Texture maps can be of .gif and .jpg type as well as others. MPEG files can be displayed in a VRML world. Audio clips can be part of these worlds as well. There are six ideal methods of combining VRML, HTML, and Java. The following list summarizes the possibilities: 1. VRML file inside an HTML file: This is a semistandard part of HTML using the

<EMBED> or <OBJECT> HTML tag, although HTML does not require that HTML browsers support embedding of VRML files (or any other type of file) into HTML documents.

2. Java code inside a VRML file: This is a standard (although not required) part of VRML 2.0, using a Script node that refers to the compiled Java code.

3. Java applet communicating with a VRML browser: This is a not-yet-standard extension to VRML 2.0 known as the External Authoring Interface (EAI). At some time in the future it will probably become a standard (but perhaps not required) part of VRML.

4. Java classes corresponding to VRML nodes: Several companies are developing programming toolkits that define in-memory representations of VRML nodes that can be used in any way the programmer wishes. These can be extremely useful when implementing VRML browsers or VRML tools, but none are yet a standard part of either VRML or Java.


5. HTML file inside a VRML file: Using an HTML file as a texture map to display it

inside a 3D world would be an interesting extension to VRML, this it is not yet supported by any VRML browser and thus is not part of VRML 2.0.

6. Java applet inside a VRML file: Using a Java applet as a texture map to display the Java program inside the 3D world would be an interesting extension. Interaction with the Java program could also be supported by projecting pointing device motion onto the applet. This also is not supported and is not part of VRML 2.0. (Gavin Bell)

Creating VRML worlds VRML worlds can be created with a simple text editor. Wordpad, pico, vi, whichever simple text editor available to you is fine. Of course you will also need a browser capable of displaying VRML to view your creations. Netscape Navigator 4.0 and Internet Explorer 4.0 have built-in VRML browsers. So installing a VRML browser is a non-issue for these users. Previous versions of Netscape and Internet Explorer do not have a built-in browser. You can get a free copy of CosmoPlayer at the SGI homepage. Follow the download and installation instructions at the download site to get the VRML browser going. Creating very complex worlds is almost out of the question if you want to do this by hand. (i.e. program from scratch) Many companies have made 3D world builders available to the public for a small fee. They have some very attractive features. The main feature being that one can create a VRML world without the slightest bit of VRML programming knowledge! Many believe that the best way to learn how VRML works is to hand-edit small, simple worlds. These lessons take that approach.


Lesson 1: Getting Started Before we start coding our first VRML world we need to understand the design stage of VRML world creation. The design stage is known as a Scene Graph. As a rule, no VRML world should be constructed without designing a scene graph. It helps keep the items in your world in their proper groups. Imagine trying to design a crude leg kicking a ball in VRML. Now imaging that you placed all items in the world in their initial positions. Let me further explain the preceding line… You have a cylinder representing the thigh, another smaller cylinder representing the lower leg, and an elongated sphere representing the foot. Albeit the three shapes representing the leg are crude, they are all joined in the initial position because the programmer positioned them in that way. Now let’s assume the programmer failed to take into account that when the lower leg moves, the foot must go with it and the lower leg must stay joined to the upper leg. When the user proceeds to move the lower leg, the foot and upper leg will remain in their initial positions; not a very useful representation! Taking the time to design a scene graph allows you to take all of the above factors into account.

Before designing the scene graph let us take a look at the different nodes that will be part of the graph. All around this caption are classes or nodes that can be used to create a scene graph.


Now we will take a look at a scene graph for the leg example.

VRML2 File Format All of your VRML worlds are created from simple text files as mentioned above. The file type for a VRML world has to be *.wrl . The first line in the file, which is mandatory, is the header line. This line tells the browser trying to display the file various things about it. Here is the header line for all VRML2 files,

#VRML V2.0 utf8

This line indicates to the browser that the file has a VRML2 file format and that the text contained within it uses the UTF8 coding standard. UTF8 is an ISO encoding standard that allows the text of the file to be displayed by any text editor. It also facilitates displaying most characters from other countries as well. Some examples are accented characters from Europe as well as Kanji and Hanzi characters(these are Japanese and Chinese). The pound sign (#) signifies a comment in VRML. The # can be placed anywhere in a file. Anything past that sign is ignored on that line alone. There are no start and finish comment signs as in C, only the # is used in VRML. A very simple VRML file follows. #VRML V2.0 utf8 Shape { geometry Sphere { } # a simple sphere } In the example above, the comment # a simple sphere, starts at the # and ends at the end of the same line. As in any programming commenting your code is always useful to keep track of what you are doing.


Lesson 2: Basic Scenes Shape Node We now have an idea of what is needed to create a VRML world from the first lesson. Before we start rendering basic shapes, let’s look at the Shape node and its associated geometry types. The shape node has the following definition: Shape{ exposedField SFNode appearance NULL exposedField SFNode geometry NULL } This definition tells us that with the Shape node, we can define and render a geometric shape and its appearance. The default for both node options is NULL. A Shape node with a NULL geometry does not do much (it will display empty space). A NULL appearance with a defined geometry will display that shape with a default color of white and no real texture. There are four basic geometric types, they are the Sphere, Cone, Cylinder, and Box. We will look at the definition of all of these. Let us revisit the sample code from the end of lesson 1. Here it is again with additional comments. #VRML V2.0 utf8 #simple sphere example #default color and no texture Shape{ geometry Sphere { } # a simple sphere }

This simple world renders a sphere with no appearance defined. So it is white with no real texture. This is as simple a 3D VRML you will find. This VRML example appears at the left.: Lesson 2-Figure 1 -- a simple

sphere, un-coloured.


Geometric Definitions The Sphere Node Here is the definition for the Sphere Node: Sphere{ field SFFloat radius 1 } The radius is the only field in the sphere node. It has a default value of 1. In the example above, the sphere node appears as a value of the geometry field in the shape node. In the same example, the sphere has a radius of 1 even though it was not defined. The Cone Node Here is the definition of the Cone Node: Cone{ field SFFloat bottomRadius 1 field SFFloat height 2 field SFBool side TRUE field SFBool bottom TRUE } There are four fields for the cone node. The bottom Radius field, has a default value of 1 when it is not defined. The height when not defined has a default value of 2. The boolean fields of side and bottom are interesting. Their default is TRUE. If for example, the bottom field is set by the programmer to FALSE, the bottom side of the cone is invisible. The same is true for the side of the cone. So it would be very easy to create an ice cream cone. As we saw in the sphere node, the cone node can appear as a value of the geometry field in the shape node. The Box Node Here is the definition for the Box Node Box{ field SFVec3f size 2 2 2 } There is one field to the box node. It defines the size of the box along the three axes that it sits on (default being x y z and a size of 2 2 2). With this in mind, any rectangular box can be defined. Like the previous two nodes, the box node can appear as a value of the geometry field in the shape node.


The Cylinder Node Here is the definition of the Cylinder Node: Cylinder{ field SFBool bottom TRUE field SFFloat height 2 field SFFloat radius 1 field SFBool side TRUE field SFBool top TRUE } There are five fields in the cylinder node. A boolean field for each of the top, bottom, and side (default is TRUE for all so that they are displayed). There are two fields to define the height and radius of the cylinder as well (default is height=2 and radius=1). We will see an example of all (except the cylinder) geometry nodes after looking at the material and appearance nodes. The Material and Appearance Nodes The Appearance Node Here is the definition for the Appearance Node: Appearance{ exposedField SFNode material NULL exposedField SFNode texture NULL exposedField SFNode textureTransform NULL } There are three fields in the appearance node. All three of these fields reference other nodes. The only node that we will be looking at is the material node. The appearance node can be a value in the appearance field of a shape node. The Material Node Here is the definition for the Material Node: Material{ exposedField SFFloat ambientIntensity 0.2 exposedField SFColor diffuseColor 0.8 0.8 0.8 exposedField SFColor emissiveColor 0 0 0 exposedField SFFloat shininess 0.2


exposedField SFColor specularColor 0 0 0 exposedField SFFloat transparency 0 } There are six fields in the material node. The most commonly used field is the diffuseColor field. This field is used to set the desired color of the entire area using a mix of the primary colors. The transparency field has a default value of 0 (no transparency) and be set to a maximum value of 1 (totally transparent). Shininess has a minimum value of 0 (a large area is shiny) and a maximum value of 1 (only a very small area is shiny). The specularColor field defines what color to make the shine in the shininess field. The default value is 0 0 0 for a white shine. The other two fields are not touched upon in this tutorial. Let us now look at some examples of how we can use these tools to improve our original, simple, boring, white sphere. The following example is an example of a sphere with a radius of 2 and blue in color. The shininess field was used to decrease the shiny area on the sphere The blue sphere VRML example follows. (See Lesson 2 - Figure 2.) #VRML V2.0 utf8 #blue sphere example created by Paolo Cirone Shape { appearance Appearance { #appearance field of shape node material Material { #material field of appearance field diffuseColor 0 0 1 #diffuseColor is set to a value of blue #diffuseColor is a field value of the # material node shininess 1 #smaller shiny area # than default } #end material } #end appearance geometry Sphere { radius 2 } # end sphere } # end shape Lesson 2-Figure 2 -- a simple blue coloured

sphere.


The next example is a simple brown cone. #VRML V2.0 utf8 #simple brown cone example created by Paolo Cirone Shape { appearance Appearance { # appearance field of shape node material Material { # material field of appearance field diffuseColor 0.5 0.5 0 # diffuseColor is set to a value of brown # diffuseColor is a field value of the material node } # end material } # end appearance geometry Cone {} #simple cone } #end shape This example, then, is a cone where the bottom is made invisible. However there is an interesting quirk to this cone when viewed, can you see it? The brown cone VRML example: #VRML V2.0 utf8 # quirky upsidedown # ice cream cone # example # created by # Paolo Cirone Shape { appearance Appearance { # appearance field of shape node

Lesson 2-Figure 3 -- The simple brown cone example.


material Material { # material field of appearance field diffuseColor 0.5 0.5 0 # diffuseColor is set to a value of brown # diffuseColor is a field value o/t material node } # end material } # end appearance geometry Cone { bottom FALSE # make bottom # invisible } # end cone } # end shape The VRML example that is a simple green box appears at the right: #VRML V2.0 utf8 # simple green box # example created # by Paolo Cirone Shape { appearance Appearance { # appearance field of shape node material Material { # material field of appearance field diffuseColor 0 1 0 # diffuseColor is set to a value of green # diffuseColor is a field value of the material node } # end material } # end appearance geometry Box { size 1 2 3 } # end box } # end shape

Lesson 2 -- Figure 3: The GREEN box example.

NOTE: in order to examine the graphic detail from treeware, the colours of the remining gifs have been inverted.


In case it is not evident from the examples, the diffuseColor allows you to use the three colors red, green, and blue, as well as a mixture of two or more of them. I will leave it to you to figure out which SFColor each of them are represented by. Try creating a cylinder with radius 0.5 and a height of 4 in any color you like. Then try making the top invisible. What do you see? Lesson 3: More Complex Scenes By now you should be asking yourself a couple of questions. How can I place the objects I am creating in my world other than in the center of the screen? And how can I get more than one object on the screen so they don’t overlap? This is what this lesson attempts to answer for you. Until now all objects we have created have been place in the middle of the screen when we first view the world. VRML works with an x,y,z coordinate system. Positive x places the object to the right of the screen, negative x, to the left. Positive y places the object up the screen, negative y, down the screen. Positive z places the object closer to you, negative z, further from you. Another point we should clarify now is the unit associated with radius, height, etc. represented in the past lesson. The sizing for height, radius, etc. corresponds to a meter in the real world. This should help you scale your objects properly. So take the Blue Sphere example from Lesson 2, it had a radius of 2 and thus a diameter of 4. That corresponds to a sphere that has a radius of 2 meters in the real world. Transformation This is the method by which we can place objects at various distances from one another in a VRML world. As mentioned by default an object is placed at 0 0 0 in a VRML world. The Transform Node is used to place objects at different points in the world. The Transform Node definition follows: Transform{

eventIn MFNode addChildren eventIn MFNode removeChildren exposedField SFVec3f center 0 0 0 exposedField MFNode children [] exposedField SFRotation rotation 0 0 1 0 exposedField SFVec3f scale 1 1 1 exposedField SFRotation scaleOrientation 0 0 1 0


exposedField SFVec3f translation 0 0 0 field SFVec3f bboxCenter 0 0 0 field SFVec3f bboxSize -1 -1 -1

} # end transform The transform node has two events and eight fields, let us take a quick look at all of them. The addChildren event adds the passed nodes to children, and the removeChildren does the opposite. We will use the translation field most often in this lesson. The translation field operates on the children of the current node and translates them in the x y z direction specified (we will see an example later to clarify). The rotation field executes the defined rotation on the given axis and angle. Scale is another useful field, it allows you to change standard geometric shapes, eg. sphere to ellipsoid. The center field defines the center of rotation. The children node lists children nodes in the current node. The remaining fields will not be used in this tutorial. The transform node is a grouping node that can be both the parent and child to the shape node. It can also be nested in these nodes. This is one of the most powerful nodes in VRML. Here is a look at a simple world using the transform node. The gray cone, translated, VRML example: #VRML V2.0 utf8 #simple grey cone translated... # created by Paolo Cirone Transform{ translation -3 2 0 # move left, and up children Shape { appearance Appearance { material Material { diffuseColor 0.5 0.5 0.5 # end material } } # end appearance geometry Cone {} # simple cone } # end shape } # end transform

Lesson 3 - Figure 1: The simple gray cone trans-lated (moved) example (inverted colours).

Lesson 3 -- Picture 0:To review, here is what the scene graph looks like for the above example.


Here is another example, with two spheres nicknamed "earth and moon". This is the VRML example: #VRML V2.0 utf8 # earth and moon... # created by Paolo Cirone # blue color Shape {

appearance Appearance {

material Material { diffuseColor 0 0 1

} # end material

} # end appearance geometry Sphere {}

} # end shape Transform{

translation 2 2 2 children Shape{


material Material { diffuseColor 0.5 0.5 0.5

} # end material

} # end appearance geometry Sphere { radius .1}

} # end shape

} # end Transform Here is a look (see right) at the scene graph for the preceding example.

Lesson 3 -- Figure 2: The "earth & moon" VRML example.

Lesson 3 -- Picture 1: The scene graph for the two sphere (earth & moon) reality.


This next example shows nested Transforms. VRML example at right: #VRML V2.0 utf8 # nested Transforms... # created by Paolo Cirone # blue color Shape {

appearance Appearance { material Material {

diffuseColor 0 0 1 } # end material

} # end appearance geometry Sphere {}

} #end shape Transform{

translation 2 2 2 children [

Transform { translation 1 2 –10 children Shape{



} # end appearance geometry Sphere { }

} # end shape

} # end transform Shape{



} # end appearance geometry Cone { }

} # end shape ] # end children

} # end Transform

Lesson 3 -- Figure 3: The nested transforms example for two spheres and a cone.


I will leave it to you to create the scene graph for this world. Scale Scale is a really simple concept to understand. The scale field in the transform node allows you to change the shape of the current node. The scale field has three numbers corresponding to the stretch or compressing of the node along the x y and z axes. Here is a quick example to show scale’s functionality and then we will move onto the rotation field. See right for VRML example: #VRML V2.0 utf8 # nested Transforms with scale... # created by Paolo Cirone # blue color Transform{

translation 1 1 -10 children [

Transform { scale 1 3 2 translation 1 2 –1

children Shape{ *****some code cut here, see source code*****

] # end children

} # end Transform Rotation The rotation field in the transform node allows the programmer to flip a node around any defined axis. Let’s look at an example and then explain what is happening.

Lesson 3 -- Figure 4: Using "scale" with nested transforms.


See right for VRML example: #VRML V2.0 utf8 # right_side_up # ice cream cone... # created by Paolo Cirone Transform{

rotation 1 0 0 3.14 children Shape {


material Material { diffuseColor 0.5 0.5 0

} # end material

} # end appearance geometry Cone {

bottom FALSE # make bottom invisible } # end cone

} # end shape

} # end transform This cone still has the same quirk as the original upside-down cone presented in lesson 2. The rotation field works in this way. The first three numbers in the list represents which axis to rotate the node on. The second number represents the angle to rotate in radians. For a quick review, converting radians to degrees is linear. Here is the formula: degrees X .017444 = radians. You must make sure that your angle is between –360 and 360 for this to work properly. So in the above example, 180degrees X .017444 gave 3.14 radians. The right-hand rule is used to determine in what direction the rotation is done in. (Refer to your high school calculus notes for the right-hand rule.) To review, the Transform node played a large roll in this lesson. We were able to place many nodes in one world in different locations. We were also able to scale and rotate these nodes.

Lesson 3 -- Figure 5: The right-side-up ice cream cone example!


Lesson 4: Reuse in VRML If you are able to reuse parts of your code, then you are able to save space in your source files. Saving space in your source files means a smaller file that users would have to download. There are two modifiers that are used in the reuse of VRML code. These two modifiers are DEF and USE. DEF and USE can be placed wherever a node name is allowed in VRML source code. The DEF modifier is placed before a node description. When DEF is used, a name has to be defined for this definition. A legal name is at least 1 character but must start with a character. The USE modifier along with the defined name is used in place of the node name and its description. The following example shows how DEF and USE are used in VRML. See right for VRML example: #VRML V2.0 utf8 #DEF and USE example... # by Paolo Cirone Transform{

translation 2 2 2 Shape{

appearance DEF app1 Appearance {

material Material { diffuseColor 1 0 1

} # end material


} # end shape

} # end Transform Shape{

appearance USE app1 geometry Sphere{}

} # end shape

Lesson 4 -- Figure 1: Note if error occurs, the dashboard has ring lights on and flashing: yellow if warning or red if fatal error (terminates).


You can also use DEF and USE to reuse nodes like Shape. Using these modifiers saves execution time of VRML files on VRML browsers. Thus using the DEF and USE modifiers not only allows you to create smaller source files but it also allows the browser to render VRML worlds faster. Below is another example of DEF and USE. See right for VRML example: #VRML V2.0 utf8 #DEF USE example... # created by Paolo Cirone DEF shorttower Group{

children [ Transform{

translation 0 1 0 children [

Transform { translation 0 1.5 0 children Shape{




} # end shape } # end transform Shape{



} # end appearance geometry Cylinder { height 1 }

} # end shape ] # end children

} # end Transform ] # end children

} # end group Transform{

translation 0 1 0 rotation 1 0 0 3.14 children USE shorttower

} # end transform

Lesson 4 -- Figure 2: Reality with the DEF & USE modifier as an example.


The example above contains two short cylinders and two cones. We use the Group Node to group one cylinder and cone. We then used DEF to give the grouping a name. We then reused the two nodes in the third Transform node. We have not yet seen the Group Node. A group node is the same as the transform node without the transformation fields. Like the transform node, the group node can appear as a parent or child of a grouping node. Lesson 5: Complex Objects Here you will be introduced to the IndexedFaceSet node. This node will allow us to create shapes more complex than the four geometric shapes discussed thus far. VRML browsers have trouble rendering shapes that are non-convex. More time is needed in the rendering process if a face of a shape is non-convex. An ideal 3D shape is a collection of convex joined flat faces. Each convex flat face lies in one plane. The diagram below shows the difference between convex and non-convex faces. If a face is non-convex, it is best to make the face a collection of convex faces.

Here is the definition for the IndexedFaceSet Node. IndexedFaceSet{

eventIn MFInt32 set_colorIndex eventIn MFInt32 set_coordIndex eventIn MFInt32 set_normalIndex eventIn MFInt32 set_texCoordIndex


exposedField SFNode color NULL exposedField SFNode coord NULL exposedField SFNode normal NULL exposedField SFNode texCoord NULL field SFBool ccw TRUE field MFInt32 colorIndex [] field SFBool colorPerVertex TRUE field SFBool convex TRUE field MFInt32 colorIndex [] field SFFloat creaseAngle 0 field MFInt32 normalIndex [] field SFBool normalPerVertex TRUE field SFBool solid TRUE field MFInt32 texCoordIndex []

} # end Indexed Face Set The indexedfaceset node has four events and fourteen fields. By now, most of these fields and events should be self-explanatory. I will describe the newer fields though. The ccw field or counter-clockwise field determines which side of the face is displayed or visible. If the ccw is FALSE, the face is visible from the bottom. (looking up from the y axis) If the ccw is TRUE, then the face is visible from the top. The convex field is set to TRUE forces all faces to be convex. If any of the faces are non-convex and the field is set to TRUE the rendering will be undefined. If the field is set to FALSE, some of the faces may be non-convex. The solid field allows both sides of a face to be visible if set to FALSE. The default is TRUE, thus, only one face is visible which is determined by the ccw field. the creaseAngle field determines at what angle in radians you will see an increase between two faces. The normal field must be the default NULL for this to work. The IndexedFaceSet node can appear in the geometry field of a shape node. Here are some examples that show IndexedFaceSet at work. At the right is a VRML example #VRML V2.0 utf8 #indexedfaceset example... # created by Paolo Cirone

Lesson 5 -- Figure 1: Illustra- tion of an Indexed Face Set.


Shape {

geometry IndexedFaceSet { solid FALSE # make visible from top and bottom coord Coordinate {

point [0 1 0, 1 0 0, 2 1 3] } # end coordinate coordIndex [0, 1, 2, -1]

} # end indexedfaceset

} # end shape The bold line that starts with point defines which three points to join. The first point (0 1 0) has an index of 0, the second (1 0 0) has an index of 1, and the third (2 1 3) has an index of 2. The bold line coordIndex outlines which points to join. In this case it is all three. The –1 at the end of the sequence simple indicates the end of the Index. The FALSE value of the solid field tells the browser to make both sides of the triangle visible. Here is a more complex example; it is an open box. The VRML example of the OpenBox. #VRML V2.0 utf8 #openbox example... # created by Paolo Cirone Transform{

rotation 0 1 0 .78 # rotate 45 degrees about y axis children Shape {


material Material { diffuseColor 0 1 0.5 # light green color

} # end material

} # end appearance geometry IndexedFaceSet {

solid FALSE # make visible from top and bottom

Lesson 5 -- Figure 2: The open ended box.


coord Coordinate { point [1 1 1, 1 -1 1, -1 -1 1, -1 1 1,

-1 1 -1, -1 -1 -1, 1 -1 -1, 1 1 -1, 1.5 1.5 1, 1.5 1.5 -1, -1.5 1.5 1, -1.5 1.5 -1]

} # end coordinate coordIndex [0,1,2,3,-1, # 5 sides

0,1,6,7,-1, 1,6,5,2,-1, 3,2,5,4,-1, 5,6,7,4,-1, 0,7,9,8,-1, # 2 flaps 4,3,10,11,-1]

} # end indexedfaceset

} # end shape

} # end transform Here is the diagram of the box in the x y z plane. To summarize, the IndexedFaceSet node allows you to create any shape you like. Lesson 6: The Elevation Grid So now that we have the tools to build almost any type of shape, we need to place them on something. Until now all of our worlds have been floating on a black background. There is a node designed specifically for designing a base for your worlds. This node is known as the ElevationGrid Node. I will explain how the ElevationGrid Node works after the definition is presented to you. ElevationGrid {

eventIn MFFloat set_height exposedField SFNode color NULL exposedField SFNode normal NULL exposedField SFNode texCoord NULL

Lesson 5 - Picture 1: The co-ordinate system for box verticies.


field MFFloat height [] field SFBool ccw TRUE field SFBool colorPerVertex TRUE field SFFloat creaseAngle 0 field SFBool normalPerVertex TRUE field SFBool solid TRUE field SFInt32 xDimension 0 field SFFloat xSpacing 0.0 field SFInt32 zDimension 0 field SFFloat zSpacing 0.0

} Here is a description of the fields we will be using here. The fields ccw and solid have the same functionality of the IndexedFaceSet node. The field xDimension is the number of vertices in the x plane, and the zDimension is the number of vertices in the z plane. The xSpacing and z Spacing fields tell the browser how far apart to place each vertex in their respective plane. The height field defines the elevation at each vertex starting from the lower-left corner of the grid created by the x and z vertices. The height field has xDimension X zDimension number of values. So if you have 5 for xDimension and 10 for zDimension you must define 50 height values. The ElevationGrid node can appear as a value in the geometry node. Let’s look at a simple example to get a better feel for the node which is an ElevationGrid. (See Lesson 6, Figure 1 below.) #VRML V2.0 utf8 #simple elevation example... # created by Paolo Cirone Shape {


diffuseColor 0 1 0 }

} #end appearance geometry ElevationGrid {

solid FALSE height [0, 0.1, 0.1, 0,

1.2, 2.1, 1.9, 1.4, 0.2, 0.2, 0.5, 0]

xDimension 4 #4 vertices in the x plane

Lesson 6 -- Figure 1: An example of the VRML ElevationGrid node.


zDimension 3 #3 vertices in the z plane xSpacing 1 #spacing of 1 meter for x plane zSpacing 2 #spacing of 2 meters for z plane

} #end elevationgrid

} #end shape From the example, you should be able to discern in what order the heights are applied to the elevation grid. The diagram at the right should be able to help you understand. It should be noted that the IndexedFaceSet can get you the exact same results as the ElevationGrid. The difference is with the ElevationGrid, you only define the height at each point instead of x,y, and z if you were using the IndexedFaceSet. This saves time programming and space on your source file. Lesson 7: Illuminating Your World In all of the worlds we have seen thus far, only one light source has been present. Every VRML browser has what is known as a headlight built into it. The direction of this light is in the same direction you are looking at the scene. Even when you change your viewpoint, the light still hits all objects dead-on. This last lesson introduces two new nodes. Each of which can facilitate light operations on your scene. The first node is called DirectionalLight. It is used for simple light operations. For more advanced light sources we will look into the PointLight node. We will tackle one at a time. First, here is the definition of the DirectionalLight node. DirectionalLight {

exposedField SFFloat ambientIntensity 0 exposedField SFColor color 1 1 1 exposedField SFVec3f direction 0 0 -1 exposedField SFFloat intensity 1 exposedField SFBool on TRUE

}

Lesson 6 -- Picture 2: Elevation grid labeling topology.


This node has only five fields. The field ambientIntensity determines the intensity applied to all objects in the scene. The color is the color of highlight applied to all objects the light will shine on in the scene. The field direction is the direction the light is pointing. The field intensity determines the intensity of the color being generated from the light source. The field on places light on all objects in the scene if set to TRUE and on none of the objects if set to FALSE. The DirectionalLight node can appear as both the parent and child of a grouping node. Here is a VRML example to show DirectionalLight at work. #VRML V2.0 utf8 #Sphere with # Directional Light... # created by # Paolo Cirone Group{

children [ DirectionalLight{

direction 0 -1 0 # light from below intensity 0.5

}

DirectionalLight{ direction 1 0 0 # softer light from left intensity 0.25

}

Shape { appearance Appearance {

material Material { diffuseColor 0.5 0.5 1

} } geometry Sphere { }

} # end shape

] # end children

} # end group

Lesson 7 -- Figure 1: Sphere lighted from both headlight and point directional source below it.


When viewing the above example, turn off the headlight on the browser to get a better idea of where the directional light is really coming from. Next we take a look at the PointLight node. This node allows the programmer to generate a light from a particular point in the scene. Say you created a VRML lamp. Then you can easily produce a light source from that lamp. You can control what area this light can cover. Of course, the light hits objects in range at the appropriate angle relative to the lamp. The example will further show the nodes capability. For now, here is the PointLight node definition. PointLight {

exposedField SFFloat ambientIntensity 0 exposedField SFVec3f attenuation 1 0 0 exposedField SFColor color 1 1 1 exposedField SFVec3f location 0 0 0 exposedField SFFloat intensity 1 exposedField SFBool on TRUE exposedField SFFloat radius 100

} # End pointlight There are two new fields and one field changed in the PointLight node as opposed to the DirectionalLight node. The location field replaces the direction field and represents the light source relative to the surrounding coordinate space. The radius field represents the radius of the hypothetical sphere that the light covers in the coordinate space. The attenuation allows you to control light intensity from the source to its limit. The first floating point represents a constant, the second a linear function,

and the third an exponential intensity. The PointLight node can appear at the top level of VRML source code or as a child of a grouping node. At the left a VRML example further illustrates the use of this node. Two views are presented: one with the headlight and directional source ON and the second with only the directional point source ON (i.e. headlight turned OFF via browser console preference change.

Headlight ON and lower left sphere is the "sun" light source.

Headlight OFF so "sun" is only light source BUT the sun itself is NOT seen.

Lesson 7 -- Figure 2: (a) shows parallel light from headlight while (b) shows diectional light only


#VRML V2.0 utf8 #nested Transforms with PointLight... created by Paolo Cirone Group{

children [ PointLight {

location 0 0 0 } # end pointlight with default 100m radius

Shape {


***skip some code***

] # end children

} # end group Some of the code was skipped to save space. You can peek the code from the browser if you like. You should notice that once you look at the source code, you see that three spheres are defined. When you browse the scene however, four spheres are present. Why??? Once again, turn off the headlight on the browser. You will see that only 3 of the spheres have been lit. The remaining unlit sphere is the light source. I left it visible so that you can see what the source is in this scene. So that’s it!!!! By the Way, there WAS something in that open box example (Lesson 5 -- Figure 2), and here it is at the right! Hope this tutorial was of some help in shedding some light on the creation of your virtual reality. Paolo Cirone, March, 1998, McMaster University, Hamilton, Ontario, Canada

File: VRML2tut.doc Date: wfsp/8apr98.

Bonus Figure: Reorien-tation of Lesson 5 - Figure 2 to "look" inside the box.

VRML version 2 Tutorial expose the visitors to the VRML ...se4d03/examples.vrml/vrml2tut.pdf · Welcome to my VRML Tutorial. This tutorial was put together as the result of a CS4Z03

Documents