Computer Graphics Seminar

MTAT.03.305

Fall 2021

Raimond Tunnel

Computer Graphics

• Graphical illusion via the computer
• Displaying something meaningful (incl art)

Math

• Computers are good at… computing.
• To do computer graphics, we need math for the computer to compute.
• Geometry, algebra, calculus.

Math

• For creating and manipulating 3D objects we use:
• Analytic geometry – math about coordinate systems
• Linear algebra – math about vectors and spaces

​

Skills for Computer Graphics

• Mathematical understanding

​

• Geometrical (spatial) thinking

​

• Programming

​

• Visual creativity & aesthetics

GLuint vaoHandle;

glGenVertexArrays(1, &vaoHandle);

glBindVertexArray(vaoHandle);

The Standard Graphics Pipeline

Data

Vertex Shader

Culling & Clipping

Rasterization

Fragment Shader

Visibility tests & Blending

Define geometry and transformations

Apply transformations on the geometry

Point

• Simplest geometry primitive
• In homogeneous coordinates:

(x, y, z, w), w ≠ 0

• Represents a point (x/w, y/w, z/w)
• Usually you can put w = 1 for points
• Actual division will be done by GPU later

Line (segment)

• Consists of:
• 2 endpoints
• Infinite number of points between
• Defined by the endpoints
• Interpolated and rasterized in the GPU

Line (segment)

• Consists of:
• 2 endpoints
• Infinite number of points between
• Defined by the endpoints
• Interpolated and rasterized in the GPU

Line (segment)

• Consists of:
• 2 endpoints
• Infinite number of points between
• Defined by the endpoints
• Interpolated and rasterized in the GPU

Triangle

• Consists of:
• 3 points called vertices
• 3 lines called edges
• 1 face
• Defined by 3 vertices
• Face interpolated and rasterized in the GPU
• Counter-clockwise order defines the front face

Triangle

• Consists of:
• 3 points called vertices
• 3 lines called edges
• 1 face
• Defined by 3 vertices
• Face interpolated and rasterized in the GPU
• Counter-clockwise order defines the front face

Why Triangles?

• They are in many ways the simplest polygons
• 3 different points always form a plane
• Easy to rasterize (fill the face with pixels)
• Every other polygon can be converted to triangles

Why Triangles?

• They are in many ways the simplest polygons
• 3 different points always form a plane
• Easy to rasterize (fill the face with pixels)
• Every other polygon can be converted to triangles
• OpenGL used to support other polygons that were:
• Simple – No edges intersect each other
• Convex – All points between any two inner points are inner points

Examples of Polygons

A

B

C

D

E

F

G

I

J

K

L

C

C

B

B

C

A

A

B

D

D

E

F

H

A

OpenGL <3.1 primitives

OpenGL Programming Guide 7th edition, p49

After OpenGL 3.1

OpenGL Programming Guide 8th edition, p89-90

It’s all just points, lines and triangles!

• We can now define our geometric objects.

It’s all just points, lines and triangles!

• We can now define our geometric objects.
• But we also want to move our objects around...

World’s Origin (0, 0, 0)

Transformations

• Linear transformations
• Scaling, reflection
• Rotation
• Shearing
• Affine transformations
• Translation (moving / shifting)
• Projection transformations
• Perspective
• Orthographic

Homogeneous coordinates are needed here...

...and for the perspective projection.

Transformations

• Every transformation is a function
• As you have learned from algebra:
• All linear functions can be represented as matrices

Column-major format

Transformations

• Every transformation is a function
• As you have learned from algebra:
• All linear functions can be represented as matrices

Column-major format

Linear function, which increases the first coordinate two times.

Transformations

• Every transformation is a function
• As you have learned from algebra:
• All linear functions can be represented as matrices

Column-major format

Same function as a matrix

Transformations

• GPU-s are built for doing transformations with matrices on points (vertices).

DRAM

Vertex shader code

Transformations

• GPU-s are built for doing transformations with matrices on points (vertices).��
• Linear transformations satisfy:

We will not use homogeneous coordinates at the moment, but they will be back...

Linear Transformation

Scale

Scaling

• Multiplies the coordinates by a scalar factor.

Scaling

• Multiplies the coordinates by a scalar factor.
• Scales the standard basis vectors / axis

Scaling

• In general we can scale each axis������
• If some factor is negative, this matrix will reflect the points from that axis. Thus we get reflection.

What happens to out triangles when an odd number of factors are negative?

Linear Transformation

Shear

Shearing

