cs 352 computer graphics
Download
Skip this Video
Download Presentation
CS 352: Computer Graphics

Loading in 2 Seconds...

play fullscreen
1 / 18

CS 352: Computer Graphics - PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS 352: Computer Graphics' - tamal


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
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
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
ad