CSC 418/2504 Assignment 2 Part A and B

Description

Part A [45 marks in total]
Below are 4 exercises covering different topics from the weeks of class upto reading week. They require
thought, so you are advised to consult the relevant sections of the textbook, the online lecture notes and
slides, and your notes from class well in advance of the due date. Your proofs and derivations should be
clearly written, mathematically correct, and concise.
All questions require showing the steps toward the solution, and marks will be subtracted if this is
not the case. Even if you cannot answer a question completely, it is very important that you show your
(partial) answers and your reasoning. Otherwise your TA will not be able to award you partial marks.
Both Part A and Part B must be done individually and electronically submitted. Part A must be in PDF
format, by scanning your handwritten solution or by using LaTeX/word to typeset it. Please make sure
that you mention your name, student number, and CDF ID on the first page of your submission for part
A. Otherwise, expect a delay in receiving your grades.
1. Transformations [10 marks]
[4 marks] A 2D Affine transformation is completely specified by its effect on three non-colinear
points, i.e., by how it maps a triangle into another triangle. Find the 2D affine transformation that
maps points 𝒂𝟏, 𝒂𝟐, and 𝒂𝟑 into points 𝒃𝟏, 𝒃𝟐, and 𝒃𝟑, respectively.
Under what conditions (for the points), is this mapping fully determined?
[2 marks] How many point mappings need to be specified to completely determine a general 2D
Homography? A 2D similarity transform?
[4 marks] Are the centroid (average of the three points) and circumcenter (intersection point of
the perpendicular bisectors) of a triangle affine invariant? Prove or provide a counterexample.
2. Viewing and Projection [10 marks]
[3 marks] Why is the image formed in a pinhole camera inverted? (no more than a few sentences)
[3 marks] Given a 3D camera position 𝒄, a point along the viewing direction at the centre of the
screen 𝒑, and a vector parallel to the vertical axis of the screen 𝒖, compute the world to camera
transformation matrix.
[2 marks] Under what conditions will a family of lines parallel to the vector
𝒗 = (𝑣𝑥, 𝑣𝑦, 𝑣𝑧) remain parallel after this perspective projection?
[2 marks] When this condition is not met, do all lines in the family converge at a single 2D point?
If so, which point? If not, provide a counterexample.
3. Surfaces [15 marks]
The tangent plane of a surface at a point is defined so that it contains all tangent vectors. In this exercise,
you will verify that a specific tangent vector is contained in the tangent plane. Let the surface be a torus in
3D (Figure 1) defined by the implicit equation:
𝑓(𝑥, 𝑦, 𝑧) = (𝑅 – 𝑠𝑞𝑟𝑡(𝑥
2 + 𝑦
2
))
2
+ 𝑧
2 − 𝑟
2 = 0, where 𝑅 > 𝑟.
[3 marks] Give a surface normal at point 𝒑 = (𝑥, 𝑦, 𝑧), using the surface implicit equation.
[3 marks] Give an implicit equation for the tangent plane at 𝒑.
[3 marks] Show that the parametric curve 𝒒(𝜆) = (𝑅 cos𝜆, 𝑅 sin𝜆, 𝑟) lies on the surface.
[3 marks] Find a tangent vector of 𝒒(𝜆) as a function of 𝜆.
[3 marks] Show this tangent vector at 𝒒(𝜆) to lie on the implicit equation of the tangent plane.
Left: Torus, showing a tangent plane, normal and 3D curve at a point. Right: Close-up.
4. Curves [10 marks]
Consider a curve made up of two cubic Bezier segments 𝐵1(𝑡) for 0 ≤ 𝑡 ≤ 1 using 𝑷𝟏 … 𝑷𝟒, and
𝐵2(𝑡 − 1) for 1 ≤ 𝑡 ≤ 2 using 𝑷𝟒 … 𝑷𝟕.
[2 mark] What are the tangents 𝐵1′ and 𝐵2′ at the shared point 𝑷𝟒?
[2 mark] What are the second derivatives 𝐵1′′ and 𝐵2′′ at 𝑷𝟒?
[4 mark] Given 𝑷𝟏 to 𝑷𝟒, are the values of 𝑷𝟓, 𝑷𝟔 and 𝑷𝟕 fixed for the combined curve to be
𝐶
2
continuous? If so, what value are these points constrained to?
[2 mark] Give 4 reasons why cubic Bezier curves are popular in graphics.

