Computer Graphics
Jochen Lang
[email protected]
Faculté de génie | Faculty of Engineering
Jochen Lang, EECS [email protected]
This Lecture
• Scenegraph and Viewing Transformations
– Tomas Akenine-Möller et al., Chapter 4.2
– Marschner and Shirley, Chapters 6.4, 6.5, 12.2 – Scenegraph transforms
– Viewing and canonical viewing volume
Jochen Lang, EECS [email protected]
Scenegraph Transformations
• A Scenegraph is a hierarchical data structure to represent the content of a scene:
– Defines spatial relationship between objects relative to each other in a graph
– Scenegraphs are extremely useful for animation
– OpenGL does not provide a scenegraph; need to implement ourselves
– Similar to a kinematic chain in robotics
– Scenegraph APIs: Inventor, Java3D, OpenSG, VRML97, X3D, Three.js, …
Jochen Lang, EECS [email protected]
Modelling with a 2D Scenegraph: Example
•
Assemble complex objects from primitives
Instancing
house
door
window
window
Box
Jochen Lang, EECS [email protected]
3D Articulation Example:
• Animal out of cylinders and spheres:
– Sphere radius = , cylinder height = , angle =
Jochen Lang, EECS [email protected]
3D Articulation Example:
• Transformations:
hip joint
upper leg
lower leg
Jochen Lang, EECS [email protected]
3D Articulation Example:
• Knee rotation:
Jochen Lang, EECS [email protected]
3D Articulation Example:
• Hip rotation:
Knee rotation unchanged:
Jochen Lang, EECS [email protected]
Example: Java3D Scenegraph
Behavior
Object 1
Table
Chair T BG
Virtual Universe
BG
Locale
BG
T
Viewing
View VP
Plate BG
TT SSS
Appearance
Geometry
Jochen Lang, EECS [email protected]
Scenegraph in Three.js
• THREE.Scene is organized a scenegraph
• THREE.Object3D is the parent class of most 3D objects
– Each object has a parent field, and a
– Children field which holds an array of children
– Note however, the documentation says to use Object3D as leave nodes and use Group (see below) for building the graph
• THREE.Group is a node that serves as a parent for multiple nodes
Jochen Lang, EECS [email protected]
Scenegraph Transforms in Three.js
• Each object in the scenegraph holds the following transforms
– .matrix Local transform relative to the parent
• This is the transform that is typically modified
– .modelViewMatrix The model-view matrix for this object in the current image
• This is needed to draw the object
– .matrixWorld The transform from the object to the root
• This is an intermediate step for the above
– .normalMatrix The matrix to transform normals by Technically it is the transpose of the inverse of the
upper left 3×3 sub-matrix of the model-view matrix as discussed.
Jochen Lang, EECS [email protected]
Canonical View Volume
– A volume where the output of our program takes place
– Square at the origin which a side-length of 2
– Chosen as a 3D volume
– Need a mapping from the canonical view volume to screen coordinates
Jochen Lang, EECS [email protected]
Mapping to Screen Coordinates
– z-coordinate is 1
– x and y must map to pixels
– pixels are of size 1 with the center at 0.5
• corresponds to glViewport( xpixel, ypixel, nx, ny )
Jochen Lang, EECS [email protected]
Mapping in Pictures I
Object Transform
bottom
top
Jochen Lang, EECS [email protected]
Transformation Matrices
Changes direction of y-axis
Jochen Lang, EECS [email protected]
Mapping in Pictures II Frame Transform
Jochen Lang, EECS [email protected]
Transformation Matrices
Frame transform is inverse of object transform!
Jochen Lang, EECS [email protected]
Mapping in Pictures III Reverse Frame Transform
Jochen Lang, EECS [email protected]
Transformation Matrices
Frame transform in reverse is the object transform!
Jochen Lang, EECS [email protected]
Next Week’s Lectures
• Viewing Transformations
– Textbook: Chapter 4.7 – Orthographic Projection – Perspective Projection – Viewing Transformation
Jochen Lang, EECS [email protected]
Reviews
There are no reviews yet.