WebGPUEngine vs Engine and WebGL 2.0

Questions
1

Hi everyone,

I am trying to implement a kind of playground that allows to switch between WebGL 1.0, 2.0 and WebGPU.

When running on a browser without WebGPU enabled, I get to create a BABYLON.Engine instance, and there is no issue switching between both WebGL versions of the shading language.

However if WebGPU is enabled, then I make use of BABYLON.WebGPUEngine, which seems to dislike GLSL ES 3.0 syntax, littering the console with parse errors.

What might I been missing regarding the settings, or that is really like that with WebGPUEngine?

2

We would need to know what the errors are, but the spec is still evolving and Chrome (Canary) is not up to date. Notably, there have been changes with the discard statement which will break any code that are using it, but once Canary is updated that will fix it.

We also fixed a number of other ones in WebGPU: Fix PGs errors / warnings by Popov72 · Pull Request #13154 · BabylonJS/Babylon.js · GitHub but I think the Playground / npm packages are not updated yet.

3

Basically this is what happens,

Chrome Canary started without WebGPU support, meaning I will be using a BABYLON.Engine instance, GLES 3.0 compiles and renders without itssues,

image
image1986×1018 278 KB

Now if I start Chrome Canary with WebGPU support enabled, I will be using BABYLON.WebGPUEngine instead, and despite giving it BABYLON.ShaderLanguage.GLSL as shader language configuration it doesn’t like it,

image
image2335×1018 206 KB

However if I try to use GLSL 2.0, then everything is alright again,

image
image2358×1015 277 KB

And yes, this is my attempt to make CYOS support all shader language variants.

4

Do the vertex+fragment shaders in your screenshot work when creating a ShaderMaterial in the Playground and setting the engine to WebGPU?

It normally should, in which case it means you may have a configuration problem on your side. Are you using the latest Babylon.js version and the same glslang version we are using (the one here: https://preview.babylonjs.com/glslang/glslang.js / https://preview.babylonjs.com/glslang/glslang.wasm)?

5

I just had some time to look into this, and it really looks like a BabylonJS issue.

I took the Playground example from the documentation regarding how to write shaders, rewrote the shaders in WebGL 2.0 GLSL, everything renders perfectly fine in WebGL modes, as expected.

When opening the playground in Chrome Canary, and switching the backend to WebGPU, the rendering errors regarding a bad GLSL version happen.

If on the other hand I use the original playground example with old GLSL in Chrome Canary, then everything renders as well.

So to me it really seems BABYLON.ShaderMaterial() has an issue with WebGL 2.0 GLSL syntax when using the WebGPU backend.

6

The sample you pointed to use unsupported GLSL syntax when converting to WebGPU:

  • #version 300 es should not be used explicitely
  • in should be attribute / varying (depending on using it in the vertex/fragment shader)
  • one should use glFragColor to output the fragment color

Here’s a fixed PG that does work in WebGPU:

1 Like
7

Yeah, that was the original example from Babylon JS documentation, so basically WebGL 2.0 shaders aren’t fully supported.

I have to skip using BabylonJS for my purposes.

8

This PR will add support for GLES3 syntax to the WebGPU GLSL processing:

2 Likes
9

Thanks for looking into it.

This is where the multi-language CYOS lives on,

1 Like