How Light Works and Types of Shadows

What is Light?

   If we want to learn how to reproduce light, we need to know how light works in the real world.
   The thing is, it's too complicated. If we try to reproduce it exactly, it will take too long, so the general approach is to look for a way to get a good enough result by analyzing the different effects that form the lighting, decomposing them and combining them to get a good enough result.

   In this article, I will try to summarize these effects and explore them a little bit, so that we understand how they work and improve the ways we render. I'll also try to keep it simple and cover how we approach lighting in unrealistic CGI, real-time CGI, and illustrations so that everyone can learn something from it.

   Let's think of light as a series of rays (it's not, but it's close enough for what we need). Light sources emit rays that spread out into the world. When these rays reach our eyes, we see light reflecting off objects. From this behavior, we can define emission (light being emitted by a light source), reflection (light being reflected off objects), transmission (light being transmitted through an object), and absorption (light being absorbed by an object, heating it up).

Emission

   Light is emitted from a light source when that source is in a high energy state and emits light to move to a lower energy state.

   Most radiation occurs through incandescence: we charge a substance with electrical energy and it gives off energy as light, but there are other sources (black body radiation, fluorescence, phosphorescence, particle acceleration, radioactive decay, lasers, fire, etc.).

   Visually, light sources are very similar, and they usually only change intensity and color, not how they interact with matter.

Reflection

  Light can bounce off an object, giving us reflected light. We divide reflected light into 2 different types of reflection:

•    Diffuse Reflection: A ray of light can slightly penetrate the surface of an object, interacting with its molecules and bouncing off in a random direction. Because the light interacts intensely with the object, some of it is absorbed, and the reflected light becomes colored. Most material reflections work this way.

•    Specular Reflection: Light can reflect at a specific angle and be directed toward the viewer, creating a specular reflection. Since light interacts with an object only briefly, specular reflections usually preserve the color of the light source while ignoring the color of the object.

Transmission

   If a ray of light can pass through an object, we get some effects like:

•    Transparency: A ray of light passes through an object and its direction does not change. This is what happens in real life with most gases.

•    Translucency: Since light can travel at different speeds depending on the medium it passes through, as it passes through different media with different properties, it appears to bend. This happens in real life with water, glass, etc.

   The relative speed at which light travels through a material is called the refractive index of that material. Refraction can also cause other effects such as rainbows, caustics, or prisms.

•   Subsurface Scattering: A transparent object can receive light that interacts strongly with the object (taking on color) and is reflected from it, giving the object an radiant appearance, especially on thin surfaces where light is more likely to penetrate the object.

Absorption

   Light is energy, and when it hits an object, its energy can be absorbed by the object, causing it to heating. In fact, objects can absorb not only visible light, but also other types of invisible light (ultraviolet, infrared, etc.). The absorbed light is invisible and does not affect our images.

Direct and Indirect Lighting

   When we only consider the primary reflection of light, we only consider direct illumination: the light bouncing off an object and straight into the camera. However, light is reflected everywhere (and reflected even more, considering that it is not a particle) and many times.

   So we also need to include additional light in our scenes, which fills in the very dark parts of the shadows and represents these additional rays of light bouncing everywhere. This additional light is called indirect lighting, ambient lighting, or global illumination.

   Indirect lighting is very weak: while one reflection typically accounts for 18% of the original light intensity, two reflections will account for only 3.24% of the original light intensity. However, it is very noticeable because even a small amount of light on a completely dark surface is immediately noticeable.

   Properly implementing indirect lighting is quite complex, as we need to consider the entire scene, how light bounces between objects, how color is added to each object, etc. Some of the most common approaches include:

• Calculate it accurately by tracking how light should bounce around the scene and combine it with direct lighting. This process is obviously the most accurate, but it is very slow in CG and very difficult to depict correctly in an illustration:

• Add a fill/ambient color: Instead of leaving the shadowed parts of our scene completely dark, we use a base color that fills them (usually the color of the sky or the color of the largest light source) to represent how the ambient light fills these dark areas with its reflected indirect light.

