Nadpis

VRML

    VRML, is abbreviation for Virtual Reality Modeling Language. VRML (ISO/IEC CD 14772) is simple multiplatform language for coding 3-D objects on web pages and creating three-dimensional "words". VRML create company Silicon Graphics, Inc. and currently is in the second version (VRML 2.0).

  • ISO (International Organization for Standardization) and IEC (International Electrotechnical Commission) are organization for world standardization. National bodies that are members of ISO or IEC participate in the development of International Standards through technical committees established by the respective organization to deal with particular fields of technical activity. ISO and IEC technical committees collaborate in fields of mutual interest. Other international organizations, governmental and non-governmental, in liaison with ISO and IEC, also take part in the work.

  • In the field of information technology, ISO and IEC have established a joint technical committee, ISO/IEC JTC 1. Draft
    International Standards adopted by the joint technical committee are circulated to national bodies for voting. Publication as an International Standard requires approval by at least 75% of the national bodies casting a vote.

    International Standard ISO/IEC 14772 was prepared by Joint Technical Committee ISO/IEC JTC 1, Information Technology Sub-Committee 24, Computer Graphics and Image Processing in collaboration with the VRML Architecture Group (VAG, http://vag.vrml.org) and the VRML moderated email list (www-vrml@wired.com).

    ISO/IEC 14772 is a single part standard, under the general title of Information Technology - Computer Graphics and Image Processing - Virtual Reality Modeling Language (VRML).
     

  • For looking VRML world browser have to support VRML, as a VRML plug-in, as for example Cosmo Player company Silicon Graphics, Inc. or Worldview company Intervista.

  •  
  • Big source about VRML is page The VRML Repository. For quick understanding how to use vrml viewer Cosmo Player visit Chomp.

  •  
    2. 3D coordinate system.

     If we have VRML browser, let speak about Cartesian (or 3-dimensional) systems. In x-y viewer it is simple, because surface does not have hight. X-coordinate "goes" from left to right and y-coordinate from bottom to up. If we add z-coordinate, that goes from forward to behind we get 3D system. For example for point(1,1,1) we move one right, one up and one forward.
 

    3. Structure of files.

    Each VRML 2.0 file contains header #VRML V2.0 utf8. Text nodes may contain multiple text strings specified using the UTF-8 encoding as specified by the ISO 10646-1:1993 standard (http://www.iso.ch/cate/d18741.html). After header is name of file(must be in the same line as header). After header file can contain:

  • Prototypes
  • Children Nodes
  • Route statements
    In the following example we use Shape child node. Each command is explained later.
     
    Example 1.wrl

    #VRML V2.0 utf8 example1.wrl

    Shape
    {
      appearance Appearance
       {
          material Material
           {
                diffuseColor 0 0 1
           }# end of Material
       }#end of Appearance

      geometry Box
       {
          size 2 2 2
        }#end of Box

    }#end of Shape
     

    Names of objects begins with big letters and if object has name connected from 2 or more words they are connected as example "NavigationInfo". Fields begin with a lowercase letter, but if a field name is made of two or more words, each new word is capitalized (i.e., fieldOfView).

    Previous example will display blue cube(material attribute assign color RGB 0 0 1, that is blue) and size 2x2x2, where diffuseColor is color attribute. This attributes are called Fields. Each knot can have many fields. Each knot has at the beginning and at the end couple of characters meaning start and end. They are "{" a "}". As you can see after each end bracket ( } ) is comment. This comments helps to make source more readable, mainly in case of long source codes.

    You will also note that the braces appear on different lines in the example. This causes the file storage size to increase. When you create a large world and place it on the World Wide Web, you may want to cut the whitespaces out of the file in order to allow for faster download times.

    Character # means comments as in C language /* */. Comments can be just in the same line.

    Standard units for VRML are: length in meters, angles in radians, time in seconds. Colors are specified in RGB models and values are from interval from 0.0 till 1.0.

    3 values for diffuseColor, in Material node represents red, green and blue. For red box set values to 1 0 0, for dark green 0. 0.2 0.

    Geometric object, as example box has possibility to set various parameters. In case of box it is size of all edges. In case of missing values viewer use default values for that object.

     
    Example2.wrl

    #VRML V2.0 utf8 example2.wrl

    Shape
     {
       appearance Appearance
        {
          material Material
           {
             diffuseColor 0 0 1
            }# end of Material
        }#end of Appearance
      geometry Box
      {
        size 2 2 0
      }#end of Box
    }#end of Shape
     

    In previous example we display object Box with zero z-coordinate and red colour. SO we get red square. Lets change the color or size of object by yourself. Valid values of diffuseColor are between 0 and 1. Size value must be 0 or more.

    4. Standard geometric shapes

     Basic geometric objects in VRML are:

  • Box
  • Cone
  • Cylinder
  • Sphere
    Each object must have only one geometric object. In addition, each of the above geometries may exist only in a Shape node. Note: In each table the geometry node contains the default values for each shape's fields.

     First geometric object is Box. Box has only one item, size. Default value for size is 2 2 2. It means cube with edge equal 2. If is not defined Transform, Box is placed in (0,0,0)with edges from -1 to 1 for each dimension.

    Next geometric object is Cone . Parameters for cone are: bottom,bottomRadius, height, and side. Bottom and side has values type Boolean (TRUE or FALSE). If value is TRUE that part of Cone exists. If is FALSE, than not exists and is not displayed. BottomRadius is size of radius on the bottom of Cone. This value must contains value 0 or more. Value height identify size of Cone from bottom to top. If Transform is not defined, than object is vertical from -1 to +1.

     

    #VRML V2.0 utf8  Example for Cone
      Shape
        { 
           appearance Appearance
            {
               material Material
               {
                  diffuseColor 1 0 1
               }# end of Material
            }#end of Appearance
           geometry Cone
            {
               bottom         TRUE
               bottomRadius   1
               height         2
               side           TRUE
             }#end of Cone
        }#end of Shape
    Object Cylinder has 5 items: bottom, height, radius, side, and top. Bottom, side and top are type Boolean. If is TRUE than exists if FALSE than no exists. Value height defines total length from top to bottom and radius is length from center of Cylinder to edge. Value must be 0 or more. Default value is from -1 to +1 for each dimenzion and center is on Y-coordinate.
     

    #VRML V2.0 utf8  Cylinder.wrl
      Shape
       {
           appearance Appearance
            {
               material Material
               {
                   diffuseColor 0 1 1
               }# end of Material
            }#end of Appearance
          geometry Cylinder
           {
              bottom   TRUE
              height   2
              radius   1
              side     TRUE
              top      TRUE
           }#end of Cylinder
      }#end of Shape
    Last object is Sphere. Object has only one parameter, radius. Radius is length from center to edge. Value must be 0 or more. Default value is (0,0,0) and object is in center of coordinate system.
     

      geometry Sphere
       {
           radius    1
        }#end of Sphere
