In this assignment, you will implement basic rendering algorithms on GPUs. Completing this assignment will help you understand how to utilize fragment shaders for various rendering tasks. You will explore different techniques such as rasterization, ray tracing, and ray marching, each of which plays a crucial role in modern rendering pipelines. The assignment consists of multiple tasks, as described below.

Base code

Once you downloaded the base code from Piazza and started a local web server, click here to open c_rendering.html. Make sure to start a local web server if the link does not work. You will need to extend this base code to implement the tasks outlined below within fragment shaders. Do not modify the vertex shader or the Javascript part to complete the tasks, except for Task 5.

Task 1: Rasterization

Implement a rasterization algorithm to draw a given triangle based on an inside-outside test performed in a fragment shader. Define the color of each pixel according to the barycentric coordinates (i.e., visualize them as RGB). Your code should run this task when uniforms.renderingType == 0.

Task 2: Ray tracing

Implement a ray tracing algorithm to render spheres in a fragment shader. Your scene should have two spheres that are overlapping with each other in 3D, so that a part of each sphere is hidden by another sphere. Make your spheres moving according iTime to render animation. Your implementation should cast rays from the camera (which is already set up in the base code) into the scene and determine the closest intersections with the spheres. Determine the color of each pixel on the sphere based on abs(normal) where normal is the normal vector at the intersection point. Your code should run this task when uniforms.renderingType == 1.

Task 3: Ray marching

Implement a ray marching algorithm for rendering an implicit surface in a fragment shader. You should define the implicit surface using a mathematical function and visualize it accordingly. Render exactly the same scene geometry as Task 2 and determine the color of each pixel in the same way as Task 2. When the number of ray marching steps is high enough, your rendered images should be almost identical to the ray traced images in Task 2. Minor differences will not be penalized, but major differences like missing one sphere entirely and/or incorrect occlusion will be penalized. Your code should run this task when uniforms.renderingType == 2. We may reduce the number of ray marching steps to check your code when grading.

Task 4: Shading and shadowing

Choose either the ray tracing (Task 2) or ray marching (Task 3) to implement simple shading and shadowing techniques. Implement the Lambertian model for shading and shadow ray tracing to determine if a shading point is in shadow of another object. Be sure to demonstrate your result by rendering a scene that clearly features both, and mention which approach (either ray tracing or ray marching) you chose in your README file. Your code should switch to perform this task when uniforms.shadingType == 1. If you are using ray marching, you may now increase the number of steps large enough to avoid any major artifact.

Task 5: Demo

Extend any of the above tasks to render something more visually interesting. You are free to add more shapes (rather than spheres only) and/or implement more advanced rendering techniques if you want. Document the techniques you used in your README, and ensure that your final demo showcases the capabilities of the rendering algorithms you have implemented. Please keep the key controls for showing the results for Task 1 to Task 4 as they are, and if you want to add, add another key control (with a note in README) to enter the demo mode for Taks 5.

Submission

The submission process for this assignment is basically the same as the one for Assignment: Warm-up. See Assignment: Warm-up for instructions about how to prepare your submission. If you are doing something extra, be sure to document them in your README. If your changes are so radical that your modified program is incompatible with the original specification for each task, you must include a "compatibility mode" that makes the interface behave like the requirements here, or consider creating an entirely separate code.