• Use the base color of each object: This is often used in illustration. Instead of starting with a black canvas and adding light from each light source, we usually start with base colors and add shadows on top of them. This way, the shadowed areas will retain some of the color that the indirect light illuminated, allowing us to see the base color of the surfaces.

   If we start with a base color and then darken it for the shadowed areas, while preserving the perception of the base color, we recreate the indirect light reaching those shadowed areas.

   Warning: Some people also refer to the base color of an object as the albedo color or diffuse color. Technically, the diffuse color should include shadows (light + shadow), and the albedo color should be a flat color (no light or shadows), but these terms are often used interchangeably.

• Add a fill light: In computer graphics, we can add a fill light (sometimes the same as the ambient color) that illuminates all objects from all angles.

   A similar approach is to capture the environment as a 360º image. and using it as a fill light to fill in shadows with the environment color. For example, we can use SkyLight in Unreal Engine to capture a scene and use it to fill in dark areas, simulating real-time indirect lighting.

   So how can we shape an image using what we've discussed so far? 

   Starting from complete darkness, we add light sources to our environment and calculate direct lighting: light coming from light sources, reflecting off the environment and hitting the cameraer. As we have seen, there is diffuse and specular reflection:

 

   That's fine, but in real life light bounces more than once - we need to include these extra reflections (indirect light) in our scene:

   And besides reflections, light can also pass through objects (refraction):

   When we put everything together, we get our render:

   So what we need to represent light is the sum of direct illumination (diffuse and specular), transmission, and indirect illumination. We can also add some additional effects like caustics, colorization, motion blur, etc., but these are the main parts we need to keep in mind.

   Depending on the media, we approach this differently:

•    In non-real-time CGI, we cast rays from light sources into the scene (ray tracing), track how they bounce back, and put them together to create an image.
•    In real-time CGI, we create temporary images of the scene with the information we need (color, roughness, depth, etc.) and use optimized math formulas that calculate the color of each pixel using the scene parameters and these temporary images.
•    In illustration, we usually start with the diffuse color because it is usually the most important component, add shadows (this is how we get direct diffuse reflections and the basis for indirect lighting), add specular reflections on top of everything, and finally tweak everything until we get the desired result.

Light has to go somewhere

   When light hits an object, the incident light is either reflected, transmitted (passes through the object), or absorbed, and it is conserved: incident light is equal to the sum of reflected, transmitted, and absorbed light. In real life, there are other processes that can affect light, but for rendering they are insignificant.

   Since absorption is invisible, we can reduce the amount of light reflected from an object and consider the rest to be absorbed. However, we cannot increase it, because in that case we would be generating light out of nothing. This is relevant because old CGI lighting models did not respect this law, and we could have objects reflecting more light than they should.

Reflection in Detail

   When light interacts with an opaque object, some of it is absorbed by the object (which heats up as a result) and the rest is reflected. When the reflected light hits the camera or our eyes, we see the object.

   The percentage of light that is reflected from a material is called albedo, and it varies greatly between different materials.

   If we had a material with an albedo of 100, it would reflect all the light. Not only would it be a perfect mirror, it would also be very cold, since the sunlight would simply not heat it directly.

   Typically, new, clean snow has the highest albedo - around 80. The main implication of this is that we should avoid using pure white as a color, since a surface with 100% pure white would have to actively emit light, rather than simply reflect it. Of course, there are other factors to consider (white balance, exposure, eye adaptation), but as a general rule of thumb, you should avoid using pure white and pure black.

   There are two main types of light reflection: specular and diffuse reflection. The sum of these reflections gives us albedo.

   Non-metallic materials (dielectrics) reflect from 2 to 5% of light (on average 4%) specularly and a wider spectrum of light: 0.5-75% diffusely (on average 14%). The sum of reflected light (specular + diffuse) is the albedo value (on average 18%). The rest is absorbed by the material as heat.

   Metals strange, they reflect 50-99% of the light specularly and have no diffuse reflection.

Diffuse Reflections in Detail

   As we have seen, with diffuse reflection, a ray of light can slightly penetrate the surface of an object, interact with it, and be emitted back in a random direction.

