4.7 realism and rendering efficiency they may be any ...sredfern/ct336/04c.pdf · • vrml lights...

23
4.7 Realism and Rendering Efficiency Techniques 1. Lighting 2. Materials 3. Texture Mapping 4. Backgrounds 5. Billboards 6. Fog Lighting Three different types of lights are available: Point lights - rays emanate in all directions from a 3D point source Directional lights - rays emanate in one direction only from infinitely far away (like the sun) Spot lights - project a cone of light from a 3D point source, targeted in a specified direction. VRML lights also contribute to the overall ambient lighting by a specified amount. They may be any colour - though bear in mind the effect this will have on a coloured surface (e.g. red light shining on a blue surface..?) Attenuation defines how quickly a light's intensity fades, as you move away from the light source Shadows are not modelled by current VRML plug- ins, since this would be too computationally expensive. You can add you own fake shadows, for example using semi-transparent black indexed face sets Because shading is typically only calculated at the vertices or normals of a shape, and then interpolated across the surfaces, spotlights and point lights may not produce the expected effect. A work-around is to build each face out of multiple smaller facets (computationally expensive). PointLight { on # TRUE or FALSE location # 3D co-ordinate radius # radius of illumination sphere intensity # from 0.0 to 1.0 ambientIntensity # from 0.0 to 1.0 color # RGB value attenuation # 3 values } The three attenuation parameters define:

Upload: others

Post on 16-Oct-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

4.7 Realism and Rendering Efficiency Techniques 1. Lighting 2. Materials 3. Texture Mapping 4. Backgrounds 5. Billboards 6. Fog Lighting Three different types of lights are available: • Point lights - rays emanate in all directions from a

3D point source • Directional lights - rays emanate in one direction

only from infinitely far away (like the sun) • Spot lights - project a cone of light from a 3D point

source, targeted in a specified direction. • VRML lights also contribute to the overall ambient

lighting by a specified amount.

• They may be any colour - though bear in mind the effect this will have on a coloured surface (e.g. red light shining on a blue surface..?)

• Attenuation defines how quickly a light's intensity fades, as you move away from the light source

• Shadows are not modelled by current VRML plug-ins, since this would be too computationally expensive. You can add you own fake shadows, for example using semi-transparent black indexed face sets

• Because shading is typically only calculated at the vertices or normals of a shape, and then interpolated across the surfaces, spotlights and point lights may not produce the expected effect. A work-around is to build each face out of multiple smaller facets (computationally expensive).

