We have shown you the framework for solving the coursework at https://uclcg.github.io/uclcg/.

You should start by extending the respective example there. The programming language is WebGL and the OpenGL ES Shading Language (GLSL). Here is a quick reference for GLSL functions that you will commonly use in your coursework, e.g., reflect and sin.

This should run in any browser, but we formerly experienced problems with Safari and thus recommend using a diferent browser such as Chrome. Do not write any answers in any other programming language, in paper, or pseudo code. Do not write code outside the #define blocks.

Remember to save your solution often enough to a  .uclcg ile. In the end, hand in that ile via Moodle. The total points for this exercise is 100.

Please refer to Moodle for the due dates.

Above, the scene from this coursework, rendered with the simple initial ray-tracer you are asked to extend.

1    New primitives: Plane and cylinder (20 points)

We have added deinitions of planes (a normal n and a distance r to the origin) and cylinders (an orientation  o and a radius r) to the scene. You are asked to code the ray-plane (5 points) and ray-cylinder (10 points) intersections, and explain how they work (5 points). Pay attention on how Sphere is intersected. Stick to  the same function signature for Plane and Cylinder that contains HitInfo, including normals and material.

2    Casting shadows (10 points)

We have discussed how shadows, relections and refractions work and how recursions can be unrolled into loops under some conditions. The framework contains the skeleton of such a traversal, but without the code for shadows, relection and refraction.

First, add shadow tests to the shading (10 points).

3    Adding relections and refractions (24 points)

The code already contains the loop to perform the ray traversal iteratively, what remains to be added is code  for computing the relection direction (12 points) and refraction direction. Refraction direction is subdivided  into two tasks:  1) the main code low for bouncing rays and including the refractive constant (10 points) and  2) using the enteringPrimitive lag properly for keeping track of IORs (2 points) for a total of (12 points).

Note how objects far away enough behind the glass sphere appear mirrored.  Although not shown here, objects that are behind and near the glass sphere would just appear distorted.

4    Fresnel (10 points)

The image with relection and refraction looks okay, but the glass likely does not look like glass as it shows relection and refraction at equal strength all over the sphere.  Such an image is shown above.  Here, and in reality, relection and refraction strength vary so that wrelect  and wrefract  sums to one or less, so here we simply assume wrelect  = 1 - wrefract. This weighting depends on the view direction and the normal at the hit point. The relection is typically strong on grazing angles close to the edge of the sphere, while the refraction is strongest in the centre. Do some research to ind out how those weights could be computed and tell us what you used (5 points) and implement it (5 points) in the function fresnel.  A simple implementation such as using a single dot product or the approximation by Schlick could be a good starting point.  The image above was produced using the dot product solution, the Schlick one might look diferent.

5    Shine on, you crazy diamond!  (36 points)

In this task, you are asked to develop a convex polytope, which hopefully will be a diamond.

A convex polytope is comprised of multiple planes. Planes should be familiar to you as deined in Sec. 1 by a normal and a distance. The normal of each plane is deined to point towards the “outside” of the polytope so each plane splits the 3D space into an outer and an inner part. The union of all inner parts will be the polytope.

The irst component asks you to implement an intersection routine for the polytope (18 points) in the function intersectPolytope. By doing so correctly, you will see a spinning cube as below (you can press the play button on the top to watch the animation, and if it runs too slowly please adjust the resolution). Please do not use direct quad or triangle intersection code from the Internet but develop something speciic to this object.

Next, let’s carve it into a diamond. We will not directly give the deinition code of the diamond, and only show you the desired image, with a couple of key numbers.  Our diamond shape has three degrees of freedom: They are height, width, and slope, all illustrated by the following igures. Note that we have a right-hand coordinate system whose X-Y plane is parallel to our 2D screen.

You are asked to implement a function called loadDiamond (12 points), which parses the given diamond speciications and returns the corresponding diamond polytope centered at the origin (0, 0, 0). One example with the speciication  (height=8.0,  width=4.37,  slope=70。) is shown below and also what you need to display. Please refer to loadCube function for an example that loads six planes and forms a cube polytope.