1. 17.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 17 – VRML: A Rough Guide

2. 17.2 Si23_03 Course Outline Image Display URL GIMP colour 2D vector graphics URL SVG Viewer lines, areas graphics algorithms interaction VRML viewer 3D Graphics URL surfaces viewing, shading Graphics Programming OpenGL API animation n Graphics programming – Using OpenGL with C, C++

3. 17.3 Si23_03 Good Ideas are Simple n Realization 1: – Hypertext + Internet = World Wide Web n Realization 2: – Adding images makes pages more interesting n Realization 3: – Images are pictures taken by the publisher - why not send 3D scenes and allow the user to take the picture! n VRML: Virtual Reality Modelling Language – a language to describe 3D worlds - for the Web

4. 17.4 Si23_03 VRML AUTHORING PROCESS VRML file server INTERNET client VRML BROWSER x-world/ x-vrml.wrl Text editor Modelling tool Browser plug-in: eg Cortona

5. 17.5 Si23_03 A VRML File VRML file consists of: n header n nodes – Shape is the generic geometric node – specific objects such as cylinders and spheres – operations such as transformations n fields – parameters of nodes #VRML V2.0 utf8 Shape { geometry Cylinder { radius3 height6 } }

6. 17.6 Si23_03 As Seen By A Browser #VRML V2.0 utf8 Shape { geometry Cylinder { radius2 height4 }

7. 17.7 Si23_03 Adding Colour to the Scene #VRML V2.0 utf8 Shape { geometry Cylinder { radius2 height4 } appearance Appearance { material Material { diffuseColor 1 0 0 specularColor1 1 1 } }

8. 17.8 Si23_03 Advantages of VRML n Transferring a 3D model - rather than a 2D image - to the browser has great advantages – viewer can choose how to look at the model - or world – viewer can navigate the world – file size can often be much less

9. 17.9 Si23_03 VRML - The Evolution n Original brainwave - VR for the Web – Mark Pesce and Tony Parisi - early 1994 n VRML 1.0 – practical realisation based on Open Inventor, late 1994 (Gavin Bell - SGI) – static, non-interactive worlds n VRML97 - ISO Standard dynamic – adds object behaviours and interaction to allow creation of dynamic worlds – Gavin Bell, Rik Carey and Chris Marrin n 2003 - updating ISO standard – Reworking as XML encoding (X3D) – Leading figure is Don Brutzman (US Navy Postgraduate College)

10. 17.10 Si23_03 n Each node is drawn within its own local co-ordinate system.. n..and can be scaled, rotated, translated by a modelling transformation.. n.. here a Cylinder, Sphere and Cone have been positioned with modelling transformations Co-ordinate Systems x z y

11. 17.11 Si23_03 Modelling Transformations n Transform is a VRML node - treated just like an object n It applies to a group of children nodes – Here a cylinder is scaled by factor of 5 in x-direction, and 0.5 in y-direction #VRML V2.0 utf8 Transform{ scale5.0 0.5 1.0 children [ Shape { geometry Cylinder { radius2 height4 } appearance Appearance { material Material { diffuseColor 1 0 0 specularColor1 1 1 } } } ] }

12. 17.12 Si23_03 Hierarchical Structure #VRML V2.0 utf8 Transform{ scale5.0 0.5 1.0 children [ Shape { geometry Cylinder { radius2 height4 } appearance Appearance { material Material { diffuseColor 1 0 0 specularColor1 1 1 } } } ] } TRANSFORM SHAPE parent child

13. 17.13 Si23_03 Hierarchical Structure n This generalises to allow nodes to appear in a hierarchy scene graph n This is known as the VRML scene graph n This is how VRML does its modelling transformations TRANSFORM SHAPE TRANSFORM SHAPE

