PowerPoint Presentation

CS 352: Computer GraphicsA WebGLGameWith Three.js

Game DesignFirst step in game design: 3CADCharacterCameraControlArt DirectionInteractive Computer GraphicsChapter 9 - 3

This is from a veteran game designer. Essential to decide those things first. Define the worldDefine characters identityCharacters point of viewHow he moves within the worldThen you can start designing play elements, materials, win conditions, mechanics, etc.3This gameCharacter is carThird-person (over-the-shoulder) viewKeys to control characterGraybox prototype: fully renderCharacterPoint of viewMotion controlsSee grayBox.js Interactive Computer GraphicsChapter 9 - 4

Idea: understand the character you are building and how it moves. 4Graybox implementationKeyboard controls: implement keyDown and keyUp handlersCameraOffset camera position from carlookAt the car

GrayBox implementation for your 3D game Interactive Computer GraphicsChapter 9 - 5

Better Character ControlInteractive Computer GraphicsChapter 9 - 6Morph TargetsSee animated characters at TurboSquid

6How to crash?Interactive Computer GraphicsChapter 9 - 7

Keyframe AnimationBasickeyframe animation in Three.js:KeyFrameAnimation objectSet of morph targetsTime over which to morphOther Web documentation available

Interactive Computer GraphicsChapter 9 - 8

Car AnimationNeed animations: colliding with guard rail, crashThree.js has KeyFrameAnimatorSee car.jsInteractive Computer GraphicsChapter 9 - 9

Three.js Keyframe AnimationInteractive Computer GraphicsChapter 9 - 10

Movin down the roadTexture animationMake the road shorterMove the road (i.e. move the texture y coord faster)Interactive Computer GraphicsChapter 9 - 11

Collision DetectionHow to tell when car hits guard rail or another car?More complex game: physics engineDefine velocity, physical properties of objectsCompute collisions every frameGraybox:If x coordinate gets too small or large, guard rail collisionFor each other car, test if our car is within a fixed distance [use Three.js Vector3.distanceTo()]

Interactive Computer GraphicsChapter 9 - 12

Art DirectionSecond part of 3CAD: art directionLook: future or retro?Mood: whimsical or dark?Style: realistic or cartoonyTargeting male or female? Age demographic?Requirements may change as game is fleshed outArt direction study:Interactive Computer GraphicsChapter 9 - 13

You may think you can get away with procedurally generated trees, but later realize you want better, modeled ones.You may start out with default shaders, later decide you need to hire a programmer for a custom shader to get just the right look. 13Heads-up DisplayCompositing 2D and 3D is useful!Open source speedometer from https://github.com/vjt/canvas-speedometerInteractive Computer GraphicsChapter 9 - 14

Car ModelFrom TurboSquidCame as zip file with several texturesSwap textures on the fly to make it look like there are more car models!Model viewer:JSONColladaYou may have to adjust model afterloading (size, etc)Interactive Computer GraphicsChapter 9 - 15

15ExhaustParticle system!100 texture-mapped particles (smoke blobs)Move with random velocityAnimate each particle, each frameSmoke texture:See exhaust.jsInteractive Computer GraphicsChapter 9 - 16

SoundFind your sounds early: they can make the gameSound lab uses HTML5 tagInteractive Computer GraphicsChapter 9 - 17

Putting the game togetherInteractive Computer GraphicsChapter 9 - 18