PROTOs for Dummies I: Intro to Prototypes
Extending VRML
 More of this Feature
• Part 2: Creating Modular Prototypes
• Part 3: Adding Interaction
• Part 4: Speak to Me
 
 Join The Discussion
"Have certain sites increased revenue because of 3D features?"
AHEDSTROM
 
 Related Resources
• VRML Repository
• VRML PROTO Repository
 

Dateline: 3/23/98
 
This is the first of a multi-part series on VRML Prototypes, most often called PROTOs.

One of the best aspects of VRML is that the language is extensible. PROTOs let you create new basic building blocks of VRML worlds. Using PROTOs you can define a VRML talking face and then create specific instances of faces, for example Bill and Monica. The PROTO can encapsulate the geometry and behavior of objects in a world.

The actual keyword used to define a prototype is PROTO (hence the terminology). A PROTO consists of two sections, the interface section and the definition section. Let's build up the definition of a new node, a PROTO, called EyeBall. We will in subsequent feature articles work our way up to poking the eyeball, clearly a noble VRML goal :-)

PROTO EyeBall [ this_is_the_interface_section]
{
this_is_the_definition_section
}

In the interface section you define fields and events for your new node. You pass data into the the node via a field  and you control some functionality via the event interface. Let's create an eyeball which consists of two parts, the white_of_the_eye, and the pupil.

Let's first ignore any PROTO issues and define the geometry of the eye. We will create the eye by defining two spheres, where the pupil is a squashed smaller sphere in the front of the white_of_the_eye. The geometry for this can be expressed as:

Transform {
    children [
        Shape {
            geometry Sphere { }
        }
        Transform { #the pupil
            translation 0 0 1
            scale 1 1 0.1
            children [
                Shape {
                    geometry Sphere { radius 0.2 }
                }
            ]
        }
    ]
}
The VRML image generated from the above geometry is structurally what we want, a big white sphere with a smaller "pupil" but it looks lousy because there is no material and lighting properties defined. This is easily fixed by adding an Appearance node and defining diffuseColor of a light gray color as follows:
 
 

appearance Appearance {
    material Material {
        diffuseColor 0.8 0.8 0.8
    }
}

Place the Appearance node in the transformation defined above inside the Shape node that contains the sphere geometry. The resulting eye is much more pleasing.
 

Now back to the PROTO discussion. All we have to do is take the geometry defined above and place it in the definition section of our new PROTO. Replace the radius of the sphere with a field defined in the interface section of the PROTO and we have an eyeball with a variable pupil size.

The PROTO begins with:

PROTO EyeBall [ field SFFloat pupilRadius 0.2]
which we can disect as follows:

PROTO:        Keyword for the start of a prototype
EyeBall:            the name of new Node
field:        keyword indicating the start of a data type
SFFloat:            keyword indicating the data type
pupilRadius:  the name of the field
0.2:                    the default value of the field

We can't quite simply cut and paste the geometry defined above into the definition section of our EyeBall PROTO because we want to control the pupil size. We have to change the syntax of the part of the geometry that interacts with the field, the pupilRadius. This is straightforward. In the original definition we have:
geometry Sphere { radius 0.2 }

when we move the geometry into the PROTO definition section it looks like:
gemetry Sphere { radius IS pupilRadius }

This says that the radius field of the Sphere node IS now equivalent to the pupilRadius field of our new EyeBall node. The keyword IS glues together built in fields with new field definitions.

#VRML V2.0 utf8
#PROTO Definition begins
PROTO EyeBall [ field SFFloat pupilRadius 0.2 ]
{
Transform {
    children [
        Shape {
            appearance Appearance {
                material Material { # color of the whites part
                    diffuseColor 0.8 0.8 0.8 #light gray
                }
            }
        geometry Sphere { }
        }
        Transform { #the pupil
            translation 0 0 1 #move the pupil sphere forward
            scale 1 1 0.1     #squash the pupil sphere to flatten it out
            children [
                Shape {
                    appearance Appearance {
                        material Material {
                            diffuseColor 0.2 0.2 0.2 #color of the pupil
                    }
                }
                geometry Sphere { radius IS pupilRadius }
                }
            ]
        }
    ]
}

} #PROTO Definition ends

The above VRML code is the complete definition of our new EyeBall node. Simply place it in a file, feel it to your VRML browser and voila....NOTHING HAPPENS! The reason  nothing is displayed is because we have defined a new Node but we haven't actually used it anywhere yet. Add the code:
EyeBall {} and an eye will be displayed. The file eyepr1.wrl is available for your examination.

Now all of this may seem like a lot of work for a silly little piece of geometry but now we have a general EyeBall that we can easily reuse in another PROTO Eyes. If you're interested check out the formal definitions and explanations of prototypes in the actual ISO standard. We will look at composing a pair of eyes in next weeks feature, and we will also look at the use of EXTERNPROTO a better way of creating modular libraries of prototypes for use in your worlds.

ZZZNEWSLETTERSIGNUP1ZZZ

Previous Features