Diffuse reflections convey the color of the object.

   In diffuse reflection, light penetrates the outer layers of an object, the object absorbs some of the light (causing it to heat up), and emits light in all directions, which is now colored because it was partially absorbed by the object.

Diffuse bounces light in all directions, everywhere.

   This means that a given point on the object will have the same light intensity no matter where we look at it from.

   The point of the object that is closest to the light will have the greatest brightness, and less illuminated points will be dark. This is a very important difference from specular reflection, where the viewing angle matters.

Surface roughness does not matter for diffuse reflections.

   Since diffuse reflection scatters light everywhere, surface roughness doesn't matter for diffuse reflection: we can polish a red surface and make it smoother, but it will always be red.

Specular Reflections in Detail

   In my opinion, specular reflections are easier to understand because they are what comes to mind when we think of reflection.

   Light bounces off an object at a symmetrical angle and bounces back toward the viewer, creating a specular reflection, like a ball thrown at a wall.

Specular reflections preserve the color of the light.

   Because the light interacts with the object for a very short time, specular reflections preserve the color of the light source while ignoring the color of the object. This is the white highlight we see on a smooth plastic surface: no matter what color the plastic is, this reflection is always the color of the light (usually white), because that is the color of the light source, and the specular highlight does not change it.

Specular highlights

   Specular reflections reflect the entire environment, but the light sources are much brighter than the environment, so often we only notice these light sources as specular reflections. These reflected light sources are commonly called specular highlights.

Specular reflections are view-dependent.

   This type of reflection is view-dependent: we only see light that is perpendicular to the surface we are looking at. If we change the view angle, the highlight will "move (relative to the object)." The reflection intensity will be greater the more parallel the viewing angle is to the surface.

Specular reflections look different depending on the roughness surfaces.

   If the surface is perfectly smooth, the reflected light will look very similar to the original (like a mirror), and if it is rough, the reflected image will be blurry. Instead of modeling microscopic detail to represent these surfaces, computer shaders usually have a way of modeling these details, usually a roughness or smoothness value, which we can adjust with a value or texture.

   Note that all the balls are always red: the color of the object depends on the diffuse reflection, which does not depend on the surface roughness (no matter how much we polish a red ball, it still remains red). Surface roughness affects only specular reflection.

   A specular highlight on a smooth surface looks brighter than a specular highlight on a rough surface because a rough surface scatters light everywhere, while a smooth surface directs it towards the viewer. The amount of reflected light is the same, it's just that the rough surface scatters it, making the highlight larger and dimmer.

Effect Fresnel

   Now imagine we have a stone and a pool filled with water. Let's throw the stone straight into the water, just letting it fall from a great height. Will it bounce?

   Of course not. It will just pass through the water and fall to the seabed. But what if we throw it at an angle? At an angle of 45º the stone will most likely fall down anyway, but at a very small angle the stone will bounce (skipping stones). At some angles, when the direction of the stone's motion is almost horizontal, the stone will bounce rather than pass through the surface.

   The same thing happens with light when it comes to specular bounces.

   If we cast a ray of light perpendicular to a surface, it is more likely to be absorbed by the surface than to bounce off. However, if we cast a ray almost parallel to the surface, it is more likely to be reflected and create a specular reflection.

   This effect is called the Fresnel effect, and it means that surfaces appear more specular when viewed from an extreme angle. Because of this, specularity is calculated at the perpendicular viewing angle, called f0, rather than at any angle.

   One of the most striking examples of this is water: when we look straight down at the surface of water, it is transparent and we can see what is inside the water; and when we look at it horizontally (looking at the sea at the horizon), specular bounces are much more likely, and the water reflects light like a mirror.

   In this image, we see water through water when we look at the nearby rocks, but the distant areas appear more reflective because water has the Fresnel effect: it is much more specular when viewed at a parallel angle, and less specular when viewed at a perpendicular angle.

