WebGPU shader support in r337+

This forum post will serve as preliminary documentation for the new support for WebGPU in r337 and how to update effects to support it. As WebGPU is an entirely new graphics technology, it uses a completely different sharing language called WGSL. All built-in effects in Construct have already been ported to WGSL. However third-party effects must be converted to WGSL by their developers.

To get started, download the latest effect SDK files from the Addon SDK manual. This now includes WGSL ports of both sample effects.

For background reading see the blog posts A brief history of graphics on the web and WebGPU and From WebGL to WebGPU in Construct. There is another post about porting WebGL shaders to WebGPU, but it is currently out of date referring to an older syntax that no longer works, so to avoid confusion this is not linked to here.

Compatibility

All existing third-party effects will default to only supporting WebGL. If a project uses an effect that only supports WebGL, it will block enabling WebGPU for that project. The user will have to download an updated effect with support for WebGPU in order to enable WebGPU for their project, otherwise their only other option to enable WebGPU is to remove the effect from the project.

Note that Construct's WebGPU renderer includes an upgraded effect compositor. As a result in some cases there may be differences between the way WebGL and WebGPU effects are handled. Most of the time these differences are likely to be bugs, although some differences may be intentional improvements.

Enabling WebGPU rendering

Currently to enable the WebGPU renderer the following must be done:

1. Use Construct 3 r337+ (r344 is the stable release as of May 2023)
2. Use Chrome or Edge 113+ (stable release as of May 2023)
3. In Project Properties, under the 'Advanced' section, set 'Use WebGPU' to 'Yes' (note the default is 'Auto' which currently defaults to off)

To verify the WebGPU renderer is in use, preview the project, press F12 to open the browser console, and look for the console log message indicating Construct's renderer. There should be a line that reads:

[C3 runtime] Hosted in worker, rendering with WebGPU

The "rendering with WebGPU" phrase indicates the WebGPU renderer is in use. If it says "rendering with WebGL" then it is not using the WebGPU renderer and so you will not be able to test WGSL shaders.

Be sure to test your shader works with both WebGPU and WebGL. It should look identical in both cases, as that is what users will expect (although you could improve the quality or performance using additional WGSL features if possible).

Further documentation

As of October 2023 the documentation for writing WGSL shaders is now available in the Addon SDK documentation for WebGPU shaders.

Conclusion

Construct's WebGPU renderer has some way to go before it is production-ready, but we are beginning the process of rolling out WebGPU support in Construct over the coming months as browsers start to ship support for WebGPU, starting with Chrome 113. As a first step third-party effect addons need to be ported to WGSL so the effects don't block users upgrading to the WebGPU renderer. The preliminary support for WebGPU in Construct 3 r337+ and this preliminary documentation should help developers get started on this in advance of WebGPU support being extended further to general Construct users.

Do you have an estimated date for when webgpu will be enabled on exports? It has way better performance than webgl for my game.

Edit: it seems webGpu is not working on exports on windows, but it works on Mac.

Edit 2: Got it working on webview export by setting the default graphics to nvidia gpu. but some effects like replace color don't work. It still doesn't work on Nwjs.

The current status of WebGPU support is in this thread which is kept up-to-date as the situation changes. I would like to see WebGPU enabled by default by the end of the year, but it may happen sooner or later than that depending on how the roll-out process goes.

As this thread was originally for preliminary documentation which has now been moved to the manual, closing it.