Skip to main content

WebGL Profiling Tips

Patrick Cozzi

Performance is important. Here's our bag of WebGL profiling tips.

First, always keep your browser and video-card drivers up-to-date (NVIDIA • AMD).

FPS Counters

In Chrome, to show an FPS counter, browse to chrome://flags/, check FPS counter, and relaunch. In Firefox, browse to about:config and enable layers.acceleration.draw-fps.

(Alternatively, in Cesium, add the stats=true query parameter, e.g., /cesiumjs/cesium-viewer/?stats=true).

Running above 60 FPS

The FPS may be capped at 60 FPS. To disable this, turn off vsync.

  1. In the driver, e.g., the NVIDIA Control Panel or the Catalyst Control Center, and also...
  2. In the browser. Start Chrome with --disable-gpu-vsync. Make sure to close all tabs and kill any Chrome processes with Task Manager before starting it with the command-line argument. In Firefox, browse to about:config, change layout.frame_rate from -1 to 0 and layers.offmainthreadcomposition.frame-rate from -1 to 1000.

NVIDIA Optimus

On Windows laptops with NVIDIA Optimus, the browser may use the slower Intel card by default. @alteredq has an excellent article on how to determine if the NVIDIA or Intel card is used, and how to switch to NVIDIA.

On MacBooks with NVIDIA Optimus, the NVIDIA card is used by default. However, it is often useful to also do performance testing with the Intel card. To switch to the Intel card, use gfxCardStatus.

ANGLE

On Windows, Chrome, Firefox, and Opera use ANGLE to translate WebGL calls (OpenGL ES) to Direct3D. Sometimes it's useful to bypass ANGLE to test the native OpenGL implementation. Start Chrome with --use-gl=desktop. Make sure to close all tabs and kill any Chrome processes with Task Manager before starting it with the command-line argument. In Firefox, browse to about:config and enable webgl.prefer-native-gl.

To verify if ANGLE is in use, check the ANGLE value in the WebGL Report. In Chrome, the ANGLE version is reported at chrome://gpu/.

I don't actually do this often since end-users on Windows will run with ANGLE enabled.

Profiling Different Resolutions

The Responsive Design tools in Chrome and Firefox can be used to profile different canvas resolutions, which, of course, will have different fragment shading workloads. In Chrome, open up the dev tools, click Emulation, and we can select a specific resolution or device, or drag to resize the canvas. In Firefox, the Responsive Design View (Ctrl+Shift+M) also allows selecting a specific resolution and dragging to resize the canvas.

Tools

WebGL Debugging and Profiling Tools has a list of tools for profiling WebGL apps. Since I wrote it, the Firefox Canvas Debugger and Texture Format Tester were also released.

Acknowledgments

Thanks to Ken Russell (@gfxprogrammer) and Nick Desaulniers (@LostOracle) for the tips on running above 60 FPS. These were the inspiration for this blog post.