Time for Action: Creating a Transparent Wall

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...