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 CS 352: Computer Graphics A WebGL Game With Three.js

2 WebGL Game: Road Race! Environment Car model, smoke Animation Sounds
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)

3 Game Design First step in game design: “3CAD” Character Camera Control
Interactive Computer Graphics Game Design First step in game design: “3CAD” Character Camera Control Art Direction This is from a veteran game designer. Essential to decide those things first. Define the world Define character’s identity Character’s point of view How he moves within the world Then you can start designing play elements, materials, win conditions, mechanics, etc.

4 This game Character is car. Third-person (over-the-shoulder) view
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 Idea: understand the character you are building and how it moves.

5 Graybox implementation
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

6 Better Character Control
Interactive Computer Graphics Better Character Control Morph Targets See animated characters at TurboSquid

7 Interactive Computer Graphics
How to crash?

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

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

10 Three.js Keyframe Animation
Interactive Computer Graphics Three.js Keyframe Animation

11 Movin’ down the road Texture animation Make the road shorter
Interactive Computer Graphics Movin’ down the road Texture animation Make the road shorter Move the road (i.e. move the texture y coord faster)

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()]

13 Art Direction Second part of 3CAD: art direction
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: 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.

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

15 Car Model From TurboSquid Came as zip file with several textures
Interactive Computer Graphics Car Model From TurboSquid 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)

16 Exhaust Particle system! 100 texture-mapped particles (smoke blobs)
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

17 Sound Find your sounds early: they can make the game
Interactive Computer Graphics Sound Find your sounds early: they can make the game Sound lab uses HTML5 <audio> tag

18 Putting the game together
Interactive Computer Graphics Putting the game together


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

Similar presentations


Ads by Google