wave race project
TRANSCRIPT
![Page 1: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/1.jpg)
WAVE RACE PROJECTInteractive Graphics 2016
Coratti Stefano 1624508 [email protected]
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 2: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/2.jpg)
Interactive Graphics 2016
SAPIENZA - DIAG
• WAVE RACE 64The original video game by NINTENDO
![Page 3: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/3.jpg)
INTRODUCTION TO BabylonJS
01
Scene • cameras• lights• basic elements• materials• gravity & collisions• animations• environment• particles
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 4: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/4.jpg)
02
• Basic ObjectsIn my project I use basic objects, provided by Babylon.jslike spheres, boxes, cylinder, torus, etc…
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 5: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/5.jpg)
03
• Basic ObjectsIn my project I use basic objects, provided by Babylon.jslike spheres, boxes, cylinder, torus, etc…
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 6: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/6.jpg)
04
boxBase
scooterFace driverHelmet scooterChassis scooterFootboard
driverBodyUP
driverBodyDOWN driverUpperArmDX
scooterSteering
driverUpperArmSX
driverLowerArmDX
driverLowerArmSX
• HierarchicalModeling complex connected structures with hierarchical structure,made up of multiple simpler objects.
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 7: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/7.jpg)
05
• MaterialFor each object it is possible to define a Material, that allow to assign colors, textures and lights
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 8: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/8.jpg)
06
• Ambient LightHemispheric light is used to simulate realistic ambient environment light, defined by a direction to the sky, that is often straight upward (0, 1, 0)
• Directional LightThe light is emitted from everywhere... toward a specific direction, and has an infinite range.
Soft Light
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 9: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/9.jpg)
07
• FreeCameraYou can move around the scene with mouse and cursor keys
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 10: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/10.jpg)
08
• InteractionIt is possible to drive the scooter over the sea,
using the keyboard as controller
Pressing the key W the scooter is translated along the Z axis, in according to its local coordinates
Pressing the keys A or D the scooter is rotated along the Y axis, and there is a little rotation along Z axis to simulate inclination, in according to its local coordinates
Pressing the key S the scooter is boosted, in this case the scooter is rotated along the X axis in according to its local coordinates
Pos_Driver
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 11: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/11.jpg)
09
• Mesh CollisionWhen meshes are in contact with each other ,for each frame the engine check if meshes collide
bounding boxaround the objects
sphere meshesfor the
driver
approximation
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 12: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/12.jpg)
10
• Idle Scooter AnimationsThis animation is used to simulate the oscillatory
behavior of the scooter on the sea• Acrobatic Animations
This animation is used to simulate an acrobatic behavior
Interactive Graphics 2016
SAPIENZA - DIAG
![Page 13: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/13.jpg)
11
• Bump MappingIs a technique for simulating bumps and wrinkles on the surface of an object,this is achieved by perturbing the surface normals and using them during lighting calculations.
• Height MappingAllow to model a surface like terrain easily,is a raster image used to store surface height data,contains one channel interpreted as a height from the floor of a surface
![Page 14: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/14.jpg)
GO TO SIMULATION
Interactive Graphics 2016
SAPIENZA - DIAG 12
![Page 15: Wave race project](https://reader035.vdocuments.net/reader035/viewer/2022062821/589ee4bb1a28abe97f8b4599/html5/thumbnails/15.jpg)
Interactive Graphics 2016
SAPIENZA - DIAG
• Thanks for the Attention Any questions ?