Beginning VRML2

Beginning VRML2

Hi all,
VRML is an ever growing technology that enables web developers to display 3D objects and environments in a web browser. You’ve probably heard of VRML from the newsteller, that’s why I wanted to make a tutorial to introduce it in a better way.

Through this tutorial you will get to know the basics of VRML and its main components and shapes

the file extension associated with VRML is “.wrl” which is basically a text file with unique structure similar to HTML, to display the 3D objects in your browser you will only need to install relatively small plug-in for your browser –I’ve attached a plug-in

The structure of a typical .wrl file contains three elements:
• File header
• Comments
• Scene graph

Header
The file header looks like this:


#VRML V.2 utf8

Notice that it starts with a ‘#’ and there’s a space between ‘VRML’ and V.2 which indicated the version of VRML you are using, and utf8 indicates the Encoding type that you use which is (UCS Transformation Format and its 8bit)

Comments
Comments start with a ‘#’ sign except the first line because it’s the header (ex:# this line is a comment).

Scene Graph
The rest of this tutorial will be about the scene graph.

Scene Graph is a Collection of nodes that draws or describes the shapes that we want to draw and how these shapes appear (lights, textures ….). Each node in a Scene graph may contain zero or more fields and each field can be assigned with values or left blank, I bet you have lost me so lets view a simple example:


#VRML V2.0 utf8

# You can write this text in a text document and save it as “.wrl”


Shape{

   appearance Appearance{ 

     texture ImageTexture { url "codecall.JPG" }

     material Material{}

   }

geometry Box{

size 4 2 2

}

}

There are 54 types of nodes in VRML, Objects of VRML are placed inside a main node that’s called “shape” which contains another 2 nodes (appearance and geometry) , the appearance node that specifies how (not what) the object will be displayed in this example we used a texture with the path to a “.jpg” file.
And the geometry node identifies what object geometry to draw and it has one field (size) that specifies the dimensions of the box (x,y,z)

When you view this .wrl file in your browse it will look like this:
http://forum.codecal...=1&d=1225632452

Now let’s take a brief look at the available shapes that we can use:
1. Box
2. Cone
3. Cylinder
4. Sphere
5. Text
-No explanation needed for the box shape we already used it

Cone
-the cone has two fields that we can customize: height and bottom radius


Shape{

   appearance Appearance{ 

     material Material{}

}

geometry Cone{

height 7

bottomRadius 3.5

}

}

cylinder
-the cylinder has two fields the height and the radius:


geometry Cylinder{

     height 3

     radius 2

 }

Sphere
-the sphere has one field: the radius

Text


Text{

string [ "CodeCall.Net" , "  While(true)" ]

fontStyle FontStyle{

style "italic"

size 3.0

spacing 1.0

}

}

In this one we have 1 field and one node , the first field is the “string” value(s) that we want to write and the node contains various fields related to the font, size and spacing. in the style field we can use bold, italic, bolditalic, or plain (notice that they are all in lowercase).the spacing is the vertical spacing between each string we have.

Here is the final output of the previous code:
http://forum.codecal...=1&d=1225632452
--------------------------------------------------------------------

Transform Node

-Till now we know how to draw a single shape in one VRML, but we have a problem; if we try to draw more than one shape they will collapse because the are all drawn in the same position , that’s why we will need the “Transform Node”
The Transform node includes the translation (position), rotation and scaling. A typical fields of and transform node can look like this:


Transform{

    translation X Y Z

    rotation X Y Z angle

    scale X Y Z

    Children[……]

}

The above code X,Y, and Z represent float variables . in the rotation field we specified the direction of the rotation and the angle, for example this line(rotation 0.0 1.0 0.0 .5) will rotate the shape around the y axis for .5 angle (90degree) . The “scale” node will resize the shape according to the values you assign to x,y and z.

The children node will contain the shapes that we want to draw, now lets test this node:


#VRML V2.0 utf8

Transform{

   translation 3.0 4.0 00

   rotation 0.0 0.0 1.0 1.0

   scale 1.0 0.5 1.0

   children[

     Shape{

       appearance Appearance{ 

       material Material{}

      }

     geometry Cylinder{

          height 3

          radius 2

      }

    }

    Shape{

       appearance Appearance{ 

       material Material{}

    }

    geometry Cylinder{

          height 8

          radius 0.1

}  }  ]  }

Transform{

       translation -2.0 0.0 00

       rotation 0.0 0.0 0.0 0.0

       scale 1.0 0.5 1.0

       children[

           Shape{

                appearance Appearance{ 

                material Material{

                    diffuseColor 0.0 0.5 1.0

                    specularColor 0.5 1.0 0.0 

                    ambientIntensity 0.5

                    transparency 0.2

                    shininess 10 

                }

           }

          geometry Text{

             string [ "CodeCall.Net" , "  While(true)" ]

             fontStyle FontStyle{

             style "italic"

             size 3.0

             spacing 1.0

} } } ] }

Notice we have two Transform nodes, in the first node we inserted two shapes that’s why they collapsed into one we can separate them by making a third Transform node and assigning different position.

Now lets take a brief look at the Material node, which controls the values of color and lightening and transparency:
• diffuseColor: is the dominant color of the shape and take three values
• specularColor: is a highlight Color
• ambientIntensity: specifies the amount of ambient light (brightening and darkening)
• transparency: takes one float value and ranges from (0.0 to 1.0) 0.0 means its transparent
• shininess: takes one value which determines the highlight size

And here is the final output:
http://forum.codecal...=1&d=1225632452

I hope you liked this tutorial, don’t hesitate to ask anything or comment
All the previous .wrl files and plug-in are in the attachments
**sorry for my English
Amr