WebGL Precompilation Demo

This demo shows how to precompile the WebGL styles you want to use. By doing this, you can avoid seeing the fallback styles that are used to render the graph while the more elaborate and more expensive to compile styles are being loaded. Instead, a loading indicator is shown while the compilation takes place.

Initially, the standard SVG rendering is enabled on both graphs. When the "Enable WebGL" button in the toolbar is clicked, WebGL rendering is enabled immediately for the left graph. For the right graph, a loading screen is shown instead while the WebGL styles are precompiled. Once the compilation finishes, the loading screen is removed and WebGL rendering is enabled.

Note that WebGL compilation behavior is influenced by lots of factors that are out of the demo's control, such as different browsers, operating systems, graphics cards, and their drivers. Thus, you might see different outcomes when enabling WebGL rendering. Sometimes, the shaders are being cached by the browser/OS, so that you might not see the full effect of precompiling (as they compile instantly, basically).

A note on Firefox

Firefox does not support asynchronous compilation of shader programs. When enabling WebGL, the UI will block until all shaders are compiled. Therefore one would usually use a loading indicator as shown in the right graph component to inform the user that the app is currently not available for interaction.

Things to Try

• Click the "Enable WebGL" button to enable WebGL rendering.
• Left-click on a node, edge, or label to select it and see the selection style.
• Right-click on a node, edge, or label to highlight it and see the highlight style.