5. Transform object understanding.

     Object Transform is  type grouping node, which allows to define coordinate system,which is different as default VRML coordinate system, for all children objects. This will allow you to place groups of children in different locations within the world. In the next table, you will see how the code for a Transform node works.

     
      Transform
       {
           center            0 0 0
           translation      0 0 0
           rotation          0 0 1  0
           scale             1 1 1
           scaleOrientation  0 0 1  0
           translation       0 0 0
           bboxCenter        0 0 0
           bboxSize        -1 -1 -1
           children          []
        }
    First attribute is center. Defines Transform for coordinate system. Default value is (0,0,0). it means, that if we place object in space with this parameter, we gives his relative position in space in compare with original. If for example we define value (2,2,2) for original coordinate system, then each object will be relatively placed in (2,2,2).

    Second attribute is translation. Translation defines point in space, in coordinate system, where should be positioned object. For example defines,that we wants to have object  moved in all axis about 1 so lets define translation  (1,1,1).

    Next is rotation, which defines value of rotation in coordinate system about vektor. Default value defines, that coordinate system willrotate about z-axis, (0,0,1), 0 radians.

    The scale and scaleOrientation fields specify an amount and a rotation of the scale of the transform. The scale value specifies a nonuniform scale. A scale value specifies the size of the units in a coordinate system. This means that if the values in scale are 2 2 2, then the object(s) in the transform would be effectively doubled in size in each direction (X, Y, and Z). If the values are .5 .5 .5, then the object(s) are decreased by half. You can scale by differing amounts in each direction if you desire. You must use a value greater than 0.0 in the scale field. The scaleOrientation field allows you to specify a rotation value about a vector for the scale field. This field only applies to the scaling of the coordinate system. The next example simply adds the scale and scaleOrientation field to the blue line in the previous example. The example uses a scale value of 3 3 3 and the default scaleOrientation value. This makes the cylinder of height = 6 equal to a cylinder (with a default scale of 1) with height = 18. The radius = .1 becomes similar to radius = .3 and so on. So you see, the scale field is a unit multiplier that allows you to change the unit size in the coordinate system.

    The children field allows you to define more than one object per Transform node. You can have several Shape nodes