PointLight { on # TRUE or FALSE location # 3D co-ordinate radius # radius of illumination sphere intensity # from 0.0 to 1.0 ambientIntensity # from 0.0 to 1.0 color # RGB value attenuation # 3 values } The three attenuation parameters define:

Page 2: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

1. whether light has a constant brightness within the sphere of illumination

2. controls how the light brightness drops off with distance from the light

3. controls how the light brightness drops off with the square of the distance from the light

DirectionalLight { on # TRUE or FALSE intensity # from 0.0 to 1.0 ambientIntensity # from 0.0 to 1.0 color # RGB value direction # 3D point } • direction - light travels in the direction from the

origin to the 3D point supplied SpotLight { on # TRUE or FALSE location # 3D co-ordinate

direction # 3D point radius # radius of illumination sphere intensity # from 0.0 to 1.0 ambientIntensity # from 0.0 to 1.0 color # RGB value attenuation # 3 values beamWidth # radians

cutOffAngle # radians } • cutOffAngle defines the spread angle of a cone of

illumination whose tip is at the spotlight's location and whose cone axis is aligned with the spotlight's aim direction.

• beamWidth defines a narrower angle within which uniform illumination is required

Materials The Material node type is used as a value for the material field of an Appearance node Material { diffuseColor # RGB values

specularColor # RGB values ambientIntensity # 0.0 to 1.0

emissiveColor # RGB values transparency # 0.0 to 1.0 shininess # 0.0 to 1.0 } • VRML uses a simplified simulation of lighting and

shiny surfaces

Page 3: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

• Shiny materials are particularly effective when used with lights

• Diffuse reflection is caused by light scattering off a surface in all directions - the result is a dull effect with no sparkles or glints

• Specular reflection is caused by light bouncing off a shiny surface in a predictable way.

• By specifying the colour of diffuse and specular reflections, the material of a surface can be simulated

• ambientIntensity determines how strongly the surface responds to ambient lighting

• emissiveColor is used to make an object glow with its own light

Increasingly shiny vases, lit by a PointLight and by the user's headlight:

• Generally, as a surface becomes shinier, its diffuseColor settings decrease while its specularColor and shininess settings increase.

Animating Colours: • The ColorInterpolator node is used to animate

colour, and the ScalarInterpolator node to animate transparency.

• When interpolating colour values between the supplied key values, the ColorInterpolator uses the HSI colour scheme, since RGB would create incorrect intermediate colours.

Fractional Time Key RGB

Colour Computed RGB

Colour Description

0.00 1.00 0.00 0.00 1.00 0.00 0.00 Bright red 0.25 0.75 0.00 0.25 Dark red-blue 0.50 0.50 0.00 0.50 Medium grey 0.75 0.25 0.00 0.75 Dark blue-red 1.00 0.00 0.00 1.00 0.00 0.00 1.00 Bright blue

• When you write VRML, always use RGB notation.

The key values you supply are automatically converted to HSI before interpolation, and back to RGB before they are applied to a material:

Fractional Time Computed HSI Output RGB Description

Page 4: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

Colour Colour 0.00 1.00 0.00 0.00 1.00 0.00 0.00 Bright red 0.25 0.92 0.00 0.00 1.00 0.00 0.50 Bright red-blue 0.50 0.83 0.00 0.00 1.00 0.00 1.00 Bright purple 0.75 0.75 0.00 0.00 0.50 0.00 1.00 Bright blue-red 1.00 0.67 0.00 0.00 0.00 0.00 1.00 Bright blue

Examples: A multicoloured space station where the

centre sphere animates from red, to green, to blue, and back to red.

#VRML V2.0 utf8 Group { children [ # Station Shapes Shape { appearance Appearance { material DEF BallColor

Material { diffuseColor 1.0 0.0 0.0 } } geometry Sphere { } }, Shape { appearance Appearance { material Material { diffuseColor 0.5 0.25 1.0 } } geometry Cylinder { radius 2.0

height 0.05 } }, Shape { appearance Appearance { material Material { diffuseColor 0.75 0.0 1.0 } } geometry Cylinder { radius 0.15 height 5.0 } }, # Animation clock DEF Clock TimeSensor { cycleInterval 4.0 loop TRUE }, # Animation path DEF ColorPath ColorInterpolator { key [ 0.0, 0.33, 0.67, 1.0 ] keyValue [ 1.0 0.0 0.0, 0.0 1.0 0.0, 0.0 0.0 1.0, 1.0 0.0 0.0, ] } ] } ROUTE Clock.fraction_changed TO

ColorPath.set_fraction ROUTE ColorPath.value_changed TO

BallColor.set_diffuseColor

Page 5: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

A simple space station with animating transparency for the central sphere.

#VRML V2.0 utf8 Group { children [ # Station Shapes Shape { appearance Appearance { material DEF BallColor

Material { diffuseColor 1.0 0.0 0.0 } } geometry Sphere { } }, Shape { appearance Appearance { material Material { diffuseColor 0.5 0.25 1.0 } } geometry Cylinder { radius 2.0 height 0.05 } }, Shape { appearance Appearance { material Material { diffuseColor 0.75 0.0 1.0 } } geometry Cylinder { radius 0.15

height 5.0 } }, # Animation clock DEF Clock TimeSensor { cycleInterval 4.0 loop TRUE }, # Animation path DEF TransparencyPath

ScalarInterpolator { key [ 0.0, 0.5, 1.0 ] keyValue [ 0.0, 1.0, 0.0 ] } ] } ROUTE Clock.fraction_changed TO

TransparencyPath.set_fraction ROUTE TransparencyPath.value_changed TO

BallColor.set_transparency Texture Mapping • Texture mapping allows you to 'paste' a bitmapped

image (.jpg, .gif, .png) or mpeg animation (.mpg) onto any VRML shape except (for obvious reasons) PointSets and IndexedLineSets

Page 6: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

• The texture field of a shape's Appearance node can be set using any of the following node types:

⇒ImageTexture - maps an image file ⇒PixelTexture - the individual pixel values are

specified in the VRML code itself ⇒MovieTexture - maps an mpeg movie file

• The orientation of a texture on a shape depends on the type of shape:

