Slide 1

Slide 2 CS 352: Computer Graphics A WebGL Game With Three.js Slide 3 Interactive Computer GraphicsChapter 10 - 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 (OReilly) Slide 4 Game Design First step in game design: 3CAD Character Camera Control Art Direction Interactive Computer GraphicsChapter 9 - 3 Slide 5 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 Interactive Computer GraphicsChapter 9 - 4 Slide 6 Graybox implementation Keyboard controls: implement keyDown and keyUp handlers Camera Offset camera position from car lookAt the car GrayBox implementation for your 3D game Interactive Computer GraphicsChapter 9 - 5 Slide 7 Better Character Control Interactive Computer GraphicsChapter 9 - 6 Morph Targets See animated characters at TurboSquidTurboSquid Slide 8 How to crash? Interactive Computer GraphicsChapter 9 - 7 Slide 9 Keyframe Animation Rudimentary keyframe animation in Three.js: KeyFrameAnimation object Set of morph targets Time over which to morph Documentation: todo Other Web documentation availabledocumentation Interactive Computer GraphicsChapter 9 - 8 Slide 10 Car Animation Need animations: colliding with guard rail, crash Three.js has KeyFrame Animator See car.js Interactive Computer GraphicsChapter 9 - 9 Slide 11 Three.js Keyframe Animation Interactive Computer GraphicsChapter 9 - 10 Slide 12 Movin down the road Texture animation Make the road shorter Move the road (i.e. move the texture y coord faster) Interactive Computer GraphicsChapter 9 - 11 Slide 13 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()] Interactive Computer GraphicsChapter 9 - 12 Slide 14 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: Interactive Computer GraphicsChapter 9 - 13 Slide 15 Heads-up Display Compositing 2D and 3D is useful! Open source speedometer from https://github.com/vjt/canvas-speedometer Interactive Computer GraphicsChapter 9 - 14 Slide 16 Car Model From TurboSquidTurboSquid 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 after loading (size, etc) Interactive Computer GraphicsChapter 9 - 15 Slide 17 Exhaust Particle system! 100 texture-mapped particles (smoke blobs) Move with random velocity Animate each particle, each frame Smoke texture: See exhaust.js Interactive Computer GraphicsChapter 9 - 16 Slide 18 Sound Find your sounds early: they can make the game Sound lab uses HTML5 tag Interactive Computer GraphicsChapter 9 - 17 Slide 19 Putting the game together Interactive Computer GraphicsChapter 9 - 18