Transformation Pipeline

Why do we use triangles so much in polygon models/meshes?

Because they are always flat!

What is a 3D scene?

A set of 3D models, each modeled on their own independent coordinate system (local coordinate system) but, to support rendering, and transformed under the same “world” coordinate system.

What are transformations?

Mathematical operations used to project geometry from one space to another.

What is the transformation pipeline?

• Local Space

  • Model Transform

• World Space

  • View Transform

• View Space

  • Projection Transform

• Clip Space

  • Perspective Divide

• NDC

  • Viewport Transform

• Pixel Coordinates on Screen

What is the local space?

A coordinate system for each object.

What is the world space?

A coordinate system for all objects in a scene.

What is a model transform?

The object does not move, but the transform assigns coordinates that are shared by all objects (the world coordinates) to each object. This reduces complication in 3D scene construction.

What is the model transform in WebGl context?

Transforms like rotate(), translate() and scale(), which move objects in local space before placing them in world space.

In what order should you write these?

setIdentity()
scale
rotate
translate
So that scale and rotate are operations done in local space not world space.

What does modelMatrix.rotate(?, ?, ?, ?) do?

It takes arguments in the format (angle, x, y, z), the coordinates being the axis around which to rotate - with (angle, 0, 1, 0) being the y-axis for instance - and the angle being the number of degrees by which to rotate.

What does modelMatrix.translate(?, ?, ?) do?

It takes arguments in the format (tx, ty, tz) where these represent how far to move the object along the x, y, and z axis.

What does modelMatrix.scale(?, ?, ?) do?

It takes arguments in the format (sx, sy, sz) where these represent the scaling factors for each axis. A scaling factor greater than 1 for one side and not the others will stretch that side, and smaller will flatten that side.

What will modelMatrix.scale(-1.0, 1.0, 1.0) do?

Mirror the object along the X axis.

We should do model transforms in the following order:

setX, then whatever other functions you wish to do. This is because we don’t want to overwrite the modelMatrix over and over again.

What is the view space?

A coordinate system centered around the view origin, which is where the virtual camera is located with respect to the world origin.

What is a view transform?

The shifting of the world coordinates origin to the coordinates of the virtual camera, allowing the user to specify from what angle the 3D scene will be viewed at.

What does the view transform look like in terms of WebGl?

The function viewMatrix.setLookAt.

What are the arguements of setLookAt? There are 9!

eye x, eye y, eye z - Where the camera is in world space.
centre x, centre y, centre z - the point where the camera is looking in world space.
up x, up y, up z - the up-direction of the camera (basically, an arrow pointing upwards out of the head of the cameraman). This is usually (0, 1, 0).

What is the clip space?

The clip coordinates are the coordinates by which the view frustrum is established, which is the projection type that changes how the perspective is perceived on the 3D scene.

What does a project transform involve?

Establishing the view frustrum, which determines which objects (or parts thereof) will be clipped out and discarded from processing. It defines the 6 clip planes - near, far, top, bottom, right and left.

What are the two view frustrums a projection transform can map?

Perspective projection - where the view frustrum is a trapezoid shape and retains perspective, producing the visible region.

Orthographic projection - where the view frustrum is a cuboid shape and preserves shape properties, producing object appearance.

What does a projection transform look like in WebGL, for perspective projection?

projMatrix.setPerspective

What does a projection transform look like in WebGl for orthographic projection?

projMatrix.setOrtho(left, right, bottom, up, near, far), where each plane is established by the x and y values where those faces are located.

What are the arguments of projMatrix.setPerspective(?, ?, ?, ?)?

(field of view, aspect ratio, distance from virtual camera to near plane, distance from virtual camera to far plane).
These are usually (30, canvas.width/canvas.height, 1, 100).

If you increase the FoV, what will this do to the final rendered image?

You will be looking at a broader, more expansive scene, so objects appear smaller and the frame of the scene wider so you can see more.

What happens to the near plane of the viewing frustrum when you increase FoV?

It gets larger.

The aspect ratio is usually canvas.width/canvas.height. You can adjust the ratio between these by multiplying values to each variable - what happens if you make width > height?

The aspect ratio is greater than one - the canvas is wider than it is tall. The projection “compresses” the y-axis more than the x-axis, so objects appear wider horizontally and compressed vertically.

Which way does the camera usually face (in terms of x, y and z)? This is useful for calculating where the coordinates of the near frustrum actually are.

-z
So if you have established through your setPerspective() that the distance from the virtual camera to the near plane is 1, then z = -1.

What is another name for the near plane?

The projection plane!

What is the equation to find the distance from the virtual camera to the projection plane?

1/tan(FoV/2) x NEAR variable [in .setPerspective (usually 1)] = distance to projection plane

How do we use this to find the coordinates of the projection plane?

distance to projection plane x aspect ratio (1 if 1:1) - top-right coordinate.

If you want to clip out the front-most object in your 3D scene, where should the near/projection plane sit?

It should move beyond the front-most object by 1.

If you want to clip out the back-most object in your 3D scene, where should the far plane sit?

Directly on top of the back-most object.

What are NDCs?

Normalised Device coordinates

How do we find the NDCs?

Perspective divide - By dividing each coordinate by the ‘w’ variable in the vec4(x, y, z, w) data structure used to store information about the coordinate of vertices, specifically defining ‘perspective’.

What do the NDC’s x and y coordinates represent?

The location of vertices of the object on a normalised 2D space.

What is the viewport transform?

After the projection transform, the 3D scene gets squashed into the NDC cube of +1 to -1. The viewport transform then takes these coordinates and maps them to actual pixel coordinates on the canvas.