ImageTexture { url " " # URL of image file } MovieTexture { url " " # URL of mpeg file speed # speed factor (default 1.0) }

#VRML V2.0 utf8 #a softdrink can built by mapping

textures onto 3 cylinders which form its top, bottom and sides

Group { children [ # Can top Shape { appearance Appearance { material Material { } texture ImageTexture { url "cantop.jpg" } } geometry Cylinder { bottom FALSE side FALSE height 2.7 } } # Can bottom Shape { appearance Appearance { material Material { } texture ImageTexture { url "canbot.jpg" } } geometry Cylinder { top FALSE side FALSE height 2.7 } }

Page 7: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

# Can side Shape { appearance Appearance { material Material { } texture ImageTexture { url "canlabel.jpg" } } geometry Cylinder { top FALSE bottom FALSE height 2.7 } } ] } Texture Coordinates

• Texture space is normally represented by (u,v) with each in the range [0 ... 1]

u

v

0,0 1,0

0,1 1,1

0.65, 0.89

• Surface space is normally represented by (s, t) which measure repetitions of (u,v) – one unit on the s or t axis represents one complete repetition of the image (allowing tiling)

Page 8: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

s

t

-1 0 1 2

2

1

0

-1

• To map (s, t) space to (x, y, z) space in the 3D world itself, VRML uses the TextureCoordinate node. This defines, for each vertex in a shape, the texture location, size and repetition information (via (s, t) coordinates).

• In practice, this gets too complex to calculate manually: TextureCoordinates are therefore normally produced as part of the export process from special-purpose 3D modelling software (e.g. 3Dstudio, Maya)

The TextureTransform node: • A more manageable way of manually defining

texture sizes, repetitions and positions • Allows you to define (or even animate) rotation,

translation and scaling transformations on the texture coordinates

Texture Translation:

• Moves a texture up, down, left, right on its surface.

• Specified via two numbers which represent the (s, t) values – s controlling horizontal movement and t controlling vertical movement

• Movement occurs in multiples of the s, t values – e.g. a translation of 0.5 0.5 moves a texture a distance equal to half of its width both horizontally and vertically

e.g.: #VRML V2.0 utf8 #TextureTransform - Translation Example NavigationInfo { type "EXAMINE" } Viewpoint { position -1.995 1.668 4.105 orientation -0.639 -0.754 -0.153 0.617 fieldOfView 0.785

Page 9: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

} Group { children Shape { appearance Appearance { material Material { ambientIntensity 0.25 diffuseColor 0.8 0.8 0.8 } texture ImageTexture { url "mandrill.jpg" } textureTransform TextureTransform { translation 0.5 0.5 } } geometry Box { } } }

Texture Scaling:

• Scaling shrinks/grows the texture around the transformation centre.

• Controlled using the scale field, which again consists of two numbers, defining scaling on the horizontal (s) and vertical (t) axes.

• The numbers define how many times the texture is to be repeated: e.g. a scale of 2 2 shrinks the texture so that two copies are displayed in each direction

e.g: Use the same code as in the previous example, but replace the definition for the TextureTransform node with: textureTransform TextureTransform { translation 0.5 0.5 }

Page 10: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

Texture Rotation:

• The rotation fields specifies a rotation (2D of course, and therefore requiring only one number) in radians that is applied to the texture

• The rotation is around the texture’s centre: positive values indicate clockwise rotation.

e.g: Use the same code as in the previous example, but replace the definition for the TextureTransform node with: textureTransform TextureTransform {

rotation 0.785398 }

• The TextureTransform node also has a “center” field which defines (using 2 numbers) the centre of rotation and scaling

• Often, a combination of transformations is required. The transformations take place using the following precedence: scale, rotation, translation.

Comments Regarding Texture Image Sizes:

Page 11: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

• Depending on the user’s VRML plug-in, textures may be limited to 128x128 pixels maximum, or perhaps 256x256

• Nearly all 3D rendering engines (including those used by VRML plug-ins) require textures that are of a “power of 2” size: 16, 32, 64, 128, etc..

• Some also require that textures are square • The plug-in will probably adjust textures that

don’t meet its requirements, but this may lead to incorrect looking images that are unnecessarily big for downloading

Backgrounds:

• VRML provides a Background node which defines the appearance of: o a large box that encompasses the whole

world and which is always rendered at a fixed distance from the camera. Often referred to as the “skybox” or “worldbox”

o a ground hemisphere, outside the box o a sky hemisphere, also outside the box

• Used to efficiently define and render the sky, ground, and other items in the “far distance” (mountains, forests, etc.) – which can never be travelled to

Sky and Ground hemispheres:

• The colour gradients of the ground and sky hemispheres are defined via sets of colours and the angles (starting at zero at the top of the hemisphere) at which each stated colour appears.

• The colours in between the explicitly stated colours are interpolated, producing gradients

• There is always one more Color than Angle since the first angle is assumed to be zero

e.g.: #VRML V2.0 utf8 DEF BlueSky Background { groundAngle 1.5 groundColor [ 0.05 0.1 0.05, 0.05 0.1 0.05 ] skyAngle [ 1.0472, 2.09439 ] skyColor [ 0.1 0.1 0.5, 0.2 0.2 0.6, 0.6 0.6 0.7 ] }

Defining the skybox:

• The textures that are displayed on the 6 faces of the skybox are defined in the Background node using the following fields: backUrl, bottomUrl, frontUrl, leftUrl, rightUrl, topUrl

Page 12: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

• Since the skybox is closer to the camera than the sky and ground hemispheres, they can be ignored completely, or can use textures with transparency. If you define solid textures for all 6 faces, then the sky/ground hemispheres will not be seen.

e.g: #VRML V2.0 utf8 # Background Node with skybox images NavigationInfo { headlight FALSE type "WALK" } Viewpoint { position -3.06 1.6 7.45 orientation 0.10 -0.99 0.02 0.368 fieldOfView 1.5 description "entry view" } DirectionalLight { direction 0.58 -0.69 -0.41 } DEF Panorama_Bg Background { groundAngle 1.5 groundColor [ 0.05 0.1 0.05, 0.05 0.1 0.05 ] skyAngle [ 1.047, 2.094 ] skyColor [ 0.1 0.1 0.5, 0.2 0.2 0.6,

0.6 0.6 0.7 ] backUrl "bg-back.gif" leftUrl "bg-left.gif" frontUrl "bg-front.gif" rightUrl "bg-right.gif" } Group { children [ Transform { children DEF house Shape { appearance Appearance { material Material { ambientIntensity 0.25 diffuseColor 0.541 0 0 } } geometry IndexedFaceSet { coord Coordinate { point [ -1 1 1, -1 0 1, 1 1 1, 1 0 1, 1 1 -1, 1 0 -1, -1 1 -1, -1 0 -1, 0 1.722 1, 0 1.722 -1, -1 1 -1, -1 0 -1, -1 0 1, -1 1 1, 1 1 1, 1 0 1, 1 0 -1,

Page 13: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

1 1 -1, -1 0 1, 1 0 1, -1 1 1, 0 1.722 1, 1 1 1 ] } coordIndex [ 0, 1, 3, -1, 0, 3,

2, -1, 0, 2, 8, -1, 4, 5, 7, -1, 4, 7, 6, -1, 4, 6, 9, -1, 10, 11, 12, -1, 10, 12,

13, -1, 14, 15, 16, -1, 14, 16,

17, -1, 18, 11, 16, -1, 18, 16,

19, -1, 10, 20, 21, -1, 10, 21,

9, -1, 21, 22, 17, -1, 21, 17,

9, -1 ] } } scale 2.395 2.395 2.395 } Transform { children DEF base Shape { appearance Appearance { material Material { ambientIntensity 0.24 diffuseColor 0.05 0.1 0.05 } } geometry IndexedFaceSet { coord Coordinate {

point [ 0 0 -1, 0.383 0 -0.924, 0.707 0 -0.707, 0.924 0 -0.383, 1 0 4.37e-08, 0.924 0 0.383, 0.707 0 0.707, 0.383 0 0.924, 1.51e-07 0 1, -0.383 0 0.924, -0.707 0 0.707, -0.924 0 0.383, -1 0 -1.19e-08, -0.924 0 -0.383, -0.707 0 -0.707, -0.383 0 -0.924 ] } coordIndex [ 15, 1, 0, -1, 1,

15, 14, -1, 1, 14, 2, -1, 2, 14, 13,

-1, 2, 13, 3, -1, 3, 13, 12,

-1, 3, 12, 4, -1, 4, 12, 11,

-1, 4, 11, 5, -1, 5, 11, 10,

-1, 5, 10, 6, -1, 6, 10, 9, -

1, 6, 9, 7, -1, 7, 9, 8, -1

] } } scale 11 11 11 }

Page 14: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

] }

