HW6 · A Whitted ray tracer and the Cornell box

Wolfenstein 3D (1992) drew its walls by casting one ray per screen column: a 2D ray tracer running on a 1992 PC.id Software, Wolfenstein 3D, 1992
Out Thursday November 12 · due Wednesday November 18, 11:59 PM on Canvas · 25 points · Unity or WebGL · hub · schedule · syllabus · all homework
Read before this homework: Ray Tracing §1, the ray through a pixel · §2, sphere and triangle · §4, Whitted ray tracing · Light Transport and PBR (the bridge lecture)

What you build

A ray tracer that writes pixels: the primary ray through a pixel, the two intersections every scene needs, the reflection, and a trace that adds a shadow ray and one mirror bounce. The scene is a closed Cornell box, 96 × 72, lit directly by one point light, with a diffuse sphere and a mirror sphere. Four pixels are checked: a lit floor, a shadowed floor, the red wall seen in the mirror, and the red wall.

JavaScriptC#What it computes
cameraRayCameraRayThe unit ray through the center of pixel (px, py), top-left origin: screen x in [−1, 1] × tan(fov/2) × aspect, screen y × tan(fov/2), d = normalize(sx u + sy v − w).
hitSphereHitSphereThe smallest t > 10−6 of the quadratic; null (C#: −1) on a miss.
hitTriangleHitTriangleMöller–Trumbore: (t, u, v) with u weighting b and v weighting c; null (C#: false) on a miss, |det| < 10−12, or t ≤ 10−6.
reflectReflectd − 2 (d · n) n.
traceTraceMiss: black. P = hit + 10−4 N. Mirror: black at depth ≥ maxDepth, else mirror × trace of the reflected ray. Diffuse: albedo × (ka + (1 − ka) V max(0, N·L)), V = 0 when a hit lies closer than the light along P → light.

The numbers a correct build reproduces

Each row is one check, run on your functions with the published inputs below. The same table appears under the scene in the runner and in the Unity Console.

#CheckExpectedTolerancePoints
1cameraRay through pixel (89, 62) of 150 × 150: direction(-0.372, -0.3696, -0.8515)0.00112
2hitSphere: nearest t on the radius-1.2 sphere6.22810.00112
3hitTriangle (Möller–Trumbore): t, u, v(1, 0.25, 0.25)0.00112
4hitTriangle: the ray from (1.5, 1.5, 1) misses (null) while the one from (0.5, 0.5, 1) hits(true, true)exact6
5reflect (0.6, −0.8, 0) about (0, 1, 0)(0.6, 0.8, 0)0.0000016
6Cornell box, pixel (24, 63): lit floor(0.6933, 0.6933, 0.6933)0.00212
7Cornell box, pixel (36, 66): floor in the diffuse sphere’s shadow(0.08, 0.08, 0.08)0.00214
8Cornell box, pixel (54, 56): the red wall seen in the mirror sphere(0.456, 0.0912, 0.073)0.00214
9Cornell box, pixel (6, 30): the red wall(0.5834, 0.1167, 0.0933)0.00212
The published inputs
{
 "cam": {
  "eye": [ 3, 3, 6 ],
  "at": [ 0, 0, 0 ],
  "up": [ 0, 1, 0 ],
  "fov": 28
 },
 "size": 150,
 "pixel": [ 89, 62 ],
 "sphere": {
  "c": [ 0, 0, 0 ],
  "r": 1.2
 },
 "tri": {
  "a": [ 0, 0, 0 ],
  "b": [ 2, 0, 0 ],
  "c": [ 0, 2, 0 ],
  "o": [ 0.5, 0.5, 1 ],
  "d": [ 0, 0, -1 ],
  "missO": [ 1.5, 1.5, 1 ]
 },
 "reflect": {
  "d": [ 0.6, -0.8, 0 ],
  "n": [ 0, 1, 0 ]
 },
 "cornell": {
  "cam": {
   "eye": [ 0, 1, 2.8 ],
   "at": [ 0, 1, 0 ],
   "up": [ 0, 1, 0 ],
   "fov": 40
  },
  "width": 96,
  "height": 72,
  "lit": [ 24, 63 ],
  "shadow": [ 36, 66 ],
  "mirror": [ 54, 56 ],
  "wall": [ 6, 30 ]
 }
}

Implement and replace

Build each function from primitives (dot, cross, normalize, length, component access, sqrt, tan.) and use the engine's own helper, where one exists, only to check your result. These are off limits in your submission:

TrackOff limits
WebGL (JavaScript)THREE.Raycaster; Ray.intersectSphere, intersectTriangle, intersectBox; Vector3.reflect; anything that renders the scene for you.
Unity (C#)Physics.Raycast and every collider; Ray, Plane and Bounds helpers; Vector3.Reflect; Camera.ScreenPointToRay, ViewportPointToRay. The image is a Texture2D written in C#.

Getting started

WebGL track.
  1. Get the homework starter repository (about 2 MB): git clone https://github.com/mgav-uwb/UWB-CSS-551-AU26-homework.git, or Code, then Download ZIP. It gains each homework the day it goes out; git pull fetches it.
  2. In its root folder run python3 -m http.server 8000 and open http://localhost:8000/homework/run.html?hw=hw06.
  3. Edit lib/skeletons/hw06.js, the only file you change, and reload: the Checks table under the scene compares your numbers with the ones below.

The unfilled skeleton runs on this site too, so you can see the page before you start. The setup, the blank page a file opened from disk gives, and how to read the Checks table are in WebGL and three.js for This Course.

Unity track.
  1. In Unity Hub, create a new project with the 3D (Built-In Render Pipeline) template in editor 6000.3.11f1.
  2. From the homework starter repository, copy the files in homework/hw06/unity/ into Assets/HW06/.
  3. Create an empty GameObject, add the Checks component (namespace CSS551.HW06), and press Play: the Console lists every check with your value and the expected one.
  4. Edit HW06.cs; the other files are given.

The Unity files compile against a stand-in for the UnityEngine API and pass their checks with the reference solution, but they are new this quarter and have not yet been opened in the Unity editor. If one does not compile in 6000.3.11f1, post the error on the Canvas board and use the WebGL track meanwhile.

Submitting and grading

Grading runs your functions twice: on the published inputs above and on a second set of inputs that is not published. A check earns its points only when your value is within its tolerance on both, so the numbers have to come from the math. The rubric score is the sum of the points earned, out of 100; it counts as 25 course points (the rubric score divided by 4). A submission that does not load or compile earns no check points. Name any collaborators and tools in the submission comment.

Late tokens. You have two for the quarter. Declare one in the submission comment to extend this homework by 48 hours without penalty. Without a token, late work is not accepted, and nothing is accepted after Friday, December 11.