SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

CS 352: Computer Graphics

tamal avatar
tamal
18 diapositives · 361 Views · Jul 27, 2014

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.

CS 352: Computer Graphics - slide 1
01 / 18CS 352: Computer Graphics
1 / 17

Télécharger la présentation

CS 352: Computer Graphics
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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