Billboards • “Billboards” are a standard trick used in realtime

3D graphics applications, producing good results while effectively managing the “polygon budget”

• A billboard is a single polygon that is automatically rotated to face the camera each time it is rendered.

• Widely used for background trimmings such as trees, clouds, etc.

• Transparency (using .gif or .png textures) is often used. The alpha transparency offered by .png is better, as it doesn’t produce the harsh edges that simple transparency does

#VRML V2.0 utf8 # PNG Transparency and the Billboard Node NavigationInfo { type "FLY" } Viewpoint { position -0.3 0 10.9 orientation 0 0 1 0 fieldOfView 1.05 } Background { skyAngle [ 1.0472, 2.09439 ]

skyColor [ 0.1 0.1 1, 0.2 0.2 0.6, 0.6 0.6 0.7 ] } Group { children [ Transform { children Billboard { children DEF Cloud Shape { appearance Appearance { texture ImageTexture { url "cloud-1.png" } } geometry IndexedFaceSet { coord Coordinate { point [ 1 -1 0, 1 1 0, -1 1 0, -1 -1 0 ] } coordIndex [ 0, 1, 2, 3, -1 ] texCoord TextureCoordinate { point [ 1 0, 1 1, 0 1, 0 0 ] } texCoordIndex [ 0, 1, 2, 3, -1 ] } } axisOfRotation 0 0 0 } } Transform {

Page 15: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

children Billboard { children USE Cloud axisOfRotation 0 0 0 } translation -3.88 2.85 1.71 } Transform { children Billboard { children USE Cloud axisOfRotation 0 0 0 } translation 3.89 3.71 2.41 } Transform { children Billboard { children USE Cloud axisOfRotation 0 0 0 } translation -5.31 -3.77 3.23 } Transform { children Billboard { children USE Cloud axisOfRotation 0 0 0 } translation 5.14 -3.46 5.16 } Transform { children Billboard { children USE Cloud axisOfRotation 0 0 0 } translation -9.62 2.75 8.22 } Transform {

children Billboard { children USE Cloud axisOfRotation 0 0 0 } translation 8.95 1.76 7.69 } ] }

