Hi everyone, long time no post!
I have a weird one; testing once again webgpu vs webgl, but I wonder what could be the main issue when I only change the engine and my shading looks completely different in the other engine version… Take a look at this (left is webgpu, right is webgl2):
There are two points:
- The colors are different
- The shading itself seems to work very differently in webgpu
I use this complex shader (would need a bit cleaning up I know), and I wonder if someone would have any pointers on where to look at with the differences. Also I wonder if there should be differences in general between webgl and webgpu?
Babylon.js Node Material Editor (babylonjs.com)
Would be also nice to be able to switch in webgpu in the nme… I can share a playground later on, but I wonder if anyone has any clue what could be the culprit on these differences?
That looks like a color space issue to me. Probably gamma correction needs to be applied or something.
2 Likes
it should work out of the box but before I can check I need your help to simply the shader to a minimum repro 
After that I will find the bug and fix it for you!
1 Like
btw you can switch NME to use webgpu:
1 Like
This is great I didn’t notice this! Anyways, with the shader it errors out because of maybe light issues?
Anyways, I modified an ye olde playground I use for character animation (with animation curve editor!) to this and the issue is reproducable with plain eyes as well. The light is animated also for additional help
Here is the playground: FloatingIslandsTestBencha | Babylon.js Playground (babylonjs.com)
This is what you should see when comparing both webgl(left) and webgpu(right):
Also, sorry for the gigantual nme graph! It should be improved later on, but it has been my “workbench” for a alot of different stuff & effects. The middle section with the “Toon Shading” is based on the toon shader series you had in youtube
Thanks in advance of all the help you can provide!
Alright my man! Let’s see what we have here 
Checking your first error within NME…
alright @Panuchka: I need your help. I cannot debug 2400 lines of shaders with a moving target
So here is your mission: Please create the simplest NME shader you can think of that will exhibit the issue (in NME, on the plane preview mesh) so I can run the webgl and webgpu version side by side
After that I will fix the color discrepancy
1 Like
I’ll get into that later today/tomorrow boss! 
1 Like
Ok, here is the updated playground @Deltakosh :
FloatingIslandsTestBencha | Babylon.js Playground (babylonjs.com)
And here is the update NME, which should be simpler but still have that great 
in it
Babylon.js Node Material Editor (babylonjs.com)
If you want to use a flat color instead of texture, just connect that node seen in the below picture
Is this simple enough? I can see the problem at least in the shader ball… Because there are two problems:
- The coloring
- The mismatch of shading that you can see in the post above circled
okidoki!
so let’s focus on NME first
1 Like
wait! I see the differences with plain color!
Ok we are onto something 
1 Like
ok some updates
I simplified the shader quite a lot
WebGL: Babylon.js Node Material Editor (babylonjs.com)
WebGPU: Babylon.js Node Material Editor (babylonjs.com)
WebGL:
WebGPU:
Apparently WebGPU has a problem with pow + step… I’m investigating (And I asked @Evgeni_Popov) as well to see if he has an idea ;D
Stay tuned!
oh! oh!
If I clamp the pow in webGPU it works:
Babylon.js Node Material Editor (babylonjs.com)
Ok so now the question is: should the PowBlock automatically add a clamp?
Hum I see…
Apparently pow(x, y) in webGPU expects x to be >=0
I think I found a fix
Very nice, the shading looks awesome now! 
Here is the comparison:
It still seems that there is a small light color discrepency somewhere! 
Can you repro in nme? Or with a more simpler PG?
