WebGL Beginner's Guide

Time for action – creating a transparent wall

1. Open ch6_Transparency_Initial.html in your HTML5 web browser. We have two completely opaque objects: a cone behind a wall. Click-and-drag on 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 the alpha blending is not being enabled. Let's edit the source code and include alpha blending. Open the file ch6_Transparency_Initial.html using your preferred source code editor. Scroll to the configure ...