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