Cs 352 computer graphics
This presentation is the property of its rightful owner.
Sponsored Links
1 / 18

CS 352: Computer Graphics PowerPoint PPT Presentation


  • 81 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

CS 352: Computer Graphics

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cs 352 computer graphics

CS 352: Computer Graphics

A WebGL

Game

With Three.js


Webgl game road race

WebGL Game: Road Race!

  • Environment

  • Car model, smoke

  • Animation

  • Sounds

  • Collision detection

  • Keyboard input

  • HUD, speedometer

  • From WebGL: Up and Runningby Tony Parisi (O’Reilly)


Game design

Game Design

  • First step in game design: “3CAD”

    • Character

    • Camera

    • Control

    • Art Direction


This game

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


Graybox implementation

Graybox implementation

  • Keyboard controls: implement keyDown and keyUp handlers

  • Camera

    • Offset camera position from car

    • lookAt the car

  • GrayBox implementation for your 3D game


Better character control

Better Character Control

  • Morph Targets

    • See animated characters at TurboSquid


How to crash

How to crash?


Keyframe animation

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


Car animation

Car Animation

  • Need animations: colliding with guard rail, crash

  • Three.js has KeyFrameAnimator

  • See car.js


Three js keyframe animation

Three.jsKeyframe Animation


Movin down the road

Movin’ down the road

  • Texture animation

    • Make the road shorter

    • Move the road (i.e. move the texture y coord faster)


Collision detection

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


Art direction

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:


Heads up display

Heads-up Display

  • Compositing 2D and 3D is useful!

  • Open source speedometer from https://github.com/vjt/canvas-speedometer


Car model

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 afterloading (size, etc)


Exhaust

Exhaust

  • Particle system!

    • 100 texture-mapped particles (smoke blobs)

    • Move with random velocity

    • Animate each particle, each frame

    • Smoke texture:

    • See exhaust.js


Sound

Sound

  • Find your sounds early: they can make the game

  • Sound lab uses HTML5 <audio> tag


Putting the game together

Putting the game together


  • Login