02560 Web Graphics and Scientific Visualization

Week 10 - WebGL limitations and extensions

WebGL is a rather limited subset of functionality out of the full OpenGL. We oftentimes run into the problem that some things are not possible, although they would have been possible with traditional OpenGL. The reason why WebGL is so limited is that it (at least in its first version) should be able to run on most devices including tablets and smartphone platforms.

Some examples of problems that we have encountered due to the limitations of WebGL:

  1. Week 7 (wireframe rendering): Fragment program partial derivatives are not available for approximately determining the slope of the geometry covered by a pixel.
    This means that it is harder to maintain a constant line width in the wireframe rendering.

  2. Week 8 (surface reconstruction): The number of indices in an indexed face set is limited to 2^16 = 65,536 indices.
    This means that triangle meshed reconstructed from a point cloud must be divided in smaller chunks (and dealing with the seams is tedious).

  3. Week 9 (volume depth): Texture values are always clamped to [0,1].
    This means that render-to-texture for general purpose computations (GPGPU) is more cumbersome as we must always scale the values (which reduces precision).

  4. Week 10 (volume visualization): 3D textures are not available.
    This means that 3D textures must be packed into 2D textures and linear interpolation between layers must be done manually.

It is important to learn how to most easily deal with these shortcomings of WebGL. If we are in luck, the problems we encounter have already been solved. WebGL is continuously being developed by the KHRONOS group which is a non-profit industry consortium creating open standards for graphics, parallel computing, and more. Before developing code to work around some missing functionality, one should always check the WebGL Extensions Registry. The solutions might already be available, and it is very easy to get access to extensions in WebGL.

As an example, the following code loads an extension which enables the fragment program partial derivatives needed for the wireframe example:

// We need an extension to call fwidth in the fragment shader to have HQ wireframe rendering
var ext = gl.getExtension('OES_standard_derivatives');
if (!ext) {
  console.log('Warning: Unable to use an extension, some functionality may not work as intended');
}

With this, we can use the following pragma in the GLSL fragment program to enable calls of the GLSL function fwidth:

#extension GL_OES_standard_derivatives : enable

In some cases, there is no extension which solves our problem (this is the case with respect to 3D textures). When this happens, it is useful to check whether the required functionality will be available in a future version of WebGL (the next version is currently WebGL 2.0). If this is the case, you should as much as possible try to structure your code so that it can easily make use of the standard functionality once it becomes available.

As an exercise, find out how the problems mentioned above were solved in the code examples developed to support the lectures.
In the end, consider how you would implement 3D texturing in WebGL 1.0 given that it will be available in WebGL 2.0.

Reading Material