within a Transform node by using a children field. The only requirement is that each "child" use the same values as specified in the Transform node. In the next example, the first two transform nodes (in the previous examples) have been combined to form one Transform node. Both "child" nodes will use same value as specified in the center field. There will be no change in the actual appearance of the output, but this allows us to streamline the code saving both file space and rendering time.

    The bboxSize and bboxCenter fields are used to optimize rendering of Transform nodes. Bbox is short for bounding box. A bounding box is used to enclose a Transform node's objects so the browser only renders the area that is specified. If the bounding box size is too small to accomodate the world's object, then the results are undefined. The default values of -1 -1 -1 indicate that no values have been specified and the browser must compute the values. A field value of 0 0 0, indicates only a point in space. Values for this field must be greater than or equal to 0.0. The center of a bounding box is specified by bboxCenter and specifies an offset from the local coordinate system.

    6. Appearance Node

     Object Appearance defines visual characteristics of geometric data inside of group. Object has 3 attributes : material, texture, and textureTransform.

     
      Appearance
       {
          material NULL
          texture NULL
          textureTransform NULL
       }
    First attribute is material. Material must contains objekt Material. Defines attributes for surface of geometric objects. That depends on light ray reflection, when color is created.
     
     Material
      {
          ambientIntensity 0.2
          diffuseColor     0.8 0.8 0.8
          emmissiveColor   0 0 0
          shininess        0.2
          specularColor    0 0 0
          transparency     0
       }
  • ambientIntensity defines how much light is reflecting from surface of object
  • diffuseColor defines reflection of all light sources depends on angle on surface. This attribute defines the color of surface.
  • emmissiveColor for heat objects
  • shininess is size of shininess of light. Example light creates light area.
  • specularColor together with shininess defines size of polish on the surface of object
  • transparency defines transparency of object
    Next attribute in object Appearance istexture. Should contains one of three objects :
ImageTexture, MovieTexture or PixelTexture. Most important is ImageTexture.

     ImageTexture allows to place image on selected object. Images can be in formats : JPG, GIF a PNG.

     
       ImageTexture
        {
           url     [] 
           repeatS TRUE
           repeatT TRUE
        }
    url allows to place selected image on specified object.Example: url "obrazok.jpg". Quotation must enclose the file name.
    repeatS and repeatT tells viewer how to display on the image. S represents lower point of texture and T represents left point on texture. Value TRUE indicates repeating of image in horizontal (S) or vertical {T} direction. Last object Appearance is TextureTransform. Defines how to use coordinate system for image.

7. Lets create simple example

    In first line will be specification of VRML :

     
    #VRML V2.0 utf8
     And add some comments.
     

     #VRML V2.0 utf8    #objekt1.wrl

     Transform
      {#Floor
         children Shape
         {
             geometry Box
              {
                    size 10 1 20
               }#end of geometry Box
             appearance Appearance
              {
                    material Material
                     {
                           diffuseColor 1 1 1 #biela farba
                      }#end of material
               }#end of appearance
          }#end of children Shape
      }#end of Transform

     Transform
       {#Back Wall
         translation 0 3 -9.9
         children Shape
          {
              geometry Box
               {
                   size 10 5 .2
                }#end of geometry Box
              appearance Appearance
               {
                    material Material
                     {
                         diffuseColor 1 0 0
                      }#end of material
                }#end of appearance
            }#end of children Shape
      }#end of Transform
     

     First object is Box with size 10 1 20. Center of object is in 0 0 0. For x-coordinate it is from -5 to 5 and for z -10 to 10 and top in interval -2.5 to 2.5 for y-coordinate. Color of object is white.
     
     Transform
      {#Left Wall
           translation -4.9 3 0
           children Shape
             {
                geometry Box
                  {
                      size .2 5 19.6
                   }#end of geometry Box
                 appearance Appearance
             {
                 material Material
                   {
                      diffuseColor 1 0 0
                    }#end of material
               }#end of appearance
            }#end of children Shape
       }#end of Transform
    8. The Indexed Face/Line Sets.

