Computer Graphics CSI4130 – Winter 2019
Jochen Lang
EECS, University of Ottawa Canada
This Lecture
• Projections
– Textbook:Chapter4.7
– OpenGL projection matrix – Camera modelling
CSI4130 Computer Graphics
Matrix Formulation
• Convention:
– Pinhole at coordinate (0,0,0)
– Mirror the image in front of pinhole – Use homogeneous coordinates
CSI4130 Computer Graphics
Perspective Projection – OpenGL Viewing Matrix
glFrustum( l, r, b, t, |n|, |f| )
near plane n = image plane top plane t
optical axis: negative z direction bottom plane b
left plane l
image plane
far plane f
right plane r
CSI4130 Computer Graphics
Viewing Frustum with glFrustum
– Left, right, bottom, and top planes are specified on the near plane
– Frustum does not need to be symmetric
– Image plane will be scaled for a side-length of 2
far plane f
left plane l
top plane t
right plane r
image plane bottom plane b
CSI4130 Computer Graphics
Frustum with Modern OpenGL and WebGL
• Modern OpenGL and WebGL
– No dedicated projection matrix stack anymore
– but the call
glFrustum( l, r, b, t, |n|, |f| )
uses the fixed pipeline (matrix stack)
• Instead need to set matrix explicitly, e.g.,
– Use of GLM in C++
glm::mat4 Projection =
glm::frustum(l, r, b, t, nVal, fVal)
– Use of glMatrix.js
frustum(out, left, right, bottom, top, near, far)
– Viewing frustum can be set asymmetric as in glFrustum
– A corresponding call is not available in Three.js
CSI4130 Computer Graphics
Perspective Transformation Matrix Revisited
• Make the near plane the image plane
• Keep the z-coordinate in the same order as before
perspective transformation
– Canonical viewing volume has
– Inverse of the perspective transform exists
CSI4130 Computer Graphics
Preserves Z-Ordering
CSI4130 Computer Graphics
Z-Buffer
– Order is maintained
– Far and near plane stay at their respective position
o Density along the z-dimension changes
Example n=1, f=10
CSI4130 Computer Graphics
Perspective Projection in OpenGL
• Can think of it as a two-step procedure:
– Perspective projection
– Orthographic projection into canonical viewing volume
• Remember:
– Perspective projection matrix assumes pinhole at origin
– Orthographic projection maps into canonical viewing volume
CSI4130 Computer Graphics
Projection Matrix
• The matrix product of orthographic and perspective transformation is the projection matrix.
CSI4130 Computer Graphics
OpenGL Projection Matrix
• glFrustum sets the GL_PROJECTION matrix to
Projection OpenGL
– Same as before but with absolute values for near and far plane and a sign flip for 3rd row (after homogenization).
• The image plane is in openGL at the z=-1 plane in the canonical viewing volume.
CSI4130 Computer Graphics
OpenGL Depth Buffer
• The z-coordinates in the canonical viewing volume or normalized device coordinates are (near to far)
• The viewport transform will scale this to
• Can change the transform with call
glDepthRange(near,far)default is near=0 and far=1
• This will then be mapped into an integer corresponding to
– Typical depth buffer formats are 16, 24, 32 bits integer or even 32 bits floating point (programmable).
the precision of the depth buffer
CSI4130 Computer Graphics
Field of View
• Alternate specification of focal length given image size
– Opening angle of camera
– horizontal, vertical and diagonal are used
Source: Wikimedia
CSI4130 Computer Graphics
Field of View – Orthographic to Wide- Field of View
Orthographic
70 degree field-of-view
30 degree field-of-view
CSI4130 Computer Graphics
Field of View
• In OpenGL:
– Simplification of viewing specification
• Instead of viewing volume
• Assume z-axis (optical axis) is centered
• Need only specify the (vertical) viewing angle and the near-
plane
– aspect ratio for horizontal dimension – far plane for clipping.
,,
𝒘𝒊𝒅𝒕𝒉 𝒉𝒆𝒊𝒈𝒉𝒕
gluPerspective(theta,aspect,|n|,|f|)
CSI4130 Computer Graphics
Perspective Projection with Modern OpenGL
• Modern OpenGL
– No dedicated projection matrix stack anymore – but the call
gluPerspective(theta,aspect,|n|,|f|)
uses the fix pipeline (matrix stack) • Instead
– Need to set matrix explicitly can use GLM
glm::mat4 Projection =
glm::perspective(fovy, aspect, zNear, zFar)
– Viewing frustum is the same, i.e., symmetric, as in
gluPerspective
CSI4130 Computer Graphics
WebGL and Three.js
• glMatrix.js provides
perspective(out, fovy, aspect, near, far)
• Three.js has both a camera object
– PerspectiveCamera( fov, aspect, near, far)
It also provides the corresponding call in Matrix4 to just set a matrix.
CSI4130 Computer Graphics
Arbitrary Viewing Positions
• Orthographic projection allowed us to view a rectangular volume on the negative z-axis.
• Missing:
– Different viewpoint
– Different view direction – Different orientation
• Represent as: – Eye position
– Gaze direction – Up-vector
CSI4130 Computer Graphics
Positioning the Camera
• Camera position and direction
– Notion of lookAt
glm::mat4 lookAt( const glm::vec3& eye, const glm::vec3& center,
const glm::vec3& up)
– transformation to change spatial relationship between the camera and scene
– dedicated helper routine to set rotation and translation but it is just a spatial (rigid body) transform to place and orient the camera
CSI4130 Computer Graphics
Calls in WebGL
• In glMatrix.js
lookAt(out, eye, center, up)
– sets a 4×4 matrix out, same logic than glm or the fixed pipeline
• In Three.js
– Functionality is spread over three functions. The call to
lookAt must be last
camera.position.set(eye.x,eye.y,eye.z);
camera.up = new THREE.Vector3(up.x,up.y,up.z);
camera.lookAt(center);
CSI4130 Computer Graphics
Coordinate Frame
• We have eye position, gaze direction and up vector but we need a coordinate frame (u,v,w) centered at the eye position.
Note: t and g need not be orthogonal
CSI4130 Computer Graphics
Coordinate Frame
Transformation
• Move the camera to the eyepoint:
– u,v,w vectors calculated in x,y,z coordinate frame – Find inverse with the rigid transform method of
CSI4130 Computer Graphics
Order of All Viewing Transforms
• We need to apply:
– Perspective projection
– Viewing transform
– Orthographic projection into canonical viewing volume
• Remember:
– Perspective projection matrix assumes pinhole at origin
– Orthographic projection maps into canonical viewing volume
→ apply viewing transform first
→ apply orthographic projection last
CSI4130 Computer Graphics
Next Lecture
• Curves and Surfaces
– 2D implicit and parametric curves – 3D implicit and parametric curves – 3D parametric surfaces
– Linear interpolation
CSI4130 Computer Graphics