Fog:

• Useful for both realism and rendering efficiency Fog { color # RGB values visibilityRange fogType } • visibilityRange defines the distance at which

objects become lost in the fog • fogType can have one of two values:

⇒"LINEAR" - fog thickness increases linearly with distance from the viewer

⇒"EXPONENTIAL" - fog thickness increases exponentially (more realistic)

Page 16: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

4.8 Extending VRML Capabilities:

• Prototype Nodes (PROTO) • Script Nodes (using JavaScript or Java)

Prototypes

• PROTO defines a customised node type, similar to a class in OO Programming

• A PROTO node is derived from an existing node type

• The internal fields are by default private to the “class” – for public fields use the keyword exposedField

• PROTO defines only the “class”: an instantiation is needed in order to use it

Field Data Types:

• The data types for fields in VRML start with either: o SF – indicating a single value o MF – indicating a multivalue field (i.e. an

array) • After this prefix, the type of data is indicated • Examples:

o a field that takes a single float is of data type SFFloat

o a field that takes an array of floats is of data type MFFloat

• If used to represent fields from the superclass, your PROTO’s fields must be of the same type as the fields in the superclass

Example: #VRML V2.0 utf8 # PROTO definition PROTO SimpleShape [ exposedField SFNode newGeometry NULL exposedField SFColor newColor 0 0 0 ] { Shape { appearance Appearance { material Material { emissiveColor

IS newColor } } geometry IS newGeometry

Page 17: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

} } # Now create 2 instantiations Transform { translation -2 0 0 children SimpleShape { newColor 1 0 0 newGeometry Box { } } } Transform { translation 2 0 0 children SimpleShape { newColor 0 0 1 newGeometry Cone { height 1 bottomRadius 0.25 } } }

• Since this PROTO was derived from a Shape, it can be used wherever a Shape is appropriate

Building a World from multiple files:

• Useful for code-reuse, allows you to develop libraries of objects and PROTOs

• Can also lead to reduced download time, since objects that appear in multiple files need only be defined in one of them

• To reference a PROTO from an external file, use the keyword EXTERNPROTO

• To reference shapes from external files, use the Inline node in place of a Shape node. The Inline node has a field named “url” which defines the filename (local or absolute HTTP address)

