Asynchronous Shader Compilation

This test demonstrates two methods for compiling WebGL shaders. The exact same GL calls are made in both cases, only the order of operations is different. The primary code involved is here.

The "Synchronous" method follows a common pattern for compiling and linking WebGL shaders. Both the vertex and fragment shader are checked for errors immediately after calling gl.compileShader, and the program is checked for errors immediately after calling gl.linkProgram. The uniform and attribute locations are queried immediately after a successful link.

This forces the browser to wait for the result of the compile/link, which can be a long process. During that time your javascript execution is blocked and the browser may be less responsive.

The "Asynchronous" method, on the other hand, does not check for compile or link errors until immediately before the first use of the program. It also defers querying of uniforms and attribute locations till that point. In between the program link and first draw other work is done to set up the scene, in this case a mesh is downloaded and the appropriate vertex/index buffers are created. This allows browser that attempt to compile shaders asynchronously, like Chrome, a chance to finish the process in the background. That way WebGL blocks as little as possible, and the overall scene load may go faster.

With the Asynchronous method the first draw using a given program may may take slightly longer since more state is being queried at that time, but the shorter amount of time spent waiting for program linking can more than make up the difference. On browsers that don't asynchronously process shaders the time difference between the two methods should be negligable, so there's no real downside to structuring your code this way.

Note: Mesh Load times shown here include download time, which can vary dramatically run-to-run, which is why this value is dimmed out. It's included only to demonstrate how much time the browser has to asynchronously process the shader before it's first use.


Preparing test...