diff --git a/packages/tools/playground/public/procedural.json b/packages/tools/playground/public/procedural.json index 7fc3766b192..acc39fed093 100644 --- a/packages/tools/playground/public/procedural.json +++ b/packages/tools/playground/public/procedural.json @@ -5,6 +5,13 @@ "subItems": ["Debug Layer", "Shadows", "Skybox", "Audio", "Lens Flare", "Sprites"], "keepExpanded": true }, + { + "label": "Frame Graph", + "tooltip": "Frame Graph tools", + "subItems": ["Simple ", "Simple (NRG)", "Simple (NRG no autofill JS)"], + "subItemsTS": ["Simple ", "Simple (NRG)", "Simple (NRG no autofill TS)"], + "keepExpanded": true + }, { "label": "Cameras", "tooltip": "Select a camera type", diff --git a/packages/tools/playground/public/templates.json b/packages/tools/playground/public/templates.json index 5f8ebcd70df..c24ffe7242c 100644 --- a/packages/tools/playground/public/templates.json +++ b/packages/tools/playground/public/templates.json @@ -36,6 +36,33 @@ "insertText": "// Load the spritesheet (with appropriate settings) associated with the JSON Atlas.\nlet spriteSheet = new BABYLON.Texture(\"textures/spriteMap/none_trimmed/Legends_Level_A.png\", scene,\n false, //NoMipMaps\n false, //InvertY usually false if exported from TexturePacker\n BABYLON.Texture.NEAREST_NEAREST, //Sampling Mode\n null, //Onload, you could spin up the sprite map in a function nested here\n null, //OnError\n null, //CustomBuffer\n false, //DeleteBuffer\n BABYLON.Engine.TEXTURETYPE_RGBA //ImageFormageType RGBA\n);\n// Create an assets manager to load the JSON file\nconst assetsManager = new BABYLON.AssetsManager(scene);\nconst textTask = assetsManager.addTextFileTask(\"text task\", \"textures/spriteMap/none_trimmed/Legends_Level_A.json\");\n// Create the sprite map on succeful loading\ntextTask.onSuccess = (task) => {\n let background = new BABYLON.SpriteMap(\"background\", JSON.parse(task.text), spriteSheet, {\n stageSize: new BABYLON.Vector2(2, 2),\n flipU: true //Sometimes you need to flip, depending on the sprite format.\n }, scene);\n // Set 4 sprites one per tile.\n for (let i = 0; i < 4; i++) {\n background.changeTiles(0, new BABYLON.Vector2(i % 2, Math.floor(i / 2)), 9 * i + 9);\n }\n};\n//load the assets manager\nassetsManager.load();" }, + { + "label": "Frame Graph: simple frame graph", + "key": "Simple ", + "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/", + "insertText": "const frameGraph = new BABYLON.FrameGraph(scene, true);\n\nengine.onResizeObservable.add(() => {\n frameGraph.build();\n});\n\nscene.cameraToUseForPointers = camera;\nscene.frameGraph = frameGraph;\n\nconst samples = 4;\n\nconst colorTexture = frameGraph.textureManager.createRenderTargetTexture(\"color\", {\n size: { width: 100, height: 100 },\n options: {\n createMipMaps: false,\n types: [BABYLON.Constants.TEXTURETYPE_UNSIGNED_BYTE],\n formats: [BABYLON.Constants.TEXTUREFORMAT_RGBA],\n samples,\n useSRGBBuffers: [false],\n labels: [\"color\"],\n },\n sizeIsPercentage: true,\n});\n\nconst depthTexture = frameGraph.textureManager.createRenderTargetTexture(\"depth\", {\n size: { width: 100, height: 100 },\n options: {\n createMipMaps: false,\n types: [BABYLON.Constants.TEXTURETYPE_UNSIGNED_BYTE],\n formats: [BABYLON.Constants.TEXTUREFORMAT_DEPTH32_FLOAT],\n samples,\n useSRGBBuffers: [false],\n labels: [\"depth\"],\n },\n sizeIsPercentage: true,\n});\n\nconst clearTask = new BABYLON.FrameGraphClearTextureTask(\"clear\", frameGraph);\n\nclearTask.clearColor = true;\nclearTask.clearDepth = true;\nclearTask.targetTexture = colorTexture;\nclearTask.depthTexture = depthTexture;\n\nframeGraph.addTask(clearTask);\n\nconst rlist = {\n meshes: scene.meshes,\n particleSystems: scene.particleSystems,\n}\n\nconst renderTask = new BABYLON.FrameGraphObjectRendererTask(\"renderObjects\", frameGraph, scene);\n\nrenderTask.targetTexture = clearTask.outputTexture;\nrenderTask.depthTexture = clearTask.outputDepthTexture;\nrenderTask.objectList = rlist;\nrenderTask.camera = camera;\n\nframeGraph.addTask(renderTask);\n\nconst copyToBackbufferTask = new BABYLON.FrameGraphCopyToBackbufferColorTask(\"copytobackbuffer\", frameGraph);\n\ncopyToBackbufferTask.sourceTexture = renderTask.outputTexture;\n\nframeGraph.addTask(copyToBackbufferTask);\n\nframeGraph.build();\n\nawait frameGraph.whenReadyAsync();" + }, + { + "label": "Frame Graph: simple node render graph", + "key": "Simple (NRG)", + "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/#using-a-node-render-graph", + "insertText": "const nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync(\"2LR76I\", scene);\n\nnrg.build();\n\nscene.frameGraph = nrg.frameGraph;\n\nawait nrg.whenReadyAsync();" + }, + { + "label": "Frame Graph: simple node render graph (no autofill parameters)", + "key": "Simple (NRG no autofill JS)", + "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/#using-a-node-render-graph", + "language": "javascript", + "insertText": "scene.cameraToUseForPointers = camera;\n\nconst nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync(\"2LR76I\", scene, { autoFillExternalInputs: false });\n\nconst cameraBlock = nrg.getBlockByName(\"Camera\");\ncameraBlock.value = camera;\n\nconst objectListBlock = nrg.getBlockByName(\"Object List\");\nobjectListBlock.value = { meshes: null, particleSystems: null };\n\nnrg.build();\n\nscene.frameGraph = nrg.frameGraph;\n\nawait nrg.whenReadyAsync();" + }, + { + "label": "Frame Graph: simple node render graph (no autofill parameters)", + "key": "Simple (NRG no autofill TS)", + "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/#using-a-node-render-graph", + "language": "typescript", + "insertText": "scene.cameraToUseForPointers = camera;\n\nconst nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync(\"2LR76I\", scene, { autoFillExternalInputs: false });\n\nconst cameraBlock = nrg.getBlockByName(\"Camera\");\ncameraBlock.value = camera;\n\nconst objectListBlock = nrg.getBlockByName(\"Object List\");\nobjectListBlock.value = { meshes: null, particleSystems: null };\n\nnrg.build();\n\nscene.frameGraph = nrg.frameGraph;\n\nawait nrg.whenReadyAsync();" + }, + { "label": "Add Camera : Arc Rotate Camera w/Radians", "key": "Arc Rotate (Rad)", diff --git a/packages/tools/playground/src/components/commandBarComponent.tsx b/packages/tools/playground/src/components/commandBarComponent.tsx index ad654e015fe..a4ea1b5b327 100644 --- a/packages/tools/playground/src/components/commandBarComponent.tsx +++ b/packages/tools/playground/src/components/commandBarComponent.tsx @@ -237,14 +237,25 @@ export class CommandBarComponent extends React.Component ({ - ...item, - onClick: () => {}, - onInsert: (snippetKey: string) => { - this.onInsertSnippet(snippetKey); - }, - })); + proceduralOptions = this._procedural.map((item) => { + const obj: any = { + ...item, + onClick: () => {}, + onInsert: (snippetKey: string) => { + this.onInsertSnippet(snippetKey); + }, + }; + if (isJavaScript) { + delete obj.subItemsTS; + } else if (obj.subItemsTS) { + obj.subItems = obj.subItemsTS; + delete obj.subItemsTS; + } + return obj; + }); // Engine Version Options const activeVersion = Utilities.ReadStringFromStore("version", "Latest", true); diff --git a/packages/tools/playground/src/scss/commandBar.scss b/packages/tools/playground/src/scss/commandBar.scss index 35d582e95a9..b14cad6875f 100644 --- a/packages/tools/playground/src/scss/commandBar.scss +++ b/packages/tools/playground/src/scss/commandBar.scss @@ -232,7 +232,7 @@ position: absolute; left: 200px; top: 0; - width: 150px; + width: 220px; display: none; &.background-js {