8.1 The Indexed Face Set Node

     Using object IndexedFaceSet allows you to create geometries by constructing polygons from points specified in the coord field. The coord field must contain a Coordinate node which will contain the list of vertices for the object. The coordIndex field will contain the indices for the lines and allows you to specify which points to connect with a line. A group of lines that forms a polygon is called a face. The next table shows all of the fields available to the IndexedFaceSet node. Not all of the available fields will be addressed in this tutorial.
 

   IndexedFaceSet
     {
         color              NULL
         coord               NULL
       *normal              NULL
       *texCoord            NULL
       *ccw                 TRUE
         colorIndex          []
         colorPerVertex      TRUE
       *convex              TRUE
         coordIndex          []
       *creaseAngle         0
       *normalIndex         []
       *normalPerVertex     TRUE
         solid               TRUE
       *texCoordIndex       []
     }

  * - not discussed in this tutorial.
 

    The NULL values assigned to some of the fields, may be replaced with nodes of the same type (i.e., color Color, coord
Coordinate). If the color field is NULL, then you may use the appearance field in the parent node to specify the color of the
object. Otherwise, the object will be the default white color. The coord field must contain the Coordinate node which uses the
point field to specify the points for the object's vertices.

     To specify the order in which to connect the points, the coordIndex field is used. To specify a face to be rendered,
simply enter the points in the proper order and enter a -1 to end the face (-1 optional on last face in the field). The
colorPerVertex field value of FALSE, will place the colors on the faces of the object. The first example will draw a pyramid
and assign different colors to each face. The next link displays the code required for this object and the output for the file. Pay
close attention to the inline comments for the object.

    If you want to place the colors on the vertices, then you would assign a TRUE to the colorPerVertex. You can leave the
colorIndex field empty and let the browser assign the colors by index, which means, the order of colors in the color field will
be mapped to the vertices of the same index (point 0 - color 0,point 1 - color 1, etc). You may also assign colors to the
vertices in a different order by using the colorIndex field. Instead of specifying the vertices by number, you specify the faces
that combine to form the vertex. The next link will show the code for a pyramid with colors per vertex. Note: if using
WorldView browser, make sure the full color option is on. Right click the world, choose graphics, then select full color.

    If you create an object that is not totally enclosed, by changing the solid field value to FALSE, the browser will render
both sides of a face (using the same color on both sides). If the value is the default TRUE, then the browser will not render the
color on both sides of each face. The TRUE value indicates that the object will be totally enclosed therefore there would be no
reason to waste resources drawing something that will not be seen. The next link shows both of these examples.

8.2 The Indexed Line Set Node

     The IndexedLineSet is similar to the IndexedFaceSet node, but instead of drawing faces between a set of points,
simply connects points with lines. All of the fields in the IndexedLineSet are contained in the IndexedFaceSet and have been
discussed above. The next table shows the field available to the IndexedLineSet.
 

  IndexedLineSet
  {
      color               NULL
      coord               NULL
      colorIndex          []
      colorPerVertex      TRUE
      coordIndex          []
   }

9. The Billboard Node.

    The Billboard node is a type of grouping node that dynamically modifies it's coordinate system in order to point the Z
axis at the viewer. The Billboard node may be used as a standalone node or as a parent or child node. The following table
displays the fields available to this unique node.
 
 

 Billboard
   {
       axisOfRotation  0 1 0
       children        []
       bboxCenter      0 0 0
       bboxSize      -1 -1 -1
    }

    The first field we will discuss will be the axisOfRotation field. The axisOfRotation uses a default value of 0 1 0 which
specifies the Y axis. This means that the geometry will rotate around the Y axis to keep the Z axis facing the viewer at all times.
However, if the viewer flies directly over the object, the results are undefined and the viewer will not be able to see the object.
By using a value of 1 0 0, the viewer will be able to view the object from above, but results are undefined when viewing
perpendicular to the X axis. For the special case for keeping text and other object perpendicular to the screen, use 0 0 0 in this
field. The next example demonstrates the Billboard node .
    The bboxCenter and bboxSize fields specify a bounding box that encloses the Billboard's children. This is a hint that may be
used for optimization purposes. If the specified bounding box is smaller than the actual bounding box of the children at any time,
then the results are undefined. A default bboxSize value, (-1 -1 -1), implies that the bounding box is not specified and if needed
must be calculated by the browser. See "Concepts - Bounding Boxes" for a description of bboxCenter and bboxSize fields.
 
 

