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

Rudimentary keyframe animation in Three.js:
KeyFrameAnimation object




Set of morph targets
Time over which to morph
Documentation: “todo”
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