# CS代考计算机代写 c++ Computer Graphics CSI4130 – Winter 2019

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