Computer Laboratory

Introduction to Graphics (Michaelmas 2018)

Click here to check the course website.

Please remember to hand in your work by 5pm (17:00) on the day before the supervision!

Supervision 1

Warmup questions

  1. Suppose you are designing a user interface for someone who is colour blind. Describe how some user interface of your choice should be suitably modified.
  2. What are the ray parameters of the intersection points between ray (1,1,1) + t(−1,−1,−1) and the sphere centered at the origin with radius 1?
  3. Why do we need anti-aliasing? Why is a random grid better than a regular grid?

Longer questions

  1. Assuming that the eye can distinguish at most 1 arc minute in the fovea, calculate the ultimate monitor resolution (i.e. colour pixels/inch) beyond which better resolution will be unnecessary. State what kind of monitor you are considering.
  2. Explain the three components of the Phong reflection model. What colour should the specular highlights be?
  3. What information would you need to define a ray-tracing viewing volume / frustum?
  4. Write pseudo-code for the ray tracing algorithm, where the first line of code is:
    for each pixel:
	...
  5. Explain how Ray tracing can achieve the following effects:
    • reflections
    • refraction
    • shadows
  6. Provide two examples for distributed ray tracing and explain how the selected techniques works

Supervision 2

Warmup questions

  1. What is OpenGL? Why is it an API?
  2. We use a lot of triangles to approximate stuff in computer graphics. Why are they good? Why are they bad? Can you think of any alternatives?

The graphics pipeline

  1. Put the the following stages of the OpenGL rendering pipeline in the correct order. Very briefly explain what each stage does and comment whether each stage is programmable.
    • Rasterization
    • Vertex shader
    • Fragment shader
    • Primitive setup
    • Clipping
  2. What are the glsl in, out and uniform variables? How do they relate to the stages in Q1?
  3. Looking at Q1 here and Q4 from the previus supervision, write a few lines of pseudo-code for rendering with OpenGL (rasterisation):
    function draw_triangles(triangles):
	...
  4. Explain the following OpenGL concepts:
    • Vertex Buffer
    • Index buffer
    • Vertex Array Object
  5. How many vertices would you need to model a cube with and without an index buffer?
  6. Describe the Model, View, and Projection transformations. Comment on why we use homogeneous co-ordinates.
  7. 2010 Paper 4 Question 4
  8. 2017 Paper 4 Question 3
  9. When transforming objects into world co-ordinates using matrix M, position vectors are pre-multiplied with M. Discuss what matrix you would need to use to transform the objects' normals.
  10. Describe the z buffering algorithm. Compare the projection matrix on slide 91 with the projection matrix in the 2010P4Q4 past paper, and discuss which one you need to use for Z buffering

Supervision 3

Written questions

  1. Explain how each of the following techniques can add detail to a flat surface. Discuss the benefits and potential limitations.
    1. Texture mapping (colour image)
    2. Normal mapping
    3. Displacement mapping
    4. Parallax Occlusion Mapping (gamedev article)
  2. Search for "normal map" images on the internet. Why do they tend have an overall blue shade?
  3. For downsampling an image, explain how each of the following sampling techniques work (feel free to use khronos.org when unsure). Discuss performance, storage and visual quality.
    • GL_NEAREST
    • GL_LINEAR
    • GL_NEAREST_MIPMAP_NEAREST
    • GL_LINEAR_MIPMAP_NEAREST
    • GL_NEAREST_MIPMAP_LINEAR
    • GL_LINEAR_MIPMAP_LINEAR
  4. Texture tiling is a way to map uv co-ordinates outside the 0..1 range (resulting in a repeated pattern). Search for other texture wrapping techniques a describe them here.
  5. How would you use a CUBE_MAP to texture a sphere? How could you use a single 2D image? How do these techniques compare in terms of visual quality and storage?
  6. Come up with a neat OOP design (with classes and their relationships) for Tick 2. No code is needed, but a UML diagram is much appreciated.
  7. Define the D65 standard illuminant.
  8. What are metamers? Describe a practical application of metamerism.
  9. Describe the use of each of the following colour spaces. How can you convert between them?
    • RGB, sRGB
    • HLS
    • CIE-XYZ
    • CIE LUV, CIE L*a*b*
  10. Why do we need tone mapping? Describe two simple methods to tone map an image.

Practical exercises

Please email me your solution as an executable jar file -- make sure to include the source code as well

  1. Find your implementation of Tick 2 for the practical exercises (terrain)
  2. Add a big blue horizontal rectangle to the scene to imitate a water surface. You will need to
    • set up a new vertex buffer, index buffer, move the data onto the GPU as in loadDataOntoGPU
    • create a new pair of vertex and fragment shaders.
    • bind everything (glBindVertexArray and shader) for rendering and call glDrawElements
    • you will need to call glUseProgram(programId); to swap between the terrain shader and the water shader
  3. Change your water to be semi-transparent.
    • Modify the fragment shader to output a non-1 alpha value
    • enable alpha blending in Java before rendering: glEnable (GL_BLEND); glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    • Check the rendering order. Do you render the terrain or the water first?
  4. Add a tiled water texture onto your surface
    • Create or find a suitable tileable water image/texture online
    • Map the water texture onto the surface, make it repeat multiple times
    • Based on the global time, shift the water texture (you will need to pass the time to the shader as a uniform
  5. If you want to make your water even prettier, add normal (bump) mapping