Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS 352: Computer Graphics A WebGL Game With Three.js.

Similar presentations


Presentation on theme: "CS 352: Computer Graphics A WebGL Game With Three.js."— Presentation transcript:

1

2 CS 352: Computer Graphics A WebGL Game With Three.js

3 Interactive Computer GraphicsChapter 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)

4 Game Design First step in game design: 3CAD Character Camera Control Art Direction Interactive Computer GraphicsChapter 9 - 3

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

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

7 Better Character Control Interactive Computer GraphicsChapter Morph Targets See animated characters at TurboSquidTurboSquid

8 How to crash? Interactive Computer GraphicsChapter 9 - 7

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

10 Car Animation Need animations: colliding with guard rail, crash Three.js has KeyFrame Animator See car.js Interactive Computer GraphicsChapter 9 - 9

11 Three.js Keyframe Animation Interactive Computer GraphicsChapter

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

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

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

15 Heads-up Display Compositing 2D and 3D is useful! Open source speedometer from https://github.com/vjt/canvas-speedometer Interactive Computer GraphicsChapter

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

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

18 Sound Find your sounds early: they can make the game Sound lab uses HTML5 tag Interactive Computer GraphicsChapter

19 Putting the game together Interactive Computer GraphicsChapter


Download ppt "CS 352: Computer Graphics A WebGL Game With Three.js."

Similar presentations


Ads by Google