GreasedLine webGPU support

[Pryme8]

Right now at Frame we have an Asset type that uses the grease line material, but when that tries to spawn we get this error:

Uncaught (in promise) The plugin "GreasedLinePluginMaterial" can't be added to the material "doodleMat.doodler1732047173675" because the plugin is not compatible with the shader language of the material

Is there some Boolean I need to flip or is there just generally no support for wgsl grease lines right now?

[sebavan]

Looks like they do not exist in wgsl so far, maybe @roland ?

[roland]

Hey guys! I already started to port the shaders to WGSL but I’m pretty overwhelmed with my daily tasks so please be a bit patient

[sebavan]

no rush and thanks a lot for the heads up

[roland]

it’s getting close…

BETA, but you can guys track the progress. I’ll make the code cleaner (+ dynamic imports of shader code, etc.) after everything will work.

Here is the list of passed tests:

Grl webgpu

[roland]

Guys I had a “free” weekend so I was able to port almost every feature of GreasedLine into WGSL.

However I’m figthing an interesting issue:

Babylon.js Playground

The lines are rendered correctly initially. When I start to rotate the camera the lines starts to jitter. I couldn’t solve this issue yet, I checked the shader code multiple times. Maybe I’ve missed something so I’ll go trough it again and again

I’m using scene.viewProjection in the WGSL shader. Is this correct?:
[Grl webgpu by RolandCsibrei · Pull Request #15917 · BabylonJS/Babylon.js · GitHub]
@Evgeni_Popov Thanks!

EDIT:
If I set the viewProjection in my code the jittering disappears and everything runs smoothly:
Material:
uniformBuffer.updateMatrix("viewProjection", this._scene.getTransformMatrix());

Shader:
let grlMatrix: mat4x4f = uniforms.viewProjection * finalWorld;

Shouldn’t the framework set the value of viewProjection in the same way?

@sebavan @Deltakosh @Evgeni_Popov

[Evgeni_Popov]

Uniform buffers (scene, mesh, material) are automatically used by the standard/PBR materials, but not by shader materials. You have to declare them explicitely if you use them in shader materials (through the uniformBuffers option parameter). However, if your code is part of a plugin material, I think scene.viewProjection should work => let me know if you are in this case and I will have a look.

[roland]

@Evgeni_Popov

However, if your code is part of a plugin material, I think scene.viewProjection should work => let me know if you are in this case and I will have a look.

Yes, that’s exactly the case.

But I’ve recently pushed new code which uses this approach:

If I set the viewProjection in my code the jittering disappears and everything runs smoothly:
Material:
uniformBuffer.updateMatrix("viewProjection", this._scene.getTransformMatrix());

Shader:
let grlMatrix: mat4x4f = uniforms.viewProjection * finalWorld;

Do you want me to push the previous version which uses scene.viewProjection in the shader?

[Evgeni_Popov]

I just tested locally the PG you linked above, but with your previous code (so, I removed lines 265-271 in greasedLinePluginMaterial.ts and used scene.viewProjection instead of uniforms.viewProjection in the WGSL code), and it does work for me, I don’t have any jittering, the PG behaves in WebGPU as in WebGL. Can you re-test on your side/rollback to the old code in your PR?

[roland]

@Evgeni_Popov

and it does work for me, I don’t have any jittering, the PG behaves in WebGPU as in WebGL

Maybe it’s a MacOS issue? I’ll test it on a Windows device.

Meanwhile check out the screen capture from my Mac:
https://babylonjs.xyz/grl-jittering.mkv

thanks!

[Evgeni_Popov]

I confirm I don’t have any problems with the current code of the PR using the test link of the CI ( Babylon.js Playground) and testing the changes locally.

So, it must be a problem on MacOS. Do you use Safari or Chrome on your Mac?

[roland]

Chrome - jitters
Firefox - ok
Safari - ok

[Evgeni_Popov]

There seems to be a specific problem in Chrome, as the 3 browsers have 3 different WebGPU implementations… To solve this problem, I think you should go back to using a uniform, but we should probably revisit this case later.

[roland]

PR ready to review

CC: @Deltakosh

[roland]

I created a PR for GRL SimpleMaterial.

The journey to port GRL to WGSL ends here

[roland]

@RaananW Hello! Could you help me to understand and to get rid of this error please?

https://dev.azure.com/babylonjs/ContinousIntegration/_build/results?buildId=35532&view=logs&j=275f1d19-1bd8-5591-b06b-07d489ea915a&t=96b37e98-490b-5755-db43-568ff4a0ab3b

Thanks!

[RaananW]

Of course!

The shaders need to be exported from an index.ts file as well, so that the UMD will include them in the main chunk.

Look at the other shaders and where they are exported, and add your shaders there

[roland]

Oh, sure, thanks!

[roland]

Is it ok to put the index.ts here?

[RaananW]

Sure! I would assume the other files would be here as well? in what index.ts are they exported?