CS3SE3 VRML2 Tutorial Page 29 of 29
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.
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.
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.:
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.