• Remember it for translations later.
• Tilts only one axis.
• Squares become parallelograms.

Shearing

• Shear-y, we tilt parallel to y-axis by angle φ counter-clockwise���
• Shear-x, we tilt parallel to x-axis by angle φ clockwise

Linear Transformation

Rotation

Rotation

• Shearing moved only one axis
• Also changed the size of the basis vector
• Can we do better?

​

Did you notice that the columns of the transformation matrix show the coordinates of the new basis vectors?

Rotation

Rotation

• So if we rotate by α in counter-clockwise order in 2D, the transformation matrix is:�������
• In 3D we can do rotations in each plane (xy, xz, yz), so there can be 3 different matrices.

Rotation II

• Rodrigues’ Rotation Formula – Rotate P around axis a.

Rotation II

• Rodrigues’ Rotation Formula – Rotate P around axis a.
• Derivation:
1. Separate P’s location vector �into parallel and perpendicular �components:

This is easily done via scalar projection.

Rotation II

• Rodrigues’ Rotation Formula – Rotate P around axis a.
• Derivation:
• Separate P’s location vector �into parallel and perpendicular �components:
• Create a 2D basis from and�a perpendicular vector .

Rotation II

• Rodrigues’ Rotation Formula – Rotate P around axis a.
• Derivation:
• Separate P’s location vector �into parallel and perpendicular �components:
• Create a 2D basis from and�a perpendicular vector .
• Rotate on the 2D basis by �angle to get .

Formula is simpler as we only need to rotate the first basis vector.

Rotation II

• Rodrigues’ Rotation Formula – Rotate P around axis a.
• Derivation:
• Separate P’s location vector �into parallel and perpendicular �components:
• Create a 2D basis from and�a perpendicular vector .
• Rotate on the 2D basis by �angle to get .
• Recombine the result with the �parallel component:

Rotation II

• Rodrigues’ Rotation Formula – Rotate P around axis a.
• Will result in a formula, which is identical to quaternion rotation formula:

Rotation III

• Quaternion rotation – Rotate P around axis a.

Rotation III

• Quaternion rotation – Rotate P around axis a.
• Quaternion:

Rotation III

• Quaternion rotation – Rotate P around axis a.
• Quaternion: ��
• Conjugate quaternion:

Rotation III

• Quaternion rotation – Rotate P around axis a.
• Quaternion: ��
• Conjugate quaternion:
• Let be the location vector of P.�Quaternion representing will be .

Rotation III

• Quaternion rotation – Rotate P around axis a.
• Quaternion: ��
• Conjugate quaternion:
• Let be the location vector of P.�Quaternion representing will be .
• Let be the normalized rotation axis vector. The “rotation �by “ quaternion will be .

Rotation III

• Quaternion rotation – Rotate P around axis a.

Back to the Main Track

Do we have everything now?

• We can scale, shear, and rotate around the origin...

What if we have an object not centered in the origin?

Affine Transformation

Translation

Translation

• Imagine that a 1D world is at the y=1 line in 2D space.

• Notice that all the points are in the form: (x, 1)

Objects

The 1D World

Translation

• Do a shear-x(45°) operation on the 2D world!

Translation

• Do a shear-x(45°) operation on the 2D world!

Translation

• Do a shear-x(63.4°)...

Translation

• We can do translation (movement)!

tan(45°) = 1

tan(63.4°) = 2

Translation

• When we represent our points in one dimension higher space, where the extra coordinate is 1, we get to the homogeneous space.

1D

2D

3D

Transformations

• This together gives us a very good toolset to transform our geometry as we wish.

Augmented transformation matrix

Linear transformations

Translation column

Used for perspective projection

Multiple Transformations

• Everything starts from the origin!
• To apply multiple transformations, just multiply matrices.

Multiple Transformations

Our initial geometry defined by vertices: (-1, -1), (1, -1), (1, 1), (-1, 1)

Multiple Transformations

Multiple Transformations

Multiple Transformations

• Combine the transformations to a single matrix.

Multiple Transformations

• Combine the transformations to a single matrix.

1. We first rotated.

2. Then translated.

Multiple Transformations

• Combine the transformations to a single matrix.

• The order of transformations is important!

Now You Know

Data

Vertex Shader

Culling & Clipping

Rasterization

Fragment Shader

Visibility tests & Blending

Next Time...

• What is color in computer graphics?
• How to color our rasterized pixels?
• Light calculations.

Data

Vertex Shader

Culling & Clipping

Rasterization

Fragment Shader

Visibility tests & Blending