1 / 18

CS 352: Computer Graphics

CS 352: Computer Graphics. A WebGL Game With Three.js. WebGL Game: Road Race!. Environment Car model, smoke Animation Sounds Collision detection Keyboard input HUD, speedometer From WebGL : Up and Running by Tony Parisi (O’Reilly). Game Design.

teresat
Download Presentation

CS 352: Computer Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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 Running by 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 • Basickeyframeanimation in Three.js:KeyFrameAnimation object • Set of morph targets • Time over which to morph • 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

More Related