cs 352 computer graphics n.
Skip this Video
Loading SlideShow in 5 Seconds..
CS 352: Computer Graphics PowerPoint Presentation
Download Presentation
CS 352: Computer Graphics

play fullscreen
1 / 18
Download Presentation

CS 352: Computer Graphics - PowerPoint PPT Presentation

tamal
115 Views
Download Presentation

CS 352: Computer Graphics

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. CS 352: Computer Graphics A WebGL Game With Three.js

  2. WebGL Game: Road Race! • Environment • Car model, smoke • Animation • Sounds • Collision detection • Keyboard input • HUD, speedometer • From WebGL: Up and Runningby Tony Parisi (O’Reilly)

  3. Game Design • First step in game design: “3CAD” • Character • Camera • Control • Art Direction

  4. This game • Character is car. • Third-person (over-the-shoulder) view • Keys to control character • “Graybox prototype”: fully render • Character • Point of view • Motion controls • See grayBox.js

  5. Graybox implementation • Keyboard controls: implement keyDown and keyUp handlers • Camera • Offset camera position from car • lookAt the car • GrayBox implementation for your 3D game

  6. Better Character Control • Morph Targets • See animated characters at TurboSquid

  7. How to crash?

  8. Keyframe Animation • Rudimentary keyframe animation in Three.js:KeyFrameAnimation object • Set of morph targets • Time over which to morph • Documentation: “todo” • Other Web documentation available

  9. Car Animation • Need animations: colliding with guard rail, crash • Three.js has KeyFrameAnimator • See car.js

  10. Three.jsKeyframe Animation

  11. Movin’ down the road • Texture animation • Make the road shorter • Move the road (i.e. move the texture y coord faster)

  12. Collision Detection • How to tell when car hits guard rail or another car? • More complex game: physics engine • Define velocity, physical properties of objects • Compute collisions every frame • Graybox: • If x coordinate gets too small or large, guard rail collision • For each other car, test if our car is within a fixed distance [use Three.js’ Vector3.distanceTo()]

  13. Art Direction • Second part of 3CAD: art direction • Look: future or retro? • Mood: whimsical or dark? • Style: realistic or cartoony • Targeting male or female? Age demographic? • Requirements may change as game is fleshed out • Art direction study:

  14. Heads-up Display • Compositing 2D and 3D is useful! • Open source speedometer from https://github.com/vjt/canvas-speedometer

  15. Car Model • From TurboSquid • Came as zip file with several textures • Swap textures on the fly to make it look like there are more car models! • Model viewer: • JSON • Collada • You may have to adjust model afterloading (size, etc)

  16. Exhaust • Particle system! • 100 texture-mapped particles (smoke blobs) • Move with random velocity • Animate each particle, each frame • Smoke texture: • See exhaust.js

  17. Sound • Find your sounds early: they can make the game • Sound lab uses HTML5 <audio> tag

  18. Putting the game together