A WebGL Game With Threejs Interactive Computer Graphics Chapter 10 2 WebGL Game Road Race Environment Car model smoke Animation Sounds Collision detection Keyboard input ID: 408606
Download Presentation The PPT/PDF document "CS 352: Computer Graphics" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CS 352: Computer Graphics
A
WebGL
Game
With
Three.jsSlide2
Interactive Computer Graphics
Chapter
10
-
2
WebGL Game: Road Race!
EnvironmentCar model, smokeAnimationSoundsCollision detectionKeyboard inputHUD, speedometerFrom WebGL: Up and Running by Tony Parisi (O’Reilly)Slide3
Game DesignFirst step in game design: “3CAD”CharacterCamera
ControlArt DirectionInteractive Computer GraphicsChapter 9 - 3Slide4
This gameCharacter is carThird-person (over-the-shoulder) view
Keys to control character“Graybox prototype”: fully renderCharacterPoint of viewMotion controlsSee grayBox.js Interactive Computer GraphicsChapter 9 - 4Slide5
Graybox implementationKeyboard controls: implement keyDown
and keyUp handlersCameraOffset camera position from carlookAt the carGrayBox implementation for your 3D game Interactive Computer GraphicsChapter 9 - 5Slide6
Better Character ControlInteractive Computer Graphics
Chapter 9 - 6Morph TargetsSee animated characters at TurboSquidSlide7
How to crash?
Interactive Computer GraphicsChapter 9 - 7Slide8
Keyframe AnimationBasickeyframe
animation in Three.js:KeyFrameAnimation objectSet of morph targetsTime over which to morphOther Web documentation availableInteractive Computer GraphicsChapter 9 - 8Slide9
Car AnimationNeed animations: colliding with guard rail, crash
Three.js has KeyFrameAnimatorSee car.jsInteractive Computer GraphicsChapter 9 - 9Slide10
Three.js Keyframe Animation
Interactive Computer GraphicsChapter 9 - 10Slide11
Movin’ down the roadTexture animationMake the road shorter
Move the road (i.e. move the texture y coord faster)Interactive Computer GraphicsChapter 9 - 11Slide12
Collision DetectionHow to tell when car hits guard rail or another car?More complex game: physics engine
Define 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 - 12Slide13
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 - 13Slide14
Heads-up DisplayCompositing 2D and 3D is useful!Open source speedometer from
https://github.com/vjt/canvas-speedometerInteractive Computer GraphicsChapter 9 - 14Slide15
Car ModelFrom TurboSquid
Came 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 - 15Slide16
ExhaustParticle system!100 texture-mapped particles (smoke blobs)
Move with random velocityAnimate each particle, each frameSmoke texture:See exhaust.jsInteractive Computer GraphicsChapter 9 - 16Slide17
SoundFind your sounds early: they can make the gameSound lab uses HTML5 <audio> tag
Interactive Computer GraphicsChapter 9 - 17Slide18
Putting the game together
Interactive Computer GraphicsChapter 9 - 18