Week 5: Transformation and Camera

Link to source code 5.1 to 5.5 (zipped)
Link to all source code (including 5.1 to 5.5)

• 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 and SceneNode
• PivotedTransform:
• Transform folder
• Compute and support simple pivoted transformation!
• Note on how we take advantage of inverse transforms (for pivoting)!
• Design decision:
• Renderable’s Transform: define object size
• SceneNode: composite/group for user manipulation of “object”
• New file: SceneNode.js
• Defined in Renderable folder
• Set of Renderables
• Defines
• a PivotedTransform
• a set of Renderables
• Set: any Renderable!
• Draw(): passes the PivotedTransform to all set elements
• Pivoted transform affects all set elements!!
• drawPivot: second parameter for debugging purposes
• VERY IMPORTANT:
• Pivoted Transform, applies Pivot BEFORE scale and rotate
• Draw Pivot Position: does not consider its own scale or rotate!!
• Renderable:
• Draw(): now composites with a matrix if passed in
• New method: computeAndLoadModelXform()
• CSS450Xform:
• New support for Pivot
• Javascript: instanceof
• Lessons:
• Composition of matrix: allow us composite in a pivot position to support “intuitive” transform
• Renderable: define a shape but DOES NOT support manipulation by users well.
• SceneNode: defines a pivoted transform to support user manipulations of objects and grouping of objects
  
  
• Example 7: Hierarchical Model
• Modification to SceneNode:
• mChildren: set of children SceneNodes
• We build a tree of SceneNodes: referred to as SceneGraph!
• Child set support: setters and getters
• Draw support:
• Now uses parent’s matrix!
• Support in Pivot drawing also!
• Note:
• What happens if we switch drawing order between elements and children?
• Lessons:
• SceneNode can be organized into a tree-like structure
• Nodes with parent-child relationship relates by concatenating transforms
• Results are “intuitive” controls
• SceneGraph is convenient for representing objects with inter-connected joints, like a human arm
  
  
• Example 8: Custom SceneNodes
• BluePalm: a generalization of the child from 5.7
• Lessons:
• Nothing very interesting, just that, strategically defined subclass of SceneNode allows fairly complex scenes be constructed in a relatively straightforward manner.