If referenced in an external file called “shapes.wrl”, our previous PROTO declaration becomes: EXTERNPROTO SimpleShape [ exposedField SFNode newGeometry NULL exposedField SFColor newColor 0 0 0 ] “shapes.wrl#SimpleShape”

• As you can see, we need to re-declare any exposed fields that we actually want to reference

An example of inlining (showing syntax): Transform { children Inline { url “myshape.wrl” } Script Nodes

• The Script node allows arbitrary programmed behaviour using Java or JavaScript

Page 18: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

o Objects can be added/removed to/from the SceneGraph dynamically

o Custom interpolators can be used to create complex calculated (or mathematically defined) animation paths

• As a fully featured general purpose programming language, Java allows VRML worlds to, for example: o use databases o communicate over a network (facilitating

multi-user worlds) Example: calculating an animation path with JavaScript and mathematical functions: #VRML V2.0 utf8 Group { children [ # central sphere (static) Shape { appearance DEF White Appearance { material Material { } } geometry Sphere { } }, # smaller sphere with an elliptical orbit DEF Planet1 Transform { translation 2.0 0.0 0.0 center -2.0 0.0 0.0 children Shape { appearance USE White

geometry Sphere { radius 0.2 }

} }, # Animation clock DEF Clock1 TimeSensor { cycleInterval 2.0 loop TRUE }, # Animation path DEF PlanetPath1 Script { eventOut SFVec3f translation eventIn SFFloat interp_path field SFFloat sinval 0 field SFFloat cosval 0 url "javascript: function interp_path(value) { sinval = Math.sin(value * 2 *

Math.PI); cosval = Math.cos(value * 2 *

Math.PI); translation[0] = 6 * sinval; translation[1] = 1 * cosval; translation[2] = 0; }" } ] } ROUTE Clock1.fraction_changed TO

PlanetPath1.interp_path ROUTE PlanetPath1.translation TO

Planet1.set_translation

Page 19: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

Example: using a JavaScript node to generate a 2-number animation value (since there is no built-in interpolator that does this) – in order to animate a texture’s position: #VRML V2.0 utf8 #Animated Texture Example using JavaScript NavigationInfo { type "NONE" } Viewpoint { position 0 0 5 fieldOfView 0.785 } Group { children [ DEF Square Shape { appearance Appearance { material Material { ambientIntensity 0.25 diffuseColor 0.8 0.8 0.8 } texture ImageTexture { url "mandrill.jpg" } textureTransform DEF Trans

TextureTransform { translation 0 0 } } geometry IndexedFaceSet { coord Coordinate { point [ -1 1 0, -1 -1 0, 1 1 0,

1 -1 0 ]

} coordIndex [ 0, 1, 3, 2, -1 ] texCoord TextureCoordinate { point [ 0 1, 0 0, 1 1, 1 0 ] } texCoordIndex [ 0, 1, 3, 2, -1 ] } } DEF Touch TouchSensor { } DEF Time TimeSensor { cycleInterval 1.5 loop TRUE startTime 0 } DEF XInterp ScalarInterpolator { key [ 0, 1 ] keyValue [ 0, 1 ] } DEF YInterp ScalarInterpolator { key [ 0, 1 ] keyValue [ 0, 1 ] } DEF Move_it Script { eventOut SFVec2f vec eventIn SFFloat xIn eventIn SFFloat yIn field SFFloat xBuf 0 field SFFloat yBuf 0 url "javascript: function xIn(value) { xBuf = value; vec[0] = xBuf; vec[1] = yBuf; }

Page 20: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

function yIn(value) { yBuf = value; vec[0] = xBuf; vec[1] = yBuf; }" } ] } ROUTE Touch.touchTime TO Time.set_startTime ROUTE Time.fraction_changed TO

XInterp.set_fraction ROUTE Time.fraction_changed TO

YInterp.set_fraction ROUTE XInterp.value_changed TO Move_it.xIn ROUTE YInterp.value_changed TO Move_it.yIn ROUTE Move_it.vec TO Trans.set_translation Example: A simple physical simulation using JavaScript nodes. A ball moves under the force of gravity and bounces off walls. #VRML V2.0 utf8 Viewpoint { position 0 35 30 orientation 1 0 0 -0.6 fieldOfView 0.785 } Group { children [ # text for output of ball position Transform { translation -20.0 20.5 -22.0 children Shape {

geometry DEF outtext Text { string "test" } } }, # 5 walls for the ball to bounce off # left wall Transform { translation -20.05 10.0 -10.0 children Shape { geometry Box {size 0.1 20.0 20.0} appearance DEF Blue1 Appearance { material Material { emissiveColor 0 0 1 } } } }, # right wall Transform { translation 20.05 10.0 -10.0 children Shape { geometry Box {size 0.1 20.0 20.0} appearance USE Blue1 } }, # floor Transform { translation 0.0 -0.05 -10.0 children Shape { geometry Box {size 40.0 0.1 20.0} appearance Appearance { material Material { emissiveColor 0 0 0.8 }

