Let's cover an example of how we'd make an object transparent:

1. Open ch06_11_transparency-initial.html in your browser. We have two completely opaque objects: a cone behind a wall. Click and drag the canvas to move the camera behind the wall and see the cone, as shown in the following screenshot:

2. Change the wall alpha value by using the provided slider.
3. As you can see, modifying the alpha value does not produce any transparency. The reason for this is that alpha blending is not enabled. Let's edit the source code to include alpha blending. Open the ch06_11_transparency-initial.html file in your source code editor. Scroll to the configure function and find these lines:

gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);

4. Below them, append the following lines:

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

5. Save your changes as ch06_12_transparency-final.html and load this page on your web browser.
6. As expected, the wall changes its transparency as you modify its alpha value using the respective slider.
7. Remember that in order for transparency to be effective, the objects need to be rendered back to front. Let's take a look at the source code. Open ch06_12_transparency-final.html in your source code editor.
8. The cone is the farthest object in the scene. Hence, it is loaded first. You can check that by looking at the load function:

function load() {
  scene.add(new Floor(80, 20));
  scene.load('/common/models/ch6/cone.json', 'cone');
  scene.load('/common/models/ch6/wall.json', 'wall', {
    diffuse: [0.5, 0.5, 0.2, 1.0],
    ambient: [0.2, 0.2, 0.2, 1.0]
  });
}

9. It occupies a lower index in the scene.objects list. In the render function, the objects are rendered in the order in which they appear in the scene.objects list:

scene.traverse(object => {
  // ...
});

10. What happens if we rotate the scene so that the cone is closer to the camera and the wall is farther away?
11. Open ch06_12_transparency-final.html in your browser and rotate the scene such that the cone appears in front of the wall. Decrease the alpha value of the cone while the alpha value of the wall remains at 1.0.
12. As you can see, the blending is inconsistent. This does not have to do with alpha blending because in ch06_12_transparency-final.html, the blending is enabled. It has to do with the rendering order. Click on the Wall First button. The scene should appear consistent now:

13. The Cone First and Wall First buttons use a couple of new functions that we have included in the Scene class to change the rendering order. These functions are renderSooner and renderFirst.
14. In total, we have added these functions to the Scene object to deal with rendering order:
    • renderSooner(objectName): Moves the objectName object one position higher in the Scene.objects list.
    • renderLater(objectName): Moves the objectName object one position lower in the Scene.objects list.
    • renderFirst(objectName): Moves the objectName object to the first position of the list (index 0).
    • renderLast(objectName): Moves the objectName object to the last position of the list.
    • renderOrder(): Lists the objects in the Scene.objects list in the order in which they are rendered. This is the same order in which they are stored in the list. For any two given objects, the object with the lower index will be rendered first.

15. You can use these functions from the JavaScript console in your browser and see what effect these have on the scene.

What just happened?

We took a simple scene where we implemented alpha blending. After that, we analyzed the importance of the rendering order in creating consistent transparencies. Finally, we presented the new methods of the Scene object that control the rendering order.