Clipping a layer with WebGL

In the last example, called ch07_clip_webgl, we will go through some of the key aspects of working with WebGL and OpenLayers 3. WebGL is an exceptionally rich JavaScript port of OpenGL, which is capable of performing advanced 3D GPU calculations. However, as the OpenLayers 3 library already uses it and parameterizes it, when we use the WebGL renderer in the precompose and postcompose rendering hooks, we have only a limited number of possibilities. For example, OpenGL can automatically blend textures into each other with some blending options. However, as OpenLayers 3 already uses this capability in order to draw the layers on each other with a possible transparency option, we cannot change the global blending property without messing up the entire rendering process.

Clipping, or in this case, masking parts of a layer, is a possible WebGL operation with the library. Our goal is identical to the previous clipping example: we create a 100 x 100 pixels peeking window...