Page 21: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

} } }, # back wall Transform { translation 0.0 10.0 -20.0 children Shape { geometry Box {size 40.0 20.0 0.1} appearance Appearance { material Material { emissiveColor 0 0 0.6 } } } }, # front wall (semi-transparent) Transform { translation 0.0 10.0 0.0 children Shape { geometry Box {size 40.0 20.0 0.1} appearance Appearance { material Material { emissiveColor 0 0 0.6 transparency 0.5 } } } }, # Ball DEF Ball Transform { translation 0.0 6.0 0.0 children Shape { geometry Sphere { radius 0.2

} }

}, # Animation clock DEF Clock1 TimeSensor { cycleInterval 25.0 loop TRUE }, # Animation path DEF BallBounce Script { eventOut SFVec3f translation eventIn SFFloat interp_path field SFFloat xvelocity 2.0 field SFFloat yvelocity -3.0 field SFFloat zvelocity 2.0 field SFFloat xpos 0.0 field SFFloat ypos 6.0 field SFFloat zpos -10.0 field SFFloat prevtime 0.0 field SFFloat elapsedtime 0.0 url "javascript: function interp_path(value) { // initilisation (once only) if (ypos<-1.0) { xvelocity = 2.0; yvelocity = -3.0; zvelocity = 2.0; xpos = 0.0; ypos = 6.0; zpos = -10.0; } // calculate elapsed fractional

time since last update if (value>prevtime) elapsedtime = value-prevtime; else elapsedtime = (value+1)-prevtime;

Page 22: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

// apply velocity multiplied by elapsed time

xpos += xvelocity*120*elapsedtime; ypos += yvelocity*120*elapsedtime; zpos += zvelocity*120*elapsedtime; // check for bouncing if (ypos<=0) yvelocity = 0.95 *

Math.abs(yvelocity); if (xpos<=-20) xvelocity = 0.9 *

Math.abs(xvelocity); else if (xpos>=20) xvelocity = 0.9 * -

Math.abs(xvelocity); if (zpos<=-20) zvelocity = 0.9 *

Math.abs(zvelocity); else if (zpos>=0) zvelocity = 0.9 * -

Math.abs(zvelocity); // apply gravity yvelocity -= 40*elapsedtime; // update eventout vector translation[0] = xpos; translation[1] = ypos; translation[2] = zpos; prevtime=value; }" }, # Script for translating SFVec3f values

into string values DEF StringGenerator Script { eventOut MFString string eventIn SFVec3f translation

url "javascript: function translation(value) { string[0] = translation[0]; }" } ] } ROUTE Clock1.fraction_changed TO

BallBounce.interp_path ROUTE BallBounce.translation TO

Ball.set_translation ROUTE BallBounce.translation TO

StringGenerator.translation ROUTE StringGenerator.string TO

outtext.string Rendering Efficiency & Spatial Partitioning There are several ways in which a world may be approached in order to minimise the number of its polygons that we pass through the rendering pipeline:

• Levels of Detail (LOD) allows objects to be specified using several different models, with less detailed models used as the objects get further away from the camera. Not very effective with indoor scenes which have a high level of depth complexity

• Spatial Partitioning divides a volume of space into regions (probably hierarchically) and pre-

Page 23: 4.7 Realism and Rendering Efficiency They may be any ...sredfern/ct336/04c.pdf · • VRML lights also contribute to the overall ambient lighting by a specified amount. • They may

computes region-to-region visibility. At render-time, the region in which the camera resides is calculated, and only those regions visible from that region need to be processed (see plan view of house, below).

• The world should be designed in such a way that

it can be efficiently broken into regions (e.g. with each room as a separate inlined file)

• Spatial Partitioning algorithms include Bounding Boxes and Binary Space Partitioning (BSP) Trees.