Baking
When you do a render in a 3D software like Blender, it usually looks better than the model you import into Three.js, no matter how hard you try to get the exact same lighting and colors. This is because of the technique used while making the render.
Ray Tracing consists of casting multiple rays toward each pixel of the render. These rays start with the geometry we are rendering. Next, they test the direction of each light in the scene to see which part of the geometry is illuminated as well as to test whether the directions of the light bouncing off the geometry are colliding with other objects in the scene. Then, for each of these collisions, more rays are being cast as they bounce off other objects. And it goes on and on like this multiple times. All of the information collected by these collisions is then computed to define the final color of that pixel.
The goal is to simulate real-life lighting and enable visual effects like indirect lighting and soft shadows. As an example, if you place a red object close to a white object, you’ll see the white object being tinted with red because rays are bouncing from the red surface to the white surface. In the same way, you’ll see that the red object looks brighter when the surface is close to the white object.
This process results in a beautiful realistic render, but doing one render can take many minutes, even hours.
When we are doing renders with WebGL, we need to do it as fast as possible in order to get a good frame rate. We don’t have the luxury to spend minutes on just one render. For this reason, rendering in WebGL uses cheaper techniques that don’t look as good but at least keep a decent frame rate.
The idea of baking is that we save those Ray Tracing renders into textures that we then use in WebGL instead of using the classic render techniques provided by Three.js.
There is no light, no real-time shadows. It’s just the texture you see in the above example being placed on the geometries.
This way, we will see the Ray Tracing renders directly on the Meshes, and it looks awesome. And when we move around the scene, the performance will be great because all we did was to display a texture on a geometry.
Unfortunately, there are some drawbacks:
- We have to bake everything in the 3D software and it’s a long process.
- We have to load the textures and if you have a complex scene with a lot of objects, you’re going to need a lot of textures. This is bad for loading but it can also result in a short freeze at the beginning of the experience because we need to load those textures into the GPU.
- The lights aren’t dynamic. We can’t move the lights, and we can’t change their intensity or color in real time. We have to do it in the 3D software and re-bake everything.