From WebGL to WebGPU

Global state

WebGPU is a stateless API, unlike WebGL which maintains a global state. In WebGPU, all rendering state is encapsulated within pipelines.

Sync no more

WebGPU discourages synchronous command execution, unlike WebGL. Synchronous commands can cause pipeline flushes and performance issues.

Compute shaders

WebGPU introduces compute shaders, which are programs that run on the GPU to perform general-purpose computations. WebGL does not support compute shaders.

Video frame processing

WebGPU does not handle video frame processing like WebGL does. Developers need to manage the canvas themselves in WebGPU.

Application portability by default

WebGL can only create one context per canvas, while there is no limit on the number of WebGPU canvases per page. This allows for greater flexibility and application portability.

Canvas handling

WebGPU requires developers to manage the canvas themselves, unlike WebGL which handles it automatically.

Helpful error messages

WebGPU provides more helpful error messages compared to WebGL, making it easier to debug and troubleshoot.

From names to indexes

While WebGL uses names to refer to resources, WebGPU uses indexes. This can be seen in the APIs for binding resources.

Mipmap generation

WebGPU does not support automatic mipmap generation like WebGL does. Developers can use libraries such as webgpu-utils or implement their own mipmap generation.

Buffer and texture changes

In WebGL, buffers and textures can be resized at any time. In WebGPU, buffers and textures are immutable and cannot be resized. Developers need to create new buffers or textures when size changes are required.

Space convention differences

WebGL uses a convention where the Y axis is up and the Z axis is into the screen, while WebGPU uses the Metal convention where the Y axis is down and the Z axis is out of the screen.

Acknowledgements

This article is based on the insights provided by François Beaufort in his dive into the Chromium source code on GitHub.