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/

https://user-images.githubusercontent.com/59932779/203333981-3d77fc58-5e5a-4b00-add1-8ab5a3991c84.mov

https://user-images.githubusercontent.com/59932779/205290862-22eff1fd-53d9-4336-815e-5f7311b923d5.mov

https://user-images.githubusercontent.com/59932779/205290893-555888b4-74d2-4b6d-a963-1e0a86daea12.mov

https://user-images.githubusercontent.com/59932779/208122279-d85d1c22-48b3-4db8-b9d8-9872d111c739.mov

https://user-images.githubusercontent.com/59932779/205909226-d3d90aa0-c118-49f7-be0e-b56576a5235c.mov

https://user-images.githubusercontent.com/59932779/213508864-71ba2fb6-7c59-425e-bc3d-db94c2cd6e65.mov

https://user-images.githubusercontent.com/59932779/214621963-bc1b6bd5-8775-40f7-a339-6612b59fd5c2.mov

https://user-images.githubusercontent.com/59932779/217569603-95fc0dbd-d86f-4ccd-badf-42f9873ab3a7.mov

https://user-images.githubusercontent.com/59932779/222208562-efa32552-9da7-4a3d-a27f-f67fc1e91812.mov

https://github.com/playcanvas/engine/assets/59932779/b56291dc-513f-49f6-bcbc-50b0a24ec3cc

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

  4261

  2254

  4281

  4271

  5689

  5688

  5357

  5690

  2974

  5692

PRs:

• General

  3982

  4009

  4010

  4014

  4013

  4086

  4127

  5150

  5083

• Uniform buffer / bind group support:

  4156

  4258

  4387

  4394

  4402

  4410

  4497

  4568

  4575

  5438

• Render Passes

  4272

  4317

  4328

• WebGPU implementation

  4534

  4818

  4872

  4989

  5050

  5118

  5275

  5319

  5336

  5485

  5490

• Compute shaders

  5757

  5760

  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 https://github.com/playcanvas/engine/pull/4911
• async texture readback is missing https://github.com/playcanvas/engine/issues/2974
• picker is not working, requires the async texture feedback
• Lightmapper is disabled as it has issues
• https://github.com/playcanvas/engine/issues/6157
• https://github.com/playcanvas/engine/issues/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.