Download VRML Tutorial

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
#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 {
}
}
Shape node
Objects
appearance field
Shape {
appearance Appearance {
material Material {
}
}
geometry Box {
}
}
geometry field
Shape node: A data structure containing two
fields for describing an object. Causes a shape
to be rendered.
Giving Objects Names
• The shape
object now has a
name, FBOX.
DEF FBOX Shape {
appearance Appearance {
material Material {
}
}
geometry Box {
}
}
• 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 zcoordinate dimension
Coordinate System
Transform Nodes
Transform
node
Scale by x=2, y= 0.5, z=2
Transform {
scale 2 0.5 2
rotation 0 1 0 0.78
translation 0 -1.5 0
children [
USE FBOX
]
}
Rotate by .78 radians
(45 degrees) along y
coordinate
Don’t change x-coord,
subtract 1.5 from y, and
don’t change z
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.
Example 2
• Transform adds a
second object
• Places it below
first one
• Applies the given
changes to second
object
Transform
node
#VRML V2.0 utf8
DEF FBOX Shape {
appearance Appearance {
material Material {
}
}
geometry Box {
}
}
Transform {
scale 2 0.5 2
rotation 0 1 0 0.78
translation 0 -1.5 0
children [
USE FBOX
]
}
Appearance nodes
DEF FBOX Shape {
appearance Appearance {
material Material {
}
}
geometry Box {
}
}
• 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.
Example
Shape {
appearance Appearance {
material Material {
emissiveColor 0 0.8 0
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 1 2 3
} # 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 5.5 3.75 1.0
}
geometry Cylinder {
radius 0.5
height 10
top FALSE
}
geometry Sphere {
radius 10,000,000
}
geometry Cone {
bottomRadius 5
height 10
bottom FALSE
}
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 <PrototypeName> [
<Parameter Descriptions>
## syntax:
## field <parameter-type> <param-name> <defaults>
]
{
<Graphical Description>
}
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. 0
1 0 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. 7.5. And MFFloat is a number of floatingpoint 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
–
•
SFRotation & MFRotation
–
•
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 1970. This make more sense when we cover events
later on.
SFVec2f & MFVec2f
–
•
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
–
•
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
–
•
SFNode is a single node, and MFNode is a list of nodes. Note that the children field in many nodes is of
type MFNode.
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 0 0 0
]
{
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
PROTO plotPoint [
field SFVec3f position 0 0 0
field SFColor color 1 1 1
]
{
Transform {
translation IS position
children [
Shape {
appearance Appearance {
material Material {
diffuseColor IS color
}
}
geometry Sphere {
radius .1
} } ]
} }
Solution
Navigation
Is supposed to work as in HTML
Anchor {
children [
USE HEAD
]
description "Back to the ITU Home Page"
url “http://www.itu.edu"
}
Practice
• Make a spaceship!
• Make a house? Something?