Week 5: Transformation and Camera

Link to all source code (zipped)

• Example 1: generalization of MP3, let’s load geometries
• You will need to have either (or both) of these files: Teapot, OfficeChair
• Teapot: from http://graphics.stanford.edu/courses/cs148-10-summer/as3/code/as3/teapot.obj
• Office chair: http://tf3dm.com/3d-model/office-chair-321.html
• http://tf3dm.com/: has quite a number of 3D objects (we only know how to load .obj files)
• Back fill:
• Move initializeWebGL to MainController
• Should have done that in Example 4.1, last week
• Input File
• FileReader, reads from the machine that runs the browser (not the server)!
• webgl-obj-loader.js
• Downloaded from: https://github.com/frenchtoast747/webgl-obj-loader
• OBJ parser. Easy to use.
• Lesson:
• Anything, well almost, we can stuff into the WebGL VertexBuffer with vertices, we can render with our system.
• 
  
  
• Example 2: abstract into MeshRenderable (Assignment 4)!
• MeshRenderable: nothing interesting J
• We can now create many copies of mesh objects
• If we create two teapots, are we reusing the vertex buffer?
• Lesson:
• Renderable: abstraction is powerful!
• Everything we are learning works for 3D, except, we don’t know much about the Camera (yet)! We will!!
  
  
• Example 3: Catch up with Rest of BGE Chapter-3, all about the camera
• World Coordinate (WC) system
• Aspect ratio: we only allow user specifying width (height is defined by DC aspect ratio)
• Viewport: in Device Coordinate (DC) system
• Camera.js: last 4 lines, S T
• Lesson:
• User can define whatever coordinate system they want to work in
• We compute transform to NDC
  
  
• Example 4: Two views into the Model
• Camera.js:
• Now accepts wcCenter, width, and viewport as parameters!
• Small view: viewing with lower-left at the corner or the initial square!
• MainController:
• TimerHandler: calls: clearCanvas():
• moved from ClassExample::draw();
• App should not clear the canvas, it only draws for the camera
• TimerHandler: draws twice, once for view, once for smallView
• Small view supporting variables: all hooked up to slider bars
• mSmallViewWCCenter[2]
• mSmallViewWCWdith
• mSmallViewport[4]
• Notice:
• Slider does NOT bind to internal representation
• Slider results are String!!
• We need to make sure only numbers are sent to our internal representation
• Mouse support is assumed to be the Large view
• When mouse is over the small view, nothing seems to work! What is going on?
• Mouse click is assumed to be in the large view
• Yet, we are seeing the small view, it is confusing, it is wrong!
• How can we fix the mouse problem?
• Lesson:
• WC and Viewport
• Mouse click is viewport specific! (should be handled by the camera)
  
  
• Example 5: Mouse support in individual camera! (Reading: BGE: Chapter 7.5)
• Camera folder (for organizing)!!
• LargeView:
• WC Width = 200
• WC Center = (0, 0)
• Small View
• WC Width = 30
• WC Center = (-5, -10)
• Camera_Mouse:
• Determine if mouse position is in the viewport
• Compute DC to camera transform
• MainController:
• computeWCPos(): depends on which camera computes the transform
• ClassExample:
• Default object at (0, 0) size 10x10
• Lesson:
• Mouse click is viewport specific
• Must transform from DC to camera (or WC) space
  
  
• Example 6: Pivoted Transformation
• New file: PivitedTransform.js
• Folder: Transform (ORGANIZE!)
• Design decision:
• Renderable’s Transform: define object size
• RenderableSet: composite/group
• RenderableSet:
• mPivotPos: passed in as a parameter if want to debug pivot position
• Renderable:
• Draw(): now composites with a matrix if passed in
• New method: computeAndLoadModelXform()
• CSS450Xform:
• New support for Pivot
• Javascript: instanceof

• Camera transformation for mouse clicks