Presentation Slides

The following notes are included below in the order they appear in the presentation. Not every slide will have something extra accompanied below. You can think of the notes below as the speaker notes for the presentation, as they'll be useful for understanding the presentation slides if you want to come back to them later or give the presentation yourself.

Light is both a particle and a wave. Here, we care most about light as a particle. Focusing on the particle aspect of light is important because it allows us to model light as a ray. We'll get to this later.

A light particle - a photon - has two key characteristics that are important to us: It has a wavelength, which determines its colour, and it has a direction, which determines where it goes.

Note that we're not discussing refraction here. Refraction is the bending of light as it passes from one medium to another. Reflection is the bouncing of light off a surface. We have two types of reflection: diffuse and specular. Diffuse reflection is the reflection of light from a surface that is not smooth. For example, if we shine a laser on a wall, the light is scattered in all directions. We can see the laser on the wall even if we're not at the same angle as the laser. This is diffuse reflection. The overall interaction of light on a given surface is a combination of diffuse and specular reflection inherent in the material properties of the surface.

We have the angle of incidence and the angle of reflection. When we consider an arbitrary surface, the angle of incidence is the angle between the normal of the surface and the direction of the incoming light. The angle of reflection is the angle between the normal of the surface and the direction of the reflected light. Based on the law of reflection, we can say that the angle of incidence is equal to the angle of reflection.

The normal of a surface is just a vector that is perpendicular to the surface. It's simple to find for objects such as a sphere, where the normal is just the vector from the center of the sphere to the point on the surface (but pointed away from the sphere). For a plane, the normal is just the vector that is perpendicular to the plane.

So, for a cube, the normal will be the same for all places on one face of a cube, and it'll be facing away from the cube.

If we want to go from tracing a single ray to performing actions on an entire scene of objects, we need to be able to represent the scene in a way that we can easily manipulate. We can do this by representing the scene as a collection of objects, each with a position, a size, and a colour. We also have a floor that these objects are sitting on. To view the scene we're looking at today, navigate to WebGL Demonstrations and select the "Scene Geometry" demo. Here, you can view the scene that we've recreated in real life and interact with it.

From where the light source is and the face of the object that's being lit up, we can determine the angle of incidence between the light source and the face of the object. A simple approach is to just make the object brighter the smaller the angle of incidence is. This means that if a face is barely visible to the light source, it won't be as bright as a face that's directly facing the light source. If we break up our object into a grid of squares, we can then determine the colour of each square by determining the angle of incidence between the light source and the normal of the square. Of course, we're ignoring so much here - the fact that light is reflected off of the object, the fact that we might have both diffuse and specular reflection, and much more. But this is a good start. We can improve this model by smoothing out the colour of the object by averaging the colour of the squares that are adjacent to each other. This is called Gouraud shading.

I've mentioned a few different names for the types of shading we've discussed so far. These names aren't really important - you don't have to memorize them, but I want to mention them because they're used in the literature if you want to learn more about these topics. For reference, Phong shading is the standard shading model that's used widely in computer graphics, especially in video games as it can be done in real time (as you can see in the demo).

Let's see what a ray trace would look like in real life using the same scene as before, this time using the real-life scene as a reference. We'll see why we're using our real life demonstration to trace the rays to begin with in a moment. If we start with a single light ray - a laser - we see that the light is reflected off of the objects, using both diffuse and specular reflection. The light rays travel until they either hit the camera, get absorbed, or exit the scene. If we move to a point light source - a flashlight - the scene is fully lit up, and we have tons of light rays bouncing around the scene. This, of course, generates an accurate depiction of the scene (but it's real life, so of course it's accurate)

We first need to take a look at how we're representing our camera. This is dependent on whether we're looking for accurate perspective, or if we're looking to analyze a selection of a scene. If we're looking for accurate perspective, we choose a pinhole camera. The field of view of the camera is given by how close the camera is to the viewing plane (the viewing plane is exactly what we see on the screen). If the camera is further away, we minimize the depth of field. On an infinite distance the depth of field is zero, and we have an orthographic camera where the projection view is parallel to the viewing plane.

If we draw a line from the pinhole to the pixel we're interested in, it forms the beginning of the ray that's already in the direction we want it to go. So if we continue these rays outward into the scene, we can determine what they hit, and therefore what objects are visible directly to the viewer. And all the rays that we trace now all hit the camera, because that's where we started from. We're on our way to a vastly increased efficiency.

The images in this presentation are from the following sources:

Graphics from the video game Minecraft: https://wccftech.com/minecraft-rtx-beta-primer-info-impressions/
Diffuse (left) versus Specular reflection (right): https://en.m.wikipedia.org/wiki/Bidirectional_reflectance_distribution_function
Flat shading versus Gouraud shading: https://electronics.howstuffworks.com/question484.htm
Phong shading: https://en.wikipedia.org/wiki/Phong_shading
Different camera models and their field of view: https://en.wikipedia.org/wiki/Ray_casting
Camera local coordinate system with the "screen" in the Z=0 plane: https://en.wikipedia.org/wiki/Ray_casting
Caustics produced by a water glass: https://en.wikipedia.org/wiki/Caustic_(optics)

Prior to the presentation, the following materials should be prepared in addition to the traditional presentation materials:

• A computer that supports WebGL 2.0. Make sure you can run the demonstrations outlined in the demo switcher page.

• A laser pointer, and a light source such as a flashlight.

• A real-life scene that is the reference for the WebGL scene (see the How To page for how to build this)

• A projector, or a large screen that can be used to display the WebGL scene. Students can view the demonstration themselves using their own devices, but it is recommended that the demonstration be displayed on a large screen so that the entire class can see it.

Here's some tips that will help with the presentation:

• The primary takeaway from the presentation should be that the goal of shading is to accurately represent a real-life scene. As such, some time should be dedicated to the physics principles that govern light in real life. I've found that for students to want to pay attention to this part, they need to understand why we're trying to recreate a real-life scene in the first place (video games, movies, etc). Emphasis on the hook of the presentation.

• The presentation should be interactive. Students should be able to see the demonstration on a large screen, and they should be able to interact with the demonstration themselves. If available, it may be helpful to book a laptop or tablet cart for the class.

• Give ample time for the Phong shading demonstration, as it's the most realistic hands-on demonstration and will likely be the most interesting.

• At the end, when talking about the benefits of ray tracing, emphasize the importance of accuracy in calculating the ray's path. The ray tracing demonstration is a good example of this, as the noise in the image is a result of the inaccuracy of the ray's path.