The first approach to render transparent objects is to use polygon stippling. This technique consists of discarding some fragments so that you can see through the object. Think of this as punching little holes in the surface of your object.

OpenGL supports polygon stippling through the glPolygonStipple function. This function is not available in WebGL. You could try to replicate this functionality by dropping some fragments in the fragment shader using the ESSL discard command.

More commonly, we can use the alpha channel information to obtain translucent objects. However, as we’ve seen in the cube example, modifying the alpha values does not produce transparency automatically.

Creating transparency corresponds to altering the fragments that we’ve already written to the framebuffer. Think, for instance, of a scene where there is one translucent object in front of an opaque object (from our camera view). In order for the scene to be rendered correctly, we need to be able to see the opaque object through the translucent object. Therefore, the fragments that overlap between the far and near objects need to be combined somehow to create the transparency effect.

The same idea applies when there is only one translucent object in the scene. The only difference is that the far fragments correspond to the back face of the object and the near fragments correspond to the front face of the object. To produce the transparency effect in this case, the far and near fragments need to be combined.

To properly render transparent surfaces, we need to learn about two important WebGL concepts: depth testing and alpha blending.