14. 17.14 Si23_03 Polygonal Surfaces n The general primitive for drawing polygonal surfaces is: – IndexedFaceSet – coord field lists the points – coordIndex describes the polygons Shape{ geometry IndexedFaceSet { coord Coordinate { point [ 17.5 11.2 -1.2, 17.5 15.0 -1.2, … ] } coordIndex [ 0 1 2 3 -1, 4 1 0 5 -1, …] }

15. 17.15 Si23_03 Instances n A node can be given a name and then used multiple times - with different transformations applied to each n DEF kwb Shape {...} gives it a name n USE kwb allows it to be included at other points in the scene graph

16. 17.16 Si23_03 Anchors n A piece of geometry can act as a link to another URL

17. 17.17 Si23_03 Textures n Texture mapping: Images can be mapped to geometry to provide texturing n VRML looks like: Shape{ geometry Sphere { } appearance Appearance{ texture ImageTexture{ url http://..../kwb.gif}

18. 17.18 Si23_03 Lights n VRML includes: – DirectionalLight – PointLight – SpotLight n Note # sign is a comment Example: PointLight{ onTRUE intensity0.75 color1 0 0 #red location0 0 0 radius100 }

19. 17.19 Si23_03 Richer Worlds n VRML97 allows the creation of much more interesting worlds by introducing: – interaction and animation – multimedia – scripting active n Worlds become active – can change over time – can change in response to a users actions

20. 17.20 Si23_03 Making Worlds Come Alive n To understand how this works we shall create a really simple example n We shall build a signboard that rotates... eventssensors n... for this we need to understand events and sensors

21. 17.21 Si23_03 Sensors and Events sensor n A sensor is a type of node that generates data within the world - as the browser navigates it – eg TimeSensor – eg TouchSensor event n Data generated within a node is called an event routed n Events are routed from one node to another to program behaviour in the world

22. 17.22 Si23_03 Routing of Events n Each node has a specified list of events associated with it – eg TimeSensor has time events n Divided into eventOuts and eventIns – a node can receive eventIns – a node can send eventOuts n Routes assign eventOut of one node to eventIn of another node Node A Node B route eventOutseventIns

23. 17.23 Si23_03 Example of Routing DEF OBJECT Shape {.. } DEF LIGHT PointLight {.. } DEF TIMER TimeSensor {.. } DEF SWITCH TouchSensor {.. } # start the clock when someone presses dimmer switch ROUTE SWITCH.touchTime TO TIMER.set_startTime # as the clock ticks, change the intensity of light in the room ROUTE TIMER.fraction_changed TO LIGHT.set_intensity

24. 17.24 Si23_03 Time Sensor n A Time Sensor generates events as the clock ticks n Fields include: – start time (secs) [0 is default = midnight, 1/1/1970] – cycle time (secs) [1 is default] – loop (TRUE/FALSE) n EventOuts include: – current time – fraction_changed (fraction of current cycle) n EventIn includes – set_startTime

25. 17.25 Si23_03 Animation animation engine n Animation is achieved by routing time events to an animation engine keyframe values n This engine is programmed with keyframe values – on receiving a time event, it calculates an in-between value – this gets routed to another node, typically a transform node

26. 17.26 Si23_03 Interpolator Nodes n These form the animation engines Orientation Interpolator n Example is Orientation Interpolator OrientationInterpolator { key[0, 0.5,1] keyValue[0 1 0 0, 0 1 0 3.14, 0 1 0 6.28] } – EventIn set_fraction(eg 0.25) – EventOut value_changed(eg 0 1 0 1.57) Note: Orientation specified as angle about axis - here y-axis

27. 17.27 Si23_03 Animation animation engine... n Animation then achieved by routing time events from a time sensor to the animation engine... n... which then drives say a transform node: TIME SENSOR time elapsed ORIENTATION INTERPOL- ATOR rotation TRANSFORM animation engine sensor event modify geometry

28. 17.28 Si23_03 Rotating Sign DEF TURN_SIGN Transform { rotation0 1 0 0 children [ DEF SIGN Shape {...}]} DEF TIMER TimeSensor { loopTRUE }#continuous DEF ROTOR OrientationInterpolator { key[0,0.51.0] keyValue[0 1 0 0, 0 1 0 3.140 1 0 6.28] #rotate twopi in a cycle } ROUTE TIMER.fraction_changed TO ROTOR.set_fraction ROUTE ROTOR.value_changed TO TURN_SIGN.set_rotation

29. 17.29 Si23_03 Proximity Sensor Collision Detection n Proximity sensor acts as a detector as the viewer enters a region – It generates events on entry and exit – You can use this for example to turn on a light as someone enters a room n VRML allows you to detect when the viewer collides with an object – When collision occurs, a collideTime event is generated – Note collision between objects NOT detected

30. 17.30 Si23_03 Collision + Sound Example DEF COLLIDE Collision { children [DEF SIGN Shape {.. }] DEF TUNE Sound { sourceDEF CLASSIC AudioClip { url "http://.....wav"} } ROUTE COLLIDE.collideTime TO CLASSIC.set_startTime

31. 17.31 Si23_03 Applications - Web-based Visualization n Air quality visualization service n User enters request on form n CGI script runs IRIS Explorer on server n Visualization returned as VRML n Try it at: – cspcx40.leeds.ac.uk /aqual

32. 17.32 Si23_03 Applications - Medical Visualization n Increasingly VRML is being used for simple surgical simulations n Look at: – www.nextd.com – www.comp.leeds.ac.uk/ vis/ying/simulators/ trigeminal

33. 17.33 Si23_03 Applications - Maps and Architectural Walkthroughs n Campus maps were an early VRML application n Interior design simulations – high quality rendering is possible n Virtual cities are appearing – Bath – Berlin.. through the ages

34. 17.34 Si23_03 Browsing n Traditionally... n Has been a range of browsers to select from n Commonly: – free – beta n Not all browsers support all functionality... n Rapidly changing environment n Leading product is Cortona – But Windows only n Other browsers – WorldView – CosmoPlayer – Blaxxun – Vrmlview on linux

35. 17.35 Si23_03 Information About VRML n Web3D Consortium – http://www.web3d.org – links to specifications and resources n Web3D Information – http://web3d.about.com/compute/web3d n Tutorials include: – Floppys guide: www.vapourtech.com/vrmlguide n Many, many examples: – eg www.intoronto.com

36. 17.36 Si23_03 Conclusions n VRML brings 3D dynamic worlds to the Internet community n Easy to learn, easy to use n Variety of application areas n Still evolving – EAI (to link with Java applets), MPEG-4 (to include 3D in movies), XML …. n PS One of the first VRML browsers was written by Craig Hart, in his Leeds MSc project, in summer 1995!!