Intro to VRML Let’s build something! The source code examples in this tutorial WORK!

VRML File Structure Files start with a special comment –Gives version number, and character coding in the file #VRML V2.0 utf8 WorldInfo { title “This is an example” info ["(C) Copyright 2012 someone special"] } DEF FBOX Shape { appearance Appearance { material Material { } geometry Box { }

VRML File Structure World Info –Title of file, can be rendered by VRML viewers Objects –Contents of the world #VRML V2.0 utf8 WorldInfo { title “This is an example” info ["(C) Copyright 2012 someone special"] } DEF FBOX Shape { appearance Appearance { material Material { } geometry Box { }

Objects Shape { appearance Appearance { material Material { } geometry Box { } Shape node Shape node: A data structure containing two fields for describing an object. Causes a shape to be rendered. appearance field geometry field

Giving Objects Names DEF FBOX Shape { appearance Appearance { material Material { } geometry Box { } The shape object now has a name, FBOX. VRML is case sensitive.

Transformations Translation –Moving an object to a new (x, y, z) coordinate –In VRML, center of object is moved by adding x, y, z changes Rotation –Rotate object along one or more of the (x, y, z) coordinates by an amount of radians (an angle) Scaling –Alter size of an object in one of three possible ways: along the x-coordinate, the y-coordinate, and/or z-coordinate –In VRML, scaling is applied by giving three scale factors: (Sx, Sy, Sz) E.g., (2, 2, 2) will double the size of an object, where as (1, 2, 3) will leave the x-coordinate unchanged, double scale of the object along the y-coordinate dimension, and triple the size of the object along the z- coordinate dimension

Coordinate System

Transform Nodes Transform { scale rotation translation children [ USE FBOX ] } Transform node Transform node: A data structure giving rotations, translations, and scaling for an object. Operations carried out in sequence given, top to bottom. Transformations within a transform apply to the children of a node. Causes a transformed shape to be rendered. Scale by x=2, y= 0.5, z=2 Don’t change x-coord, subtract 1.5 from y, and don’t change z Rotate by.78 radians (45 degrees) along y coordinate

Example 2 #VRML V2.0 utf8 DEF FBOX Shape { appearance Appearance { material Material { } geometry Box { } Transform { scale rotation translation children [ USE FBOX ] } Transform adds a second object Places it below first one Applies the given changes to second object Transform node

Appearance nodes Can contain a material node or a texture node Material nodes can contain six fields: –diffuseColor: RGB color values, R, G, B between 0 and 1 normal color of object –specularColor: color values color of highlights on shiny objects –emissiveColor: color values object 'glows' with a light of its own of this color doesn't cast light on other objects –ambientIntensity: number between 0 and 1 amount of ambient light that object reflects –shininess: number between 0 and 1 How reflective the object is –transparency: number between 0 and 1 How transparent the object is Some VRML browsers will not support partly-transparent objects. DEF FBOX Shape { appearance Appearance { material Material { } geometry Box { }

Example Shape { appearance Appearance { material Material { emissiveColor transparency 0.5 } geometry Box { } Glowing transparent green Transparency of 1 means invisible; 0 means no transparency (default)

Texture nodes ImageTexture –Cover an object with a still image –Specified as a JPEG or PNG file MovieTexture –Texture-maps an MPEG file onto an object PixelTexture –Define your own textures via RGB or grayscale

#VRML V2.0 utf8 #brickwall.wrl # demonstrates use of textures Shape { appearance DEF theTexture Appearance { texture ImageTexture { url ["brick.jpg"] } # end texture } # end appearance geometry Box { size } # end geometry } # end shape

More on Geometry Nodes Box –Specified with X, Y, Z sizes Cylinder –Radius, height, and flags controlling rendering of ends, and side Sphere –Specified with radius Cone –Bottom radius, and height, and flags controlling rendering of bottom & side Text geometry Box { size } geometry Cylinder { radius 0.5 height 10 top FALSE } geometry Cone { bottomRadius 5 height 10 bottom FALSE } geometry Sphere { radius 10,000,000 }

Flags for cylinder There are also three other fields, side, top, and bottom. These are Boolean values (TRUE or FALSE), and tell the browser whether to display the appropriate section of the cylinder. These default to TRUE, so you don't need to put them in at all most of the time. However, if you had a cylinder where an end was obscured by another object, it would be worth turning off that end, as it will reduce the amount of work for the browser, speeding up the execution of your world.

Prototypes: More on Code Reuse So far, our statements have always resulted in rendered images in the VRML viewer It is useful to specify graphical procedures that just declare shapes, and don’t render them Parameters to these graphical procedures are also useful One way to create procedures in VRML is through the PROTO (prototype) statement

PROTO Syntax PROTO [ ## syntax: ## field ] { }

PROTO Parameter Types SFBool –This is a single boolean value, which can take the value "TRUE" or "FALSE". SFColor & MFColor –SFColor is a field containing a single color, made up of three floating-point numbers between 0 and 1 corresponding to the red, green and blue values of that color, e.g is green. MFColor is a field containing multiple colors, e.g. [0 1 0, 1 0 0, 0 0 1]. SFFloat & MFFloat –SFFloat is a single floating-point value, e.g And MFFloat is a number of floating- point values, e.g. [1.0, 3.4, 76.54]. SFImage –SFImage is a two-dimensional image, either in colour or grey. It consists of: Two integers, representing the width and height of the image. One integer representing the number of components in the image. 1 is grey levels only, 2 is grays with transparency, 3 is RGB color, and 4 is RGB with transparency. –After these, there are width * height hexadecimal numbers, consisting of 2 digits for each component. So, 0xFF would be white in a 1-component image, and 0xFF00007F would be half-transparent red in a 4-component image. –Pixels are specified from left to right, bottom to top. SFInt32 & MFInt32 –A single or list of 32-bit integer numbers. These can be in decimal or hexadecimal format. Hexadecimal numbers start with 0x, e.g. 0xFF is 255 in decimal.

PROTO Parameter Types SFNode & MFNode –SFNode is a single node, and MFNode is a list of nodes. Note that the children field in many nodes is of type MFNode. SFRotation & MFRotation –These fields specify a rotation about an axis. It is made up of four floating-point numbers. The first three specify X Y and Z coordinates for the vector corresponding to the axis about which to rotate, and the fourth is the number of radians to rotate by. SFString & MFString –This type contains a list of characters in the utf-8 character set. ASCII is a subset of utf-8, so you needn't worry about different character sets or anything. A string (SFString) is specified as "Hello", in double quotes. A list (MFString) looks like this: ["Hello", "World"]. SFTime & MFTime –A single or list of times. Times are specified as floating-point numbers representing the number of seconds elapsed since midnight on the 1st January This make more sense when we cover events later on. SFVec2f & MFVec2f –A single or list of 2D vectors. A 2D vector is a pair of floating-point numbers. SFVec3f & MFVec3f –A single or list of 3D vectors. A 3D vector is a triple of floating-point numbers.

Example Prototype: For Defining Graph Axes PROTO graphAxis [ field SFVec3f dimensions ] { Shape { appearance Appearance { material Material { } geometry Box { size IS dimensions } Defines a graphical procedure (prototype) called graphAxis Procedure has a formal parameter called dimensions, which is a vector of 3 floats Parameter used with “IS” syntax

Problem Define a prototype for a plot point with parameters for color and position

Solution PROTO plotPoint [ field SFVec3f position field SFColor color ] { Transform { translation IS position children [ Shape { appearance Appearance { material Material { diffuseColor IS color } geometry Sphere { radius.1 } } ] } }

Navigation Anchor { children [ USE HEAD ] description "Back to the ITU Home Page" url “ } Is supposed to work as in HTML

Practice Make a spaceship! Make a house? Something?