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