Add support for 3D procedural textures

[MiiBond]

This adds the ability to have a 3D ProceduralTexture. It renders all layers of the 3D texture, each time setting a uniform called "layer" to a value between 0-1.

[bjsplat]

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

[bjsplat]

Snapshot stored with reference name:
refs/pull/15114/merge

Test environment:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/15114/merge/index.html

To test a playground add it to the URL, for example:

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/15114/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/15114/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/15114/merge
https://gui.babylonjs.com/?snapshot=refs/pull/15114/merge
https://nme.babylonjs.com/?snapshot=refs/pull/15114/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/15114/merge#BCU1XR#0

[bjsplat]

WebGL2 visualization test reporter:

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/15114/merge/testResults/webgl2playwright/index.html

[bjsplat]

Visualization tests for WebGPU (Experimental)
Important - these might fail sporadically. This is an optional test.

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/15114/merge/testResults/webgpuplaywright/index.html

[sebavan]

LGTM

[deltakosh]

@RaananW do you why the new test is failing?

[RaananW]

Regarding WebGL - I am checking right now.

Regarding WebGPU, this is the (shortened) log:

 undefined
Running test: 3D Procedural Textures . Meta:  #AYZY4Q#6
[3D Procedural Textures] The texture dimension must not be TextureDimension::e3D for a render attachment if allow_unsafe_apis is not enabled. See crbug.com/dawn/1020.
 - While validating [TextureDescriptor "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].
 - While calling [Device "BabylonWebGPUDevice197"].CreateTexture([TextureDescriptor "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"]).

[3D Procedural Textures] BJS - [16:40:36]: WebGPU uncaptured error (1): [object GPUValidationError] - The texture dimension must not be TextureDimension::e3D for a render attachment if allow_unsafe_apis is not enabled. See crbug.com/dawn/1020.
 - While validating [TextureDescriptor "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].
 - While calling [Device "BabylonWebGPUDevice197"].CreateTexture([TextureDescriptor "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"]).

[3D Procedural Textures] [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"] is invalid.
 - While calling [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].CreateView([TextureViewDescriptor "BabylonWebGPUDevice197_TextureView3D_256x256x256_womips_rgba8unorm_3d_all_noname"]).

[3D Procedural Textures] BJS - [16:40:36]: WebGPU uncaptured error (2): [object GPUValidationError] - [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"] is invalid.
 - While calling [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].CreateView([TextureViewDescriptor "BabylonWebGPUDevice197_TextureView3D_256x256x256_womips_rgba8unorm_3d_all_noname"]).

[3D Procedural Textures] [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"] is invalid.
 - While calling [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].CreateView([TextureViewDescriptor]).

[3D Procedural Textures] BJS - [16:40:36]: WebGPU uncaptured error (3): [object GPUValidationError] - [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"] is invalid.
 - While calling [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].CreateView([TextureViewDescriptor]).

[3D Procedural Textures] [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"] is invalid.
 - While calling [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].CreateView([TextureViewDescriptor]).

[3D Procedural Textures] BJS - [16:40:36]: WebGPU uncaptured error (4): [object GPUValidationError] - [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"] is invalid.
 - While calling [Invalid Texture "BabylonWebGPUDevice197_Texture3D_256x256x256_womips_rgba8unorm_samples1"].CreateView([TextureViewDescriptor]).

[3D Procedural Textures] WebGPU: too many warnings, no more warnings will be reported to the console for this GPUDevice.

[RaananW]

Playwright has an allergy to underscores in filenames. I'll see what can be done about it, but until then - not underscores :-) Or let it generate the file by itself, and then the file will be generated with the filename it is looking for.

Oh, and I pushed a fix (renaming the file)

[RaananW]

WebGL2 tests pass, however, WebGPU fails (you can see in the link provided in the comments). I'll let you decide if we should merge or investigate.

[sebavan]

cc @Popov72 as well regarding the WebGPU error in case he can spot smthg ?

[Popov72]

Regarding WebGPU, we have to allow unsafe apis to be able to render to 3D texture. Try to start chrome with the flag: --enable-unsafe-webgpu

If it does not work, try also with --enable-webgpu-developer-features

[sebavan]

@RaananW looks like webgpu is ok now, is that expected ?

[RaananW]

@RaananW looks like webgpu is ok now, is that expected ?

It is not:

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/15114/merge/testResults/webgpuplaywright/index.html#?testId=5e014ad2de5afab284ac-e489ce6871b4ce2a05b2

It does render correctly, but the generated image doesn't match

[sebavan]

Oh right was spoiled by the green tick :-)

[sebavan]

@MiiBond it looks like you might need to regenerate the test picture and it should be all good

[MiiBond]

@MiiBond it looks like you might need to regenerate the test picture and it should be all good

I'm currently looking at this still. I'm having an issue with this in my IBL shadows branch.
I have 3 samplers in my procedural shader and the first works only for layer 0. After that, the uniform looks like this:

The other two samplers are fine.

[Popov72]

Make sure you added voxelXAxisSampler in the list of sampler names when you create the shader. Also, you should try to debug in WebGPU, as you may get better error messages than in WebGL.

[sebavan]

And be careful it is a minor case "a" for axis but If you have the broken code somewhere I can try having a look

[MiiBond]

I haven't figured out what's happening in my branch but I made a simple playground and it seems to be behaving as I expect.
However, Spector.js isn't showing the render of layer 0 properly and that makes me a bit suspicious that there really is something wrong. Every layer has a snapshot displayed except the first one.

Playground is #AYZY4Q#11

[MiiBond]

Another issue is that when I run npm run test:visualization -- -i "webgl2" -t "3D Procedural Textures" -u to regenerate the image, all the tests run. What's more, 4 tests fail, including lens-flare, and the 3D Procedural Textures test passes.

[sebavan]

cc @RaananW for the tests, for spector I am more suspicious of the Spector code :-) It looks like the layers are correct

[Popov72]

As for @MiiBond, I tested the visualization test locally and it does work as expected (I also have 4 other tests that fail, but the 3D procedural texture test is ok).

So, maybe there's a bug with the framework we are using to run the tests when rendering to a 3D texture?

Note: just for testing purpose, I moved the test to the top of the list and re-run the process.

[sebavan]

In this case should we disable it from auto run ? cc @RaananW as it would be great to get this merged in ?

[RaananW]

i'll ru the tests locally and check what happened there. sorry for the late reply!

[RaananW]

There seems to be a discrepancy between playwright and puppeteer which I will have to investigate. We use playwright for the Ci testing. I get consistently the exact same result as the CI, on a mac (using chromium).
If you want to run playwright use the following command:

npm run test:playwright -w @tools/tests -- --project=webgl2 --ui, making sure the local babylon server is running.
If you have a .env file you can test against this PR instead of running the local server by adding

CDN_BASE_URL=https://babylonsnapshots.z22.web.core.windows.net/refs/pull/15114/merge as environment variable

If you want to update the snapshot delete the image and run the test once, playwright will generate the image for you.

Might be a mac thing as well TBH - I had that already with other tests (especially with webgpu). what OS are you testing on?

Anyhow - I will check what the difference is between the two test coordinators (puppeteer and playwright). There shouldn't be any.

[RaananW]

Running this in the browser - https://playground.babylonjs.com/?snapshot=refs/pull/15114/merge#AYZY4Q#7, changing the canvas to 600x400, i get what playwright is generating, and not what puppeteer renders:

Checked under firefox as well:

Investigation continues.I would recommend updating the image if we want it merged, while I test what went wrong with puppeteer.

Edit - might be an OS/GPU thing? This is the result on my device (mac, M2) when running using puppeteer:

I can update the image on my end if we want it to pass the tests, but we can discuss this whenever you have the time

[Popov72]

That's weird, on my local computer (Windows 11), I get the same picture you get on your Mac:

It's what I get both with playwright locally and when browsing https://playground.babylonjs.com/?snapshot=refs/pull/15114/merge#AYZY4Q#7

Note that I get the same pictures in WebGPU.

Note that puppeeter generates the same picture than playwright.

[Popov72]

I think that if the test can't work both locally and on the CI, we'll have to disable it for all engines?

Or do we configure it to run only on the local computer (excludeFromAutomaticTesting: true) so that it at least runs somewhere?

[sebavan]

excludeFromAutomaticTesting: true would be good @MiiBond can you do the change ?

[RaananW]

I would be very interested to know why it generates different results.

[sebavan]

yup, lets check it offline after the merge.