Metals

   Metallic objects are weird. Metals are very, very dense. So dense that in the real world it is virtually impossible to make metal transparent (gold leaves can be hundreds of atoms wide and still be opaque).

   When light hits a metal surface, most of it bounces back: while most materials have lots of diffuse reflection and some specular reflection, metals have lots of specular reflection and no diffuse reflection. Light simply cannot penetrate the metal surface to interact with the metal atoms, be partially absorbed, and come out as diffuse reflection. Instead, it just bounces back. In a metal object, about 50-99.8% of the light is reflected specularly, and the rest is absorbed.

   What color is a mirror?It's hard to tell because mirrors are made of metals and they reflect most of the light specularly.

   Some metals can also add a bit of color to the reflected light, giving the impression that they have color (gold, copper, etc.), but in reality they just change the color of the reflected light: Specular highlights preserve the color of the light in non-metallic surfaces, but can be changed in metallic surfaces.

   In the case of metallic surfaces, since most of their surface reflects the environment, their appearance can vary greatly depending on the environment and the viewing angle. As a result, they are difficult to draw, and if we wanted to display them correctly in 3D, we would have to "re-render" the entire scene.

   The usual solution is to make these metal parts very rough to make the reflection quite blurry and avoid discernible details that might not fit into any environment.

Transmission

   When a ray of light hits an object, it can pass through it. This process has many names. I decided to use the term "transmission", which is used in ray tracing in CGI.

   One thing to remember is that light must be preserved: if a transparent object has reflections or is colored, the light should be dimmer when it passes through it. For example, when a surface gets wet, it may have a stronger specular reflection due to the water sitting on it. Light that is reflected specularly does not reach the object and does not contribute to diffuse reflection, causing the object to look darker.

   Transmission can take many forms.

