microgoodies

By Johnnie Rose, Jr.

VRML, 3D, and Transforming

Every visual application you'll run across has something to do with space.  Web pages are displayed on your screen.  Java happens to have an entire code library specifically defining layouts for use in creating your standard dialog box.  Those previous examples have something in common: their results are displayed in a two-dimensional space, where the only things you have to work with are height and width (granted, those "OK" buttons in a Windows dialog box were shaded to look 3D by some shifty Microsoft engineers, but they're not).  VRML is a little bit more advanced.

This is virtual reality we're talking about after all, and it's 3D.  When you have three dimensions, you get to work with three directions--height, width, and depth.  They're simply directions you've taken for granted in the everyday world, but now they have a use in a computer language.

Height is a measure of how tall something is, width is a measure of how wide something is, and depth is a measure of something's length, that is, how far it comes out at you from your screen.  VRML is centered around this 3D world, so be prepared to use these three standard measurements in defining lots of things, ranging from the height of a cylinder to the width of a bounding box.

The Transform Node

The Transform node is VRML's way of telling the browser where to put an object:
Transform {
   children           []
   translation	      0.0 0.0 0.0
   rotation	      0.0 0.0 1.0 0.0
   scale	      1.0 1.0 1.0
   scaleOrientation   0.0 0.0 1.0 0.0
   bboxCenter	      0.0 0.0 0.0
   bboxSize	     -1.0 -1.0 -1.0
   center	      0.0 0.0 0.0
   addChildren
   removeChildren
}
Now let's break it down:
  • The children field is a list of nodes.  You'll usually see this filled with Shape nodes that build complex shapes.  If you want to have two or more nodes in this field, separate their nodes with commas.
  • Use the translation field to tell the browser where the entire system should go.  Here is the first application of that three dimensional system from before.  The first number defines a value along the X, or horizontal, axis, the second number defines a value along the Y, or vertical, axis, and the third number defines a value along the Z, or depth-based, axis.
  • The rotation, scale, and scaleOrientation fields deal with manipulating the Transform node's children themselves.  As you could probably figure out, you would use these the first to rotate by a number of degrees, and the last two to scale (or resize) the children.
  • bboxCenter, bboxSize, and center are used to tell the browser the size of the bounding box, which will be covered in a later tutorial.
  • addChildren and removeChildren, believe it or not, are actually commands that take nodes and do the respective action.  For example, if you were to send a node to the addChildren field, that node would be added as a child of the Transform node.
Since we are talking about changing the location of the Transform node, the only things we're concerned with are the children and translation fields.  To understand how these work, however, you need to understand how the node itself works.

Whenever you put this node into use in your code, a new coordinate system is created.  Coordinate system is just the coder's way of saying that a miniature world is created inside of the larger world.  This miniature world contains nodes...that's right, the ones that were put into the children field.

If you use the translation field, you're moving this coordinate system to another location, as defined when you put in those coordinates.  By default, the Transform node's contents are dumped right into the center of the parent world.

Enough documentation...let's go see what this thing can do.

Movin' Stuff

Alright, let's have some fun transforming some stuff.  By the way, the fields we aren't going to use don't need to be in the file.  First, let's translate a red cone two units upwards:


#VRML V2.0 utf8

Transform {
   children [	# A simple cone
      Shape {
         appearance Appearance {
            material Material {
               diffuseColor 1.0 0.0 0.0	  # Red
            }
         }
         geometry Cone {
            bottomRadius 2.0
      }
      }
   ]

   # Translate it two units upwards by changing the Y value:
   translation  0.0 2.0 0.0
}

# Now let's put something under it
Shape {
   appearance Appearance {
      material Material {}
   }
   geometry Sphere {
      radius 2.0
   }
}

The resulting world has just what was expected: a red cone raised above your head.  One quick thing to notice from the code is that the Sphere does not have its own Transform node.  Since it has none, it is automatically dumped into the center of the parent world.  You can also translate along the other two axes:

#VRML V2.0 utf8

Transform {
   children [	# That same simple cone
      Shape {
         appearance Appearance {
            material Material {
               diffuseColor 1.0 0.0 0.0	  # Red
            }
         }
         geometry Cone {
            bottomRadius 2.0
	 }
      }
   ]

   # Let's go right two units, up three, and backwards one:
   translation  2.0 3.0 -1.0
}

# Now let's put something under it
Shape {
   appearance Appearance {
      material Material {}
   }
   geometry Sphere {
      radius 2.0
   }
}

And, as expected, here's the resulting world.  Feel free to experiment with the Transform node.  Although it may seem amazingly simple, it's actually a whole lot of fun to use.

back to the basics page

johnnie2 AT hal-pc DOT org

This site and all contents herein are Copyright 1998-2006 Johnnie Rose, Jr. and may not be copied or reposted without written permission from the founder.
View the Microgoodies Privacy Policy. Fight Spam!