Performance is important. Here's our bag of WebGL profiling tips.
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., https://cesiumjs.org/Cesium/Build/Apps/CesiumViewer/?stats=true).
Running above 60 FPS
The FPS may be capped at 60 FPS. To disable this, turn off vsync.
- In the driver, e.g., the NVIDIA Control Panel or the Catalyst Control Center, and also...
- 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.
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.
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.