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 10 - 2 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 9 - 6 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 9 - 10

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 9 - 11

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 9 - 12

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 9 - 13

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

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 9 - 15

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 9 - 16

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

19 Putting the game together Interactive Computer GraphicsChapter 9 - 18


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

Similar presentations


Ads by Google