A Brief Overview of Lighting Techniques Multiple Direct Lights Ambient lighting is one of the simplest techniques for adding indirect lighting to your scenes, and a DirectionalLight paired with an ambient light is one of the most common lighting setups.īut first, let’s take a brief tour of some of the lighting techniques available to us when using three.js. In this chapter, we’ll pair this light with an ambient light. The DirectionalLight currently illuminating our scene is a form of direct lighting. Ambient lights, which are a cheap and somewhat believable way of faking indirect lighting.Direct lights, which simulate direct lighting.In three.js, the light classes are divided into two categories to match the two categories of lighting: However, even when we limit ourselves to only the techniques suitable for real-time use and available in three.js, the number of lighting methods we can use is still quite high.Ĭreating high-quality lighting using three.js is a matter of choosing a combination of these techniques to create a complete lighting setup. Most of these techniques are too slow to use on the web where we have to consider people accessing our app from low powered mobile devices. Some of these techniques simulate direct lighting, some simulate indirect lighting, while others simulate both. Indeed, there are a huge number of techniques for simulating or approximating lighting in the field of 3D computer graphics. Global illumination, of which ray tracing and path tracing are two examples. There is a third category that aims to perform direct and indirect lighting at the same time, called Indirect lighting: light rays that have bounced off the walls and other objects in the room before hitting an object, changing color and losing intensity with each bounce.Direct lighting: light rays that come directly from a light source and hit an object.Instead, as we discussed in 1.4: Physically Based Rendering and Lighting, real-time graphics engines split lighting into two parts: Path tracing are better suited for creating pre-rendered images or animations. However, it takes too much processing power to render frames in real-time using this technique, so ray-tracing and related techniques like Ray tracing can be used to simulate a few thousand lights rays each bouncing a few times around the scene.

Unfortunately for us, computers have trouble simulating the infinite. This creates the beautiful and subtle patterns of light and shadows we see every day in the world around us. In the real world, an infinite number of light rays reflect and bounce an infinite number of times from all the objects in a scene, gradually fading and changing color with each bounce until finally, they reach our eyes or cameras. Along the way, we’ll find the time for a brief review of some of lighting techniques commonly used when working with three.js. In this chapter, we’ll investigate what’s going on here, and explore some methods for improving our lighting setup.

However, as soon as we rotate the camera to see another direction, we find that any faces of the cube that point away from the direction of the light rays don’t receive any light at all!Īny faces of the cube not in the path of the light rays Faces of the cube in the direct path of the light are brightly illuminated. Our scene is illuminated using a single DirectionalLight, and although this type of light fills the entire scene with light rays, all the rays shine in a single direction. Word Count:2555, reading time: ~12minutes Ambient Lighting: Illumination from Every DirectionĪt the end of the last chapter, we discovered a rather glaring problem with our lighting setup.

All light everywhere