#VRML V2.0 utf8  #billbrd1.wrl

  Billboard
   {
       axisOfRotation 0 1 0
       #default value
       children Shape
        {
           appearance Appearance
            {
               texture ImageTexture 
                  {
                      url "tree.jpg"  # obrzok stromu
                   }#end of ImageTexture
               }#end of Appearance
            geometry IndexedFaceSet
              {
                  coord Coordinate
                    {
                        point 
                          [
                             0 0 0,  #point 0
                             1 0 0,  #point 1 
                             1 1 0,  #point 2
                             0 1 0   #point 3
                           ]#end of point
                      }#end of Coordinate
                  coordIndex [ 0 1 2 3 ] #creates a square
               }#end of geometry
         }#end of Shape
   }#end of Billboard
 

    10. Inserting text

    Object Text is used to display text as 2D object placed in XY coordinate system. Single Text node may contain several text strings but will all have the same display attributes. The table below displays the fields associated with the Text node and their default values.
 

 Text
  {
      string     [ ]
      fontStyle  NULL
      length     [ ]
      maxExtent  0.0
   }

    Attribute string contains sequence of characters in quotation (""). In case, that we have more strings, when whey must be divided by comma. Example : strings: string ["today", "tommorrow"]. The next two examples demonstrate basic Text nodes.
 

#VRML V2.0 utf8  #text1.wrl
  Billboard
   {
       axisOfRotation 0 0 0 #special case
       children Shape
        {
           geometry Text
            {
               string [ "This is a", "test."]
             }#end of Text
         }#end of Shape
    }#end of Billboard

 
#VRML V2.0 utf8  #text2.wrl
 Billboard
  {
      axisOfRotation 0 0 0 #special case
      children Shape
       {
         geometry Text
          {
             string [ "This is a", "test."]
           }#end of Text
        }#end of Shape
   }#end of Billboard

  Transform
   {
        translation 5 5 -10
        children Billboard
         {
            axisOfRotation 0 1 0  #default value
            children Shape
             {
                geometry Text
                 {
                    string "This is a test."
                  }#end of Text
             appearance Appearance
              {
                  material Material
                  {
                     diffuseColor 1 0 0 #red
                   }#end of Material
               }#end of Appearance
         }#end of Shape
       }#end of Billboard
  }#end of Transform
 

    The world above displays text in both red and white. The red string uses an axisOfRotation value of 0 1 0. This means
that when you rotate the world vertically (about the X axis), the text will not stay forward facing.

     The maxExtent and length fields are used to specify limits for the area in which the text will be specified. The
maxExtent field holds a value, in local coordinate terms, for the maximum area of the text to be displayed. An example, if the
maxExtent field holds the value 2.0 and the string reaches farther than 2 units horizontally (for horizontal text) or vertically (for
vertical text), then the text will be scaled to fit into the area. Note: horizontal and vertical text will be discussed in the FontStyle
node section of this lesson. The default value of 0.0, indicates that the string may be any length.

     The length field specifies the length, in local coordinate terms, for the string to be displayed in. If the length is 2 and the
string is too short, then it will be stretched to fit. Likewise, if the string is too long, then it will be compressed to fit. Like the
maxExtent field, a 0 in this field indicates that the string may of any length.

     The fontStyle field may be NULL or contain a FontStyle node. The FontStyle node specifies the font size, font style,
justification, and many other attributes necessary for rendering text styles. The table below shows the fields available to the
FontStyle node and the default values.
 

 FontStyle
  {
      family      "SERIF"
      horizontal   TRUE
    *justify     "BEGIN"
    *language    ""
      leftToRight  TRUE
      size         1.0
      spacing      1.0
    *style       "PLAIN"
      topToBottom  TRUE
   }

 * not covered in tutorial
 

    The family field may contain one of three family names; "SERIF", "SANS", and "TYPEWRITER". These names are
required to be supported by VRML browsers. Serif specifies a serif font like Times Roman, Sans idicates a sans serif font like
Helvetica, and Typewriter specifies a fixed-pitch font such as Courier. There may be other font families available to certain
browsers, but these will not be discussed in this tutorial. A family value of empty quotes, "", specifies the default "SERIF".

     The horizontal field value of TRUE indicates a horizontal, left-to-right (positive X direction) display of characters. A
value of FALSE causes each character to advance from top to bottom (negative Y direction).

     The size and spacing fields specify the size and the spacing of the characters. You may wish to experiment with different
values for any text in your world.

     The topToBottom and leftToRight fields specify the direction the words will be displayed. This is useful when using
multiple strings in a world.

     It should be noted that the FontStyle node is not a commonly used node due to the resources required to display text.
There are many options available for your text, though they will be rarely used.

Copyright (c) 1999-2017 Juraj Štugel. www.netgraphics.sk