Translucency

   When light passes through different media with different properties, it appears to bend. This is what happens in real life with water, glass, etc.

   Light can travel at different speeds depending on the medium it passes through. You may remember that the speed of light is 299,792,458 m/s, but that is measured in a vacuum. When passing through a medium, it may travel slower (this is not 100% true, but let's skip relativity) depending on the refractive index of that medium.

   In some media, light travels faster or slower than in air, and this can cause incident light rays to bend as they pass through the medium in a phenomenon called refraction.

   Highly compressed air is denser than normal air, and light travels through it more slowly. This is why explosions can create visual shock waves: the air is much denser here, and we get the effect of refraction between normal and highly compressed air.

   A completely transparent object is invisible, but it can still be perceived because it bends light, changing the appearance of objects behind it.

   Refraction can also cause other effects, such as rainbows, prisms, iridescent shimmers, etc.

Transparency

   A ray of light passes through an object, and its direction remains unchanged. This is what happens in real life with most gases. A visually completely transparent object is invisible. However, a partially transparent object can be seen.

   A partially transparent object will color objects behind it with its diffuse color. This type of transmission is mainly used as a cheap way to achieve transparency in CGI: in real life, almost all objects have a refractive index different from 1 (air), and will bend light to some degree.

Subsurface Scattering

   Subsurface scattering is a mixture of diffuse reflectance and transparency: light can enter an object, bounce around inside the object with diffuse reflections, and exit on the other side of the object, especially on thin surfaces where the light is more likely to pass through the object.

   Subsurface scattering is colored, its color being a mixture between the diffuse color of the object (due to light rays being diffusely scattered) and the color of the light (due to light rays passing through the object). This can make surfaces appear emissive when viewed from the shadowed side, and is sometimes simulated using emissive materials.

Combining Light Sources

   What if we have different light sources? How do they add up?

   If we take a photo with 4 different light sources on, and 4 photos (or renders) with each individual light source on and the rest off, can we simply stack the individual photos to get the same result?

Yes.

   If we compare the generated image with the image with all the light sources turned on, we will see that that they are almost the same. This means that we can work on each light source separately and add them; lights can be added linearly.

   Well, sort of. While light from different light sources can be added, keep in mind that our eyes adjust to the amount of light we see, and after a certain threshold, our eyes re-adjust, similar to how we stop perceiving a strong smell after a while, to focus on other smells (gamma correction and other effects may also intervene).

   This is another reason to avoid 100% white: our eyes adapt so as not to lose information that we cannot see due to overcrowding of light receptors.

Shadows

   In CGI, we usually start with black for the entire scene and begin adding light. However, when painting, we usually start with diffuse color and add both light and shadows.

   A shadow is the absence of light. Depending on their appearance, shadows can be divided into three groups:

•    Form shadows - shadows that appear on the surface of objects simply because they are less exposed to light. Form shadows occur due to the lack of diffuse reflection: those parts of the object that are illuminated by the light reflect it, and those that are less illuminated (facing away from the light) do not, and they appear darker. These shadows are usually smooth and subtle, and give us a lot of information about the volume of an object.

•    Cast shadows - shadows created when an object or part of an object is between a light source and another object. Unlike form shadows, which only affect the same object, cast shadows can affect nearby objects, blocking them from the light source. These shadows are usually harder and less subtle than shape shadows, and they give us information about the placement of objects in our scene.

•    Ambient Occlusion: When an object gets close to another, light is less likely to hit the space between objects, and that space appears darker. We can simulate this effect by darkening these areas, usually in real-time environments, as a cheap way to simulate light bouncing off the scene, which is a very expensive effect.

    In reality, Ambient Occlusion is a mix of cast and shape shadows, but we separate them to have more creative control over our scenes.

   Just like multiple lights can be combined together, shadows from multiple lights can overlap and become darker.

   However, a single light cannot create overlapping shadows (a mistake we sometimes make when painting light). Each light generates its own set of shadows. A form shadow and a cast shadow cast by the same light do not overlap, but are combined.

Shadows are not always dark.

   Light is reflected everywhere (due to indirect lighting). Some of this light will probably hit the shadowed areas and bounce off them, allowing us to see the color of the areas in shadow.

   The brightness of the shadowed areas depends on the amount of indirect light in our scene: in the desert there is only one light source and no buildings, trees or other objects that can reflect light and fill the shadows with color: we have very little indirect light (we will always have some) and the shadows look dark and have very little color.

   This girl's shadow is very dark because there is only one light source (the sun) and no surfaces where the sunlight can be reflected to fill it.

   On the other hand, on a cloudy day, the clouds reflect light everywhere, the shadows are filled with reflected light, and we can even get to the point where the shadows disappear.

   This woman has almost no shadow: the buildings, clouds and rain reflect light everywhere.

   When we have separate light sources casting shadows, these shadows can overlap. In real life, we mostly have one light source (the sun), so multiple overlapping shadows from multiple light sources look unnatural, and we usually try to avoid them or soften these shadows.

   To avoid this effect, lighting designers use larger light sources that cast softer shadows (such as windows or large lamps) or use reflectors that scatter the light in all directions.

Shadows can have smooth or hard edges.

   Cast shadows can have varying degrees of smoothness of edges. I used to think that it depended on the distance between the shadow and the object casting the shadow, but I was slightly wrong.

   In the case of directional light, such as the sun, all the light rays are parallel (the sun is so far from the earth that when the light rays reach us, they are almost parallel). This creates hard shadows:

   However, when the light source is closer to the object, the shadows appear smoother.

   As we get closer to the object, the rays of light approach it from different angles, smoothing the shadows. The further away from the light source, the softer the shadows will be because the light rays at the edges have traveled a greater distance and, since they come from different angles, they spread out more.

   In comparison, the light rays from the sun are almost perfectly parallel, but have a small spread of 1-1.5º, so we should see soft shadows from direct sunlight, especially at large distances from the object casting the shadow. Increasing the size of the light source also softens shadows.

   You might think that if the sunlight rays are mostly parallel, then the window would let light into the room as parallel rays as well. However, you need to take into account the indirect light coming through the window from all sides, as well as diffraction.

Conclusion

   So, in this tutorial we looked at the main lighting effects to keep in mind when rendering a scene: emission, direct and indirect light reflections (both specular and diffuse), transmission, and absorption.

   We also looked at some of the side effects like metallic objects, refraction, combining multiple lights, and shadows.

   Now that we have an idea of ​​the different parts needed to render a scene, I would like to take a closer look at how we approach these different parts from a non-real-time (using ray tracing), a real-time (using rasterization), and an illustrative approach (looking at the main shading techniques used in the illustration).