In this interactive article, we will explore the physical phenomena that create light and the fundamental laws governing its interaction with matter. We will learn how our human eyes capture light and how our brains interpret it as visual information. We will then model approximations of these physical interactions and learn how to create physically realistic renderings of various materials.
We are all familiar with light: it’s the thing that allows us to see the world, distinguish colors and textures, and keeps the universe from being a dark, lifeless void. But precisely defining what light is has proven to be a tricky question.
Throughout history, many philosophers (and later, physicists) studied light in an effort to demystify its nature. Some ancient Greeks considered it to be one of the four fundamental elements that composed the universe: beams of fire emanating from our eyes.
Descartes proposed that light behaved like waves, while Newton thought that it consisted of tiny particles of matter called corpuscles.
Each of these more or less scientific theories explained some aspects of light's behavior, but none could account for all of them in a single, unified framework. That was until the 1920s when physicists came up with quantum electrodynamics. This theory is, as of now, the most accurate way to describe every interaction of light and matter.
You can hover the diagram below to see which light's phenomena can be explained using each model:
For the purpose of computer graphics, the ray optics model is accurate enough at simulating light interactions. But for the sake of scientific curiosity, we will explore some aspects of the other models, starting with electromagnetism.
One of the fundamental properties of matter is the electric charge, and it comes in two types: positive and negative.
Charges determine how particles interact: charges of the same type repel each other, while opposite charges attract.
The amount of force affecting two charged particles is calculated using Coulomb's law:
Where is a constant, and are the quantities of each charge, and is the distance between them.
You can drag around these charges to see how the electric force affects them:
Every charge contributes to the electric field, it represents the force exerted on other charges at each point in space. We can visualize the electric field with a or a :
Another way to visualize the electric field is by coloring each point in space with a color gradient representing the force experienced by a small charge at that point:
Imagine a moving object carrying a positive electric charge placed under a cable carrying an electrical current.
From , the object and the negative charges in the wire are moving, and since the positive and negative charges in the cable compensate each other, the object doesn't experience any force.
In the , it appears to be static alongside the negative charges, while the positive charges are moving to the left, and the object still doesn't get affected by any force.
Now if we take into account , the moving charges in the wire appear "stretched" due to relativistic effects, causing a change in the distribution of charges. This stretching leads to a repulsive force between the object and the wire, which we interpret as magnetism.
Maxwell's equations describe how electric and magnetic fields are created and interact with each other. We will focus on the third and fourth equations.
Maxwell's third equation, known as Faraday's law of induction, shows how changing magnetic fields can generate electric currents.
An example of this is moving a magnet inside a coil, which induces an electric current in the wire due to the changing magnetic field.
This is the principle behind electric generators: Mechanical energy (like the flow of steam) is used to move magnets inside coils (a turbine), converting it to electrical energy through electromagnetic induction.
By moving the magnet left and right, we can see the voltmeter picking up a current and the electric charges in the coil moving back and forth:
Maxwell's fourth and final equation, Ampère's Law, illustrates how electric currents (moving charges) produce magnetic fields around them. This is the basis of how electromagnets function:
Together, these laws demonstrate how electric and magnetic fields are interdependent. A changing magnetic field generates an electric field, and a changing electric field generates a magnetic field.
This continuous cycle enables self-sustaining, self-propagating electromagnetic waves, which can travel through space without requiring a medium.
Electromagnetic radiation consists of waves created by synchronized oscillations of electric and magnetic fields. These waves travel at the speed of light in a vacuum.
The amplitude of a wave determines the maximum strength of its electric or magnetic field. It represents the wave's intensity or "brightness". In quantum terms, a higher amplitude corresponds to a greater number of photons.
The frequency of a wave determines the energy of the individual photons that compose it. Higher frequencies correspond to shorter wavelengths and more energetic photons.
When the wavelength falls between approximately 400 nm and 700 nm, the human eye perceives it as visible light.
While other wavelengths are invisible to the human eye, many are quite familiar in everyday life. For example, microwaves are used for Wi-Fi and cooking, X-rays are used in medical imaging, and radio waves enable communication.
Some insects, like bees, can see ultraviolet light, which helps them locate flowers by revealing hidden patterns and markings created by specialized pigments, such as flavonoids, that reflect UV wavelengths.
On the other end of the spectrum, gamma rays are highly energetic and can be dangerous, they are generated by radioactive decay, nuclear bombs, and space phenomena like supernovas.
There are many ways for light to be generated, the two most common ones we encounter everyday are incandescence and electroluminescence.
Incandescence is the process by which a material emits visible light due to high temperature. It is how incandescent lightbulbs and the sun generates light.
An incandescent lightbulb produces light through the heating of a filament until it starts glowing. The filament is made of tungsten, an element with a high melting point, high durability, and a positive temperature coefficient of resistance, which means its resistance increases with temperature.
When we increase the current flowing through the filament, it starts heating up (Due to Joule heating), which increases the resistance in turn causing more heat to get dissipated. This feedback loop stabilizes at around 2500°C.
This heat makes the electrons in the filament wiggle and collide with each other, releasing photons in the process. This radiation can be approximated as Black-body radiation.
The Sun also generates light by incandescence, but unlike the lightbulb's filament glowing via Joule heating, the Sun’s energy is produced by nuclear fusion in the core, where hydrogen nuclei fuse to form helium and release photons as gamma rays.
These photons travel from the core through the radiative zone, getting absorbed and remitted countless times while shifting to longer wavelengths. After hundreds of thousands of years of bouncing around, the photons make it to the surface of the Sun, called the photosphere, where they get radiated away.
Most (~49%) of the sun's emissions are in infrared, which is responsible for the heat we get on Earth, ~43% is visible light and the ~8% left is ultraviolet.
An interesting fact is that illustrations of the Sun's cross-section typically depict the interior with bright orange or yellow colors. However, if we could actually see a cross-section of the Sun, even the hottest regions like the core would appear dark and opaque, because the radiation generated there isn't in the visible spectrum.
Another way to generate light is by electroluminescence, this is the phenomenon that powers LEDs
The main component of a light-emitting diode is a semiconductor chip. Semiconductors are materials whose electrical conductivity can be modified by mixing them with impurities in a process known as doping.
Depending on the type of impurity (called the dopant) used in the mix, the semiconductor can be turned into either an n-type, which has extra electrons freely moving around, or a p-type, which has a lack of electrons and instead carrying an electron "hole", also moving around and acting as a positive charge.
When you stick a p-type and an n-type semiconductor side by side, they form a p-n junction. When a current flows through the junction, the electrons and the holes recombine and emit photons in the process.
Aside from incandescence and electroluminescence, which are the two most common sources of light we encounter in everyday life, light can come from other places. Some materials glow when exposed to ultraviolet radiation, others absorb that radiation and re-emit it after some time. Some animals like fireflies use special enzymes to produce light. You can read this page to learn more about other sources of luminescence.
In the previous chapter, we examined the nature of light and the various methods by which it can be emitted, we will now focus on how it interacts with matter.
When a photon hits a material, it interacts with the electrons in the atoms and molecules of that material, then two things can happen, it can either be absorbed or scattered.
The electrons occupy atomic orbitals: regions around the nucleus of the atom where an electron is most likely to be found. A higher orbital corresponds to a higher energy level of the electron.
If the photon has the energy needed to excite the electron to a higher energy level, the photon can be absorbed. Eventually the electron returns to a lower level and releases the energy as heat.
If the photon does not get absorbed, its electric field will make the electrons oscillate in return and generate secondary waves that interfere constructively and destructively with the photon waves in complicated ways.
We can simplify these complicated interactions by making a few assumptions about the material:
We can use Maxwell's equations to show that such a perfect flat material splits the incoming light waves into two parts: reflected and refracted.
The angle of reflection is equal to the angle of incidence relative to the normal of the surface, as per the law of reflection:
The angle of refraction is determined by how much slower (or faster) light travels through the material, that speed is defined by the index of refraction, and the angle is calculated using Snell's law:
At a and refractive indices light is no longer refracted and seems to disappear.
The amount of light that is reflected and refracted is calculated using Fresnel equations.
However, computing the full Fresnel equation in real time can be slow, so in 1994 Christophe Schlick came up with an approximation.
First we compute the reflectance at zero degrees from the normal:
Then we plug in the approximation function for the reflectance:
The transmitted (or refracted) light simply becomes:
If we try the where the refracted ray disappeared, we can now see it getting reflected back inside the medium, this is called total internal reflection.
Total internal reflection gives rise to an interesting phenomenon called Snell's window. If you dive underwater and look up, the light above the surface is refracted through a circular window 96 degrees wide, and everything outside is a reflection of the bottom of the water.
This is what it looks underwater:
Like we saw earlier, we can explain light reflecting and refracting using different models, depending on the size of the surface irregularities we are considering.
For example, wave optics explains light interacting with matter as light waves diffracting on the surface nanogeometry.
If we zoom out a bit and use ray optics, we consider light as straight line rays that reflect and refract on the surface microgeometry. With this model we can use the optical laws we described earlier: law of reflection, Snell's law, Fresnel equations.
Now for rendering, we can zoom out even further and consider one pixel at a time, each pixel contains many microgeometry surfaces that we call a microfacet. We can use a statistical average of the microfacets in a pixel to simulate the appearance of the surface at that pixel, without considering each individual microfacet which would be unfeasible in real time.
| Size | Model | Phenomenon |
|---|---|---|
| Nanogeometry | Wave optics | Light diffraction |
| Microgeometry | Ray optics | Reflection/refraction, change in local normal |
| Macrogeometry | BRDF | Statistical average over a pixel, wider cone -> more roughness |
Here we can see a microgeometry surface, changing the roughness makes it more bumpy and the microfacets normals aren't aligned anymore:
At the macrogeometry level, a bigger roughness value means light rays have a wider cone where they can spread out. The function that describes this cone is called bidirectional reflectance distribution function, we will discuss it in the next chapter.
In our microfacet model, we distinguish two types of materials by the nature of their interaction with light: metals and non-metals.
Metals have a sea of free electrons that absorb light very easily when the photons enter a few nanometers deep inside the surface. The light that isn't absorbed is reflected equally across the visible light spectrum, this is why metals have that distinct "silvery" gray color.
Notable exceptions are gold, copper, osmium and caesium.
Changing the roughness of a metal only changes its specular reflection, making it more or less mirror-like. But there is no diffuse reflection at all.
Also called dielectrics, these are materials that do not conduct electricity (insulators). They include plastic, wood, glass, water, diamond, air...
When a photon hits a dielectric material, it only gets absorbed if it's energy matches the electron's energy in the material. So light either gets reflected, and the specular reflection depends on the roughness of the surface.
The light can also get refracted inside the dielectric material, it bounces around and interacts with the pigments inside the material until it exits the surface, this is called diffuse reflection.
If we take the example of a red apple. When we shine a white light (which contains all visible wavelengths) on it, the apple's pigments (anthocyanins) absorb most of the wavelengths like violet, blue and green wavelengths, thus decreasing the intensity of those colors from the light. The remaining wavelengths, mostly red, gets scattered off the apple's surface making us perceive the apple as red.
We can characterize the incoming light by describing the amount of energy it carries at each wavelength using a function called the Spectral Power Distribution or SPD for short.
For example, below is the SPD for D65, a theoretical source of light standardized by The International Commission on Illumination (CIE). It represents the spectrum of average midday light in Western Europe or North America:
We can compare this SPD to AM0, which is the measured solar radiation in outer space before entering Earth's atmosphere. Notice the absence of a dip in the ultraviolet range:
And here is the SPD of a typical tungsten incandescent light:
The SPD shows us how much of each "color" a light is composed of. Another interesting function we can look at is called the spectral reflectance curve, which shows the fraction of incident light reflected by an object at each wavelength, effectivly representing the color of said object.
Going back to our apple example, since it reflects most of its light in the red wavelength, its spectral reflectance curve might look like this:
The light we see is the combination of the light spectral power distribution with the object spectral reflectance.
If we shine a light on our red apple, depending on the wavelengths of the light, the final color we see changes. A makes the apple appear red, because it's like multiplying the apple's color by one. We get the same result with a , because the apple reflects mostly in the red spectrum.
However if we shine a , besides the leaf, the rest of the apple doesn't reflect any light, thus appearing black.
On the top right you can see the SPD of the flashlight, under it the reflectance curve of the apple, and the resulting reflected light below it:
If we now add a banana and shine a , we can obviously tell the apple and the banana apart, one being red while the other is yellow.
But what happens when the light is ? Both objects appear reddish to our eyes, because the banana doesn't have any green light to reflect, making it lose its yellow color. This phenomenon is called metamerism.
You can display the or the :
There are different types of metamerism, depending on when it happens during the light transport process. The apple and banana example is called illuminant metamerism, where objects that reflect light differently appear the same under some specific illumination.
Observer metamerism is when objects appear different between observers, a good example of this is colorblindness.
The rendering equation gives us the light reflected towards a direction at a point by summing all the incoming lights at that point coming from direction in the hemisphere , weighted by the BRDF at that point and the cosine term.
Let's peel off this equation step by step, starting with the easiest part:
When a beam of light hits a surface, the area it touches is inversly proportional to the cosine of the angle of incidence. When the angle of incidence is , the area is at minimum and the intensity is concentrated, but the more the angle gets, the larger the area and the intensity gets spread out.
The BRDF is arguably the most important part of the rendering equation, it characterizes the surface of our material and its appearance. This is where the we can apply the microfacet theory and energy conservation to make our rendering model physically based.
It takes as input the incoming and outgoing light direction, and the roughness of the surface . It equals the diffuse and the specular components weighted by their respective coefficients and .
There are many different BRDFs, the most common in realtime rendering is the Cook-Torrance specular microfacet model combined with Lambertian diffuse model.
The lambertian diffuse component is the diffuse color, called albedo, multiplied by the cosine factor. But since we already have the cosine factor in the rendering equation, the diffuse equation becomes:
The Cook-Torrance specular component itself has three components: the normal distribution function , the geometric function and the Fresnel equation .
The normal distribution function is an approximation of the number of microfacets oriented in such a way that they will reflect light from the incoming direction to the outgoing direction .
The one we will use is the Trowbridge-Reitz GGX function:
is the halfway vector between the incoming and outgoing directions, we calculate it like this:
Some incoming rays get occluded by some microfacets before they get a chance to bounce off to the outgoing direction, this is called shadowing. Other rays get occluded by microfacets on their way to the outgoing direction, this is called masking. The geometric function approximates this effect.
Here we can see the shadowed rays in red and the masked rays in blue. The yellow rays succesfully reflected to the outgoing direction:
We will use the Schlick-GGX geometric function:
Where:
Like we discussed in the previous chapter, we will use the Fresnel-Schlick approximation which is fast for realtime rendering and accurate enough:
Now we can combine the diffuse and specular components to get our final PBR render:
Here is a grid of spheres with different roughness and metallic values on each axis:
Usually the metallic values is either 0 or 1, but it is useful in PBR rendering to consider intermediate values to smoothly interpolate between metals and non-metals. Take this rusted metal material for example:
Physically based rendering is a very vast topic and there is a lot more to cover.
In the chapter about the physics of light, I omitted the quantum explanation of light's behaviour using probability amplitudes. We didn't talk about the double slit experiment or the wave-particle duality. I may cover this in the future when I learn more about it, for now I'll leave you with this quote from Richard Feynman's QED book:
The theory of quantum electrodynamics describes Nature as absurd from the point of view of common sense. And it agrees fully with experiment. So I hope you accept Nature as She is — absurd.
We didn't talk about polarization and assumed all our light sources are unpolarized, this isn't very important for general rendering but can be useful for research.
We focused on surface rendering, in the future I will cover volume rendering, subsurface scattering, effects like optical dispersion, thin-film interference/iridescence...etc
There are a lot more implementation specific details. Whether we are implementing PBR in raytracing or rasterization, we need to use optimization techniques to make the rendering faster while still being accurate. Examples that come to mind are prefiltred envmaps and importance sampling (or efficient sampling in general).
This article is mainly based on this SIGGRAPH talk by Naty Hoffman and Physically Based Rendering: From Theory To Implementation
My main inspiration for writing interactive articles is this fantastic blog by Bartosz Ciechanowski. A lot of interactive demos in this article are similar to the ones in this post.
Other resources include LearnOpenGL, the ScienceClic youtube channel, and 3Blue1Brown of course.
I can't recommend enough the famous book QED: The Strange Theory of Light and Matter by Richard Feynman.