Added JSON-based procedural code generator to the Playground

[Tricotou]

This PR is following the same topic on the forum

• source code is the same than CTRL+SPACE menu (tools/playground/public/templates.json)
• any new code block from this code generator is now as well available from the CTRL+SPACE menu ✔️
• added a structure json in tools/playground/public/procedural.json which is used to build the drop down menu ✔️
• the fetch("templates.json").then() has been move to the monaco constuctor since now it's used from different places.
• NB: the code generator is not "100%" based on the JSON (for now...?) since some conditions have been included outside, such as for example a shadowGenerator check (cannot be enabled on hemi light), etc.
• NB: In the monaco editor I added a if (model.isDisposed()) check (see line 720 & 727), but I could not find exactly when the error Model is disposed! is triggered. Seems to be a bit random 🤔

---

Demo : https://github.com/BabylonJS/Babylon.js/assets/167624418/6b95747b-8f10-42ca-955a-46dc873e0f96

[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/15243/merge

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

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

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

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/15243/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/15243/merge
https://gui.babylonjs.com/?snapshot=refs/pull/15243/merge
https://nme.babylonjs.com/?snapshot=refs/pull/15243/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/15243/merge#BCU1XR#0

[bjsplat]

WebGL2 visualization test reporter:

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

[bjsplat]

Visualization tests for WebGPU (Experimental)

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

[bjsplat]

Visualization tests for WebGPU (Experimental)

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

[sebavan]

Lets see if @PatrickRyanMS can tests the code to validate the UI/UX? and if @RaananW can check the code :-)

[bjsplat]

WebGL2 visualization test reporter:

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

[bjsplat]

Visualization tests for WebGPU (Experimental)

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

[Tricotou]

Catching the JSON fetch + decode, in order to avoid braking the playground in the event of pushing a broken JSON (tested with broken JSON)

[RaananW]

Sorry fro taking the time here, was preoccupied with other tasks. I will review this PR today

[RaananW]

Code-wise I am perfectly fine with it. I'll wait for @PatrickRyanMS to try this out and give some feedback, when he has the time.
To test it you need to pull the branch and test it locally, as the playground and sandbox are the one thing that doesn't get pushed to the snapshot

Just an opinion - I think that as a feature it is a nice idea, but this needs to be very carefully implemented. Not sure i am 100% fine with the UX here.

[PatrickRyanMS]

I am out of the office for the US holiday. I will be back on Monday and able to take a look.

[deltakosh]

Looks AWESOME!
Love it

[deltakosh]

I merged to have it used by people and we can do a new PR if we want improved UX

[Tricotou]

we can do a new PR if we want improved UX
Absolutely ! @PatrickRyanMS don't hesitate to give a feedback about design :)