WebGPU Support

[mvaligursky]

This is the root ticket of WebGPU Implementation, and will be updated regularly to keep it up to date with new issues to work on and the work done.

For live preview, visit the url on up to date Chrome: https://playcanvas.github.io/

instancing.mov

grab.pass.720.mov

refraction.mov

shadows.mov

render.to.cubemap.mov

morphing.mov

post-effects.mov

skinning.mov

clustered-shadows.mov

mrt.mov

Class layout overview

• graphics folder will have two subfolders created for respective implementations: /webgl, /webgpu
• existing GraphicsDevice class will be platform independent, and WebglGraphicsDevice and WebgpuGraphicsDevice will extend it to implement platform specific implementations.
• other graphic classes, such as VertexBuffer, IndexBuffer and similar will be split into 3 classes as well, and this is the example structure:

// base platform independent class
class VertexBuffer {
    impl = null;   // platform dependent implementation (WebglVertexBuffer or WebgpuVertexBuffer)
};

Refactorings
The engine will undergo extensive refactoring, to more natively and with better performance support WebGPU API.

Issues:

• General
  Implement support for Uniform Buffers #4261
  Optimize setup of WebGl state variables #2254
  Refactor Webgl's use of the default frame buffer #4281
  Implement modular and more explicit render passes #4271
  Parallel creation of render pipelines on WebGPU #5689
  Support depth bias on WebGPU Platform #5688
  Make the ParticleSystem work on WebGPU #5357
  Make WebGPU textures report the video memory use #5690
  Implement async read back of textures #2974
  Add WebGPU support to lightmapper #5692

PRs:

• General
  Extracted webgl implementation of Vertex and Index buffer into separate modules #3982
  Move GraphicsDevice to webgl subfolder #4009
  Initial implementation of WebglGraphicsDevice class #4010
  Extracted WebglShader and WebglTexture from WebglGraphicsDevice #4014
  GraphicsDevice properties refactor #4013
  Extracted WebglRenderTarget class from RenderTarget and WeblGraphicsDevice #4086
  Moved additional webgl related members of Shader to WebglShader #4127
  [BREAKING] DepthState implementation for WebGL and WebGPU #5150
  [BREAKING] Implementation of BlendState #5083

• Uniform buffer / bind group support:
  Preprocessor to resolve ifdefs is applied to shader programs #4156
  WIP implementation of UniformBuffer and BindGroup #4258
  Shader allocation tracing #4387
  Small internal refactor of shader variants handling by renderer #4394
  ShaderProcessor partially updating shader source to support uniform buffers #4402
  Shader processor improvements related to bind groups format #4410
  Support for Mesh UniformBuffer / BindGroup #4497
  Standard shader compatibility improvements for WebGPU #4568
  Refactoring to get more of the standard shader compile for WebGPU #4575
  Bump allocation for Uniform Buffers on WebGPU #5438

• Render Passes
  Basic implementation of RenderPass based architecture #4272
  Layer composition rendering using RenderPass, optimization #4317
  Utility private ShaderPass class to abstract some code scattered in the codebase #4328

• WebGPU implementation
  Initial very basic implementation of WebGPU #4534
  Small updates to get skinning to work on WebGPU device. #4818
  GPU-instancing support on WebGPU #4872
  Texture based morphing support for WebGPU #4989
  WebGPU support for int and uint vertex attributes #5050
  WebGPU support to shadow atlas (shadow cascades + clustered shadows) #5118
  Mipmap generation for WebGPU 2D textures #5275
  Update to vertex format handling and morphing on WebGPU #5319
  Initial MRT implementation for WebGPU #5336
  Custom shader based multisampled depth resolve for WebGPU #5485
  Optimization of the render pipeline cache access on WebGPU #5490

• Compute shaders
  Initial framework for compute shaders on WebGPU #5757
  Support for storage textures on WebGPU platform #5760
  Implementation of StorageBuffer on WebGPU #6201

Partial list of missing features:

• rendering to cube-map render target (both color and depth) does not support multisampling, and might be upside down, related to Partial cubemap support for WebGPU #4911
• async texture readback is missing Implement async read back of textures #2974
• picker is not working, requires the async texture feedback
• Lightmapper is disabled as it has issues
• Implement material level uniform buffer (WebGPU initially) #6157
• Handle device lost on WebGPU #6171

[erikdubbelboer]

@mvaligursky https://poki.com/en/g/village-builder is now running the WebGPU enabled build of PlayCanvas. At Poki we capture erros, so I'm seeing a bunch of WebGPU related errors now. Would you like me to create separate issues for those or maybe just post comments for them here? The errors all affect less than 1% of the players, so if you don't have time you can also ignore them. I have some stack traces and device/browser information with them as well.

These are the most occurring error messages:

console.error: ["Failed to link shader program. 'tex2Dgrad': no matching 2 parameter intrinsic function

AbortError: Failed to execute 'mapAsync' on 'GPUBuffer': Device is lost

RangeError: Failed to execute 'createBuffer' on 'GPUDevice': createBuffer failed, size is too large for the implementation when mappedAtCreation == true

TypeError: Cannot read properties of undefined (reading 'renderTarget')

Failed to transpile webgl vertex shader [Shader Id 3 LitShader-ShadowPass_1_0-proc] to WebGPU: [GLSL compilation failed] while rendering undefined

TypeError: a.vertexAttribDivisor is not a function (doesn't seem WebGPU related but only happens in this latest release)

[mvaligursky]

@erikdubbelboer - please create multiple issues on these with the details you have, keen to see what's going on.