1902/159.360
MTUI DISD
EXAMINATION FOR
159.360 Programming for Computer Graphics
Semester Two 2019
Time Allowed: THREE (3) hours
Students are required to answer all questions.
This examination is Open Book - no restrictions on reference material.
Question 1 - Bend it like Beckham
(a) Consider the 2D scene below, where a soccer ball is kicked toward a goal. The ball is spinning
clockwise around its center, so that air friction is causing it to bend in a curve.
Describe how to create an animation of the ball spinning towards the goal in a curve.
[5 marks]
Answer: Using kinematics/dynamics:
1. Specify initial position, rotation angle and velocity vector.
2. Draw frame at current position and angle.
3. Update angle and velocity, then update position using velocity.
4. Repeat 2 & 3.
(b) Construct a matrix that rotates a 2-dimensional soccer ball object centered at the origin
clockwise by θ degrees, and moves it to position (x, y).
[5 marks]
Answer: Use homogeneous coordinates for translation, and −θ for clockwise rotation:
Note that cos(−θ) = cos(θ), sin(−θ) = − sin(θ).
Question 2 – Easy A
(a) Consider the following polygon of a stylized A:
Numbers 1-5 denote the corners of the polygon, in order, while letter a denotes the intersection
point of edges 2-3 and 4-5. For each of the sub-polygons 1-4-3, 2-a-4, 5-3-a and
3-4-a, state whether they lie inside or outside the polygon area, w.r.t. the odd-even
rule and the non-zero winding number rule.
[4 marks]
Answer: 3-4-a lies outside for odd-even rule and inside for non-zero-winding number rule.
All others lie inside for both rules.
(b) To draw complex polygons in WebGL, we must decompose them it into triangle lists, triangle
strips or triangle fans. A disvantage of using triangle lists is that vertex data (e.g. position)
is often repeated. Explain how this issue can be mitigated.
[2 marks]
Answer: Element buffers add a level of indirection that allows us to reuse vertex data without
specifying it multiple times.
(c) Consider another polygon of a stylized A:
(i) Show how the polygon can be represented using a single triangle strip. Do so by
listing the vertices in the order that you would pass them to WebGL.
Answer: 2-3-1-4-5 or 5-4-1-3-2
(ii) Show how the polygon can be represented using a single triangle fan.
[2 marks]
Answer: 1-2-3-4-5 or 1-5-4-3-2
Question 3 – Source Code
Consider the GLSL vertex shader code below:
1: attribute vec3 aPosition, aNormalVector;
2: uniform mat4 uPerspective;
3: uniform vec3 uLightSource;
4: varying float vBrightness;
void main() {
5: gl_Position = uPerspective * vec4(aPosition, 1);
6: vec3 lightVector = normalize(uLightSource - aPosition);
7: vBrightness = dot(lightVector, aNormalVector);
}
Explain what this code does, both on a high level and with details for every line.
[10 marks]
Answer: The vertex shader implements Gouraud shading for diffuse reflection with a point
lightsource. In detail:
1. Input: position and normal vector for a point on the surface.
2. Input: perspective projection matrix (same for all vertices)
3. Input: position of the light source
4. Output: light intensity at the surface point
5. The assignment gl Position = uPerspective * vec4(aPosition, 1) applies the perspective
projection matrix to the vertex position and passes the result to the graphics
engine. vec4(aPosition,1) turns the position into homogenous coordinates.
6. Compute the normalized direction vector from the surface point to the light source.
7. Compute the brightness as scalar product between the surface normal and light source
direction. The result is passed to the fragment shader.
Question 4 - Now you see me
(a) Modern graphics cards offer depth-buffering (aka z-buffering) as a built-in feature. The
following techniques can also aid in visible surface detection:
• Backface detection
• Depth-sorting
• BSP-Trees
Discuss whether or not hardware support for depth-buffering makes them obsolete.
[6 marks]
Answer: None of these techniques is required to render opaque surfaces correctly with depthbuffering
enabled. However:
• The purpose of backface detection is to speed up computation, and that is still helpful.
• Depth-sorting and BSP-trees can aid in rendering transparent surfaces, which depthbuffering
does not handle well.
Thus, backface detection is never obsolete, while dept-sorting and BSP-tree may or may not
be obsolete, depending on application requirements.
(b) Given a triangle T represented by the positions of its corners and normal vector N:
work out whether it is facing towards or away from the camera located at the origin.
Show your working.
[4 marks]
Answer: We compute the scalar product between the vector from some point of the triangle
(which point does not matter) to the camera and the normal vector:
As this scalar product is negative, the triangle is facing away from the camera.
Question 5 - Blinded by the Light
(a) The Phong lightning model has three components: ambient light, diffuse reflection and
specular reflection. For each of them explain how they work and how they relate to
illumination in the real world.
[5 marks]
Answer:
• Ambient light provides basic illumination to surfaces regardless of their position and
orientation. It models light reflected from other surfaces.
• Diffuse reflection provides illumination based on the angle between the surface and
incoming light. It models light reflected by dull surfaces.
• Specular reflection provides illumination based on the angles between the surface, incoming
light and the camera. It models light reflected by shiny surfaces.
(b) Diffuse and specular reflection can be implemented using either Gouraud or Phong shading.
Explain how these approaches differ, and discuss tradeoffs.
[5 marks]
Answer: In both cases, the vertex shader receives a surface normal vector for each vertex.
For Gouraud shading, the brightness value is calculated at each vertex and passed to the
fragment shader, so the brightness values get interpolated. For Phong shading the normal
vector is passed to the fragment shader, where the brightness value gets calculated based
on the interpolated normal vector.
Gouraud shading is faster, as brightness calculations are done only once per vertex instead
of once per pixel, but Phong shading provides more accurate lighting.
Question 6 - Blended
When working with textures, several common techniques for anti-aliasing exist.
(a) Explain how MIP maps work.
[2 marks]
Answer: Multiple resolutions of a texture are stored, and the one closest to screen resolution
is used. This avoids aliasing effects as most texels get sampled.
(b) Explain how RIP maps work.
[2 marks]
Answer: Like MIP maps, but also stores multiple textures for different x:y ratios. This
avoids aliasing effects for surfaces seen at steep angles.
(c) Explain how bi-linear filtering works.
[2 marks]
Answer: Instead of picking the color of the texel closest to the sampling point, the colors of
several closest texels are interpolated. This ensures more texels get sampled.
(d) Explain how tri-linear filtering works.
[2 marks]
Answer: Instead of just using a single MIP/RIP map, the MIP/RIP maps with closest
resolution are used and results interpolated. This avoids visual effects at polygon edges due
to resolution changes.
(e) Which of the following approaches will provide visually better results?
• bi-linear filtering with MIP maps
• tri-linear filtering without MIP maps
Justify your answer.
[2 marks]
Answer: Tri-linear filtering without MIP maps (i.e., just a single texture) is equivalent to
bi-linear filtering. And Bi-linear filtering is better with MIP maps than without.