CSC418/2504 Computer Graphics Winter 2018: Assignment 2
15% of course grade
Due 11:59PM on February 26, 2018
Part B (60 marks)
In this assignment you will be writing several different shaders in a C-like language known as the OpenGL
Shading Language, or GLSL for short. A shader is program that decides the colour of each pixel rendered
for an object.
Your Programming Task. Your task is to implement the following shaders. Each type of shader will
be discussed in either class or tutorial to provide you with what you need to start. Figure 1 shows how the
results should look like.
a) [10 marks] Ambient, diffuse, and specular lighting using the Gouraud shading model.
shaders/gouraud vert.glsl, shaders/gouraud frag.glsl
b) [10 marks] Ambient, diffuse, and specular lighting using the Phong shading model.
shaders/phong vert.glsl, shaders/phong frag.glsl
c) [10 marks] Ambient, diffuse, and specular lighting using the cel shading model. Cel shading is not a
well-defined term by itself, and may refer to various kinds of shading techniques emulating cartoons.
You’ll implement the most basic form of cel shading by giving a posterized look to the object.
shaders/cel vert.glsl, shaders/cel frag.glsl
d) [10 marks] UV texture mapping. With a given texture image and a model with defined texture
coordinates, you need to write the shaders to display a textured model. Note that the provided texture
will only look reasonable on the sphere model.
shaders/texture vert.glsl, shaders/texture frag.glsl
e) [10 marks] Halftone shading. The halftone technique simulates continuous tone using a grid of dots
that vary in size to depict different tones.
shaders/halftone vert.glsl, shaders/halftone frag.glsl
f) [10 marks] X-Ray shading. The opacity of the rendered fragment decreases as you move further away
from the edge of the object’s silhouette, producing results that look like X-Ray images.
shaders/xray vert.glsl, shaders/xray frag.glsl
g) Bonus [10 marks] For bonus points, you have to implement one of the following shading/mapping
techniques. Points will be awarded on the basis of technical competence, creativity, ingenuity, and
aesthetic appeal of the result.
— Cook-Torrance reflectance model. The Phong model covered in class is not the only reflection
model employed in computer graphics. The Cook-Torrance model is another common example.
— Hatching. Hatching is commonly used in pencil, charcoal, and pen and ink sketches to create
tonal and shading effects. In your shader program, you can approximate tone by varying the
density of linear hatching and/or the number of lines used for crosshatching. You can also try
hatching in general contours, instead of straight lines.
1
— Painterly rendering. Implement a painterly rendering technique of your choice. You can try to
mimic impressionist brush strokes, water colours, knife painting techniques, coloured pencils, etc.
shaders/bonus vert.glsl, shaders/bonus frag.glsl
Helper Code. You are provided with an environment for developing shaders that runs in a modern web
browser. Start by opening up a terminal window, and navigating to the folder A2. Then, type out the
following command
$ python server2.py
assuming the default python installation is python2 (this is true for CDF machines), or
$ python server3.py
if the default python on your machine is python3.
In any modern browser, then navigate to http://localhost:8000. You should see text boxes displaying
the code of the currently selected shader, a viewer window, and UI tools to select the shader, material colours,
light position, and the displayed shape (see Figure 2). The instructions are guaranteed to work on CDF
machines. However, having Python and a modern browser (latest Chrome, Firefox, Edge, etc.) installed are
the only requirements if you choose to run it on your own machine.
(a) Gouraud shading (b) Phong shading (c) Cel shading
(d) UV texture mapping (e) Halftone shading (f) X-ray shading
(g) Bonus shaders: Cook-Torrance model and cross-hatching
Figure 1: Sample results for the programming tasks. Note that your bonus shaders may look wildly different
from the examples shown here and may still be deemed correct if you follow a reasonable algorithm.
2
Figure 2: Snapshot of the display window.
Note for Windows: The same commands will work for command prompt or PowerShell on Windows
computers. Make sure that you’ve added the python installation folder to the system PATH.
You may edit the shaders by modifying the source code found in the shaders/ directory. After you’ve
made a change to a shader file, press the Reload Shader Code button to load and run the new code.
Note: You should not modify any of the provided code other than the files in the shaders/ directory.
Turning in your Solution to Parts A and B. Your PDF file for part A and your submission for part
B should go inside the same folder named A2 in a tgz file. All your code should remain in the directory
A2/shaders. Note that this file should not be thought of as a substitute for putting detailed comments in
your code. Your code should be well commented if you want to receive full (or even partial) credit for it.
To pack and submit your solution, execute the following commands from the directory containing your
code (i.e., A2/shaders).
$ cd ../../
$ tar cvfz a2-solution.tgz A2
Submit your assignment using the submission script on the course website.
3