Dev

examples/engines/babylon-worldspace.html

@@ -23,10 +23,12 @@
     <body>
         <canvas></canvas>
         <script type="module">
-            import UI from '../../src/ui/UI'
-            import UIBabylon from '../../src/ui/UIBabylon'
+            import UI from '../../src/ui/UIWebGPU'
+            import UIBabylon from '../../src/ui/UIWebGPUBabylon'
             import ResourcesWebGPU from '../../src/renderer/webgpu/ResourcesWebGPU'
             import { loadImage, loadJson } from '../shared/load-assets'
+            import { loadAssets } from '../shared/assets'
+            import { loadYoga } from 'yoga-layout/load'
             import { main } from './babylon-worldspace.ts'
 
             const canvas = document.querySelector('canvas')
@@ -37,8 +39,10 @@
                 UI,
                 UIBabylon,
                 ResourcesWebGPU,
-                loadImage,
-                loadJson,
+                loadYoga,
+                loadAssets: () => loadAssets({ loadImage, loadJson }),
+            }).then(({ uis }) => {
+                uis.forEach((ui) => ui.registerPlatformEvents())
             }).catch(console.error)
         </script>
     </body>

examples/engines/babylon-worldspace.ts

@@ -8,7 +8,7 @@ import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js'
 import { Vector3 } from '@babylonjs/core/Maths/math.vector.js'
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js'
 import { Scene } from '@babylonjs/core/scene.js'
-import { loadAssets, registerAssets } from '../shared/assets'
+import { registerAssets } from '../shared/assets'
 import { createBackgroundUI } from '../shared/uis/background-ui'
 import { createForegroundUI } from '../shared/uis/foreground-ui'
 
@@ -21,8 +21,8 @@ export async function main({
     ResourcesWebGPU,
     UI,
     UIBabylon,
-    loadImage,
-    loadJson,
+    loadAssets,
+    loadYoga,
 }) {
     const context = canvas.getContext('webgpu')
     const format = navigator.gpu.getPreferredCanvasFormat()
@@ -53,14 +53,15 @@ export async function main({
         context,
         format,
     })
-    const assets = await loadAssets({ loadImage, loadJson })
+    const assets = await loadAssets()
     registerAssets({ resources, assets })
 
-    const { ui: overlay_ui } = await UI.create({ resources, device_pixel_ratio })
+    const { ui: overlay_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
 
     const texture_width = Math.round(device_width * TEXTURE_SCALAR)
     const texture_height = Math.round(device_height * TEXTURE_SCALAR)
     const { ui: first_ui, plane: first_plane } = await UIBabylon.create({
+        loadYoga,
         scene,
         resources,
         device_pixel_ratio,
@@ -70,6 +71,7 @@ export async function main({
         world_height: WORLD_HEIGHT,
     })
     const { ui: second_ui, plane: second_plane } = await UIBabylon.create({
+        loadYoga,
         scene,
         resources,
         device_pixel_ratio,
@@ -180,6 +182,8 @@ export async function main({
     })
 
     engine.runRenderLoop(() => scene.render())
+
+    return { uis: [overlay_ui, first_ui, second_ui] }
 }
 
 function syncCanvasSize({ canvas, engine, overlay_ui }) {

examples/engines/babylon.html

@@ -23,9 +23,11 @@
     <body>
         <canvas></canvas>
         <script type="module">
-            import UI from '../../src/ui/UI'
+            import UI from '../../src/ui/UIWebGPU'
             import ResourcesWebGPU from '../../src/renderer/webgpu/ResourcesWebGPU'
             import { loadImage, loadJson } from '../shared/load-assets'
+            import { loadAssets } from '../shared/assets'
+            import { loadYoga } from 'yoga-layout/load'
             import { main } from './babylon.ts'
 
             const canvas = document.querySelector('canvas')
@@ -35,8 +37,10 @@
                 onCanvasEvent,
                 UI,
                 ResourcesWebGPU,
-                loadImage,
-                loadJson,
+                loadYoga,
+                loadAssets: () => loadAssets({ loadImage, loadJson }),
+            }).then(({ uis }) => {
+                uis.forEach((ui) => ui.registerPlatformEvents())
             }).catch(console.error)
         </script>
     </body>

examples/engines/babylon.ts

@@ -6,11 +6,11 @@ import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js'
 import { VertexBuffer } from '@babylonjs/core/Buffers/buffer.js'
 import { Color3 } from '@babylonjs/core/Maths/math.color.js'
 import { Quaternion, Vector3 } from '@babylonjs/core/Maths/math.vector.js'
-import { loadAssets, registerAssets } from '../shared/assets'
+import { registerAssets } from '../shared/assets'
 import { createBackgroundUI } from '../shared/uis/background-ui'
 import { createForegroundUI } from '../shared/uis/foreground-ui'
 
-export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadImage, loadJson }) {
+export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadAssets, loadYoga }) {
     const context = canvas.getContext('webgpu')
     const format = navigator.gpu.getPreferredCanvasFormat()
     const engine = new WebGPUEngine(canvas, {
@@ -31,8 +31,8 @@ export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadIma
         format,
     })
     const device_pixel_ratio = window.devicePixelRatio
-    const { ui: background_ui } = await UI.create({ resources, device_pixel_ratio })
-    const { ui: foreground_ui } = await UI.create({ resources, device_pixel_ratio })
+    const { ui: background_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
+    const { ui: foreground_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
 
     const scene = new Scene(engine)
     scene.autoClear = false
@@ -61,7 +61,7 @@ export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadIma
     cube_material.emissiveColor = Color3.White()
     cube.material = cube_material
 
-    const assets = await loadAssets({ loadImage, loadJson })
+    const assets = await loadAssets()
     registerAssets({ resources, assets })
     const { grid } = createBackgroundUI({ ui: background_ui, assets, background_color: '#fde2c0' })
     createForegroundUI({ ui: foreground_ui, assets, title: 'Hello Babylon.js!' })
@@ -105,6 +105,8 @@ export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadIma
         cube.rotationQuaternion!.set(Math.sin(now) * rotation_sin, Math.cos(now) * rotation_sin, 0, rotation_cos)
         scene.render()
     })
+
+    return { uis: [background_ui, foreground_ui] }
 }
 
 function syncCanvasSize({ canvas, engine, background_ui, foreground_ui }) {

examples/engines/babylonlite-worldspace.html

@@ -23,10 +23,12 @@
     <body>
         <canvas></canvas>
         <script type="module">
-            import UI from '../../src/ui/UI'
-            import UIBabylonLite from '../../src/ui/UIBabylonLite'
+            import UI from '../../src/ui/UIWebGPU'
+            import UIBabylonLite from '../../src/ui/UIWebGPUBabylonLite'
             import ResourcesWebGPU from '../../src/renderer/webgpu/ResourcesWebGPU'
             import { loadImage, loadJson } from '../shared/load-assets'
+            import { loadAssets } from '../shared/assets'
+            import { loadYoga } from 'yoga-layout/load'
             import { main } from './babylonlite-worldspace.ts'
 
             const canvas = document.querySelector('canvas')
@@ -39,8 +41,10 @@
                 UI,
                 UIBabylonLite,
                 ResourcesWebGPU,
-                loadImage,
-                loadJson,
+                loadYoga,
+                loadAssets: () => loadAssets({ loadImage, loadJson }),
+            }).then(({ uis }) => {
+                uis.forEach((ui) => ui.registerPlatformEvents())
             }).catch(console.error)
         </script>
     </body>

examples/engines/babylonlite-worldspace.ts

@@ -16,7 +16,7 @@ import {
     renderFrame,
     resizeEngine,
 } from '@babylonjs/lite'
-import { loadAssets, registerAssets } from '../shared/assets'
+import { registerAssets } from '../shared/assets'
 import { createBackgroundUI } from '../shared/uis/background-ui'
 import { createForegroundUI } from '../shared/uis/foreground-ui'
 
@@ -29,8 +29,8 @@ export async function main({
     ResourcesWebGPU,
     UI,
     UIBabylonLite,
-    loadImage,
-    loadJson,
+    loadAssets,
+    loadYoga,
 }) {
     const device_pixel_ratio = window.devicePixelRatio
     const device_width = Math.max(canvas.clientWidth, canvas.clientHeight)
@@ -48,14 +48,15 @@ export async function main({
         context,
         format: engine.format,
     })
-    const assets = await loadAssets({ loadImage, loadJson })
+    const assets = await loadAssets()
     registerAssets({ resources, assets })
 
-    const { ui: overlay_ui } = await UI.create({ resources, device_pixel_ratio })
+    const { ui: overlay_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
 
     const texture_width = Math.round(device_width * TEXTURE_SCALAR)
     const texture_height = Math.round(device_height * TEXTURE_SCALAR)
     const { ui: first_ui, plane: first_plane } = await UIBabylonLite.create({
+        loadYoga,
         engine,
         scene,
         resources,
@@ -66,6 +67,7 @@ export async function main({
         world_height: WORLD_HEIGHT,
     })
     const { ui: second_ui, plane: second_plane } = await UIBabylonLite.create({
+        loadYoga,
         engine,
         scene,
         resources,
@@ -181,6 +183,8 @@ export async function main({
     }
 
     requestAnimationFrame(frame)
+
+    return { uis: [overlay_ui, first_ui, second_ui] }
 }
 
 function syncCanvasSize({ canvas, overlay_ui }) {

examples/engines/babylonlite.html

@@ -23,9 +23,11 @@
     <body>
         <canvas></canvas>
         <script type="module">
-            import UI from '../../src/ui/UI'
+            import UI from '../../src/ui/UIWebGPU'
             import ResourcesWebGPU from '../../src/renderer/webgpu/ResourcesWebGPU'
             import { loadImage, loadJson } from '../shared/load-assets'
+            import { loadAssets } from '../shared/assets'
+            import { loadYoga } from 'yoga-layout/load'
             import { main } from './babylonlite.ts'
 
             const canvas = document.querySelector('canvas')
@@ -37,8 +39,10 @@
                 requestAnimationFrame,
                 UI,
                 ResourcesWebGPU,
-                loadImage,
-                loadJson,
+                loadYoga,
+                loadAssets: () => loadAssets({ loadImage, loadJson }),
+            }).then(({ uis }) => {
+                uis.forEach((ui) => ui.registerPlatformEvents())
             }).catch(console.error)
         </script>
     </body>

examples/engines/babylonlite.ts

@@ -15,11 +15,11 @@ import {
     renderFrame,
     resizeEngine,
 } from '@babylonjs/lite'
-import { loadAssets, registerAssets } from '../shared/assets'
+import { registerAssets } from '../shared/assets'
 import { createBackgroundUI } from '../shared/uis/background-ui'
 import { createForegroundUI } from '../shared/uis/foreground-ui'
 
-export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadImage, loadJson }) {
+export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadAssets, loadYoga }) {
     const engine = await createEngine(canvas, { msaaSamples: 1, alphaMode: 'premultiplied' })
     const scene = createSceneContext(engine, { defaultRenderTask: false })
 
@@ -66,10 +66,10 @@ export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadIma
         format: engine.format,
     })
     const device_pixel_ratio = window.devicePixelRatio
-    const { ui: background_ui } = await UI.create({ resources, device_pixel_ratio })
-    const { ui: foreground_ui } = await UI.create({ resources, device_pixel_ratio })
+    const { ui: background_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
+    const { ui: foreground_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
 
-    const assets = await loadAssets({ loadImage, loadJson })
+    const assets = await loadAssets()
     registerAssets({ resources, assets })
     const { grid } = createBackgroundUI({ ui: background_ui, assets, background_color: '#fbd0dd' })
     createForegroundUI({ ui: foreground_ui, assets, title: 'Hello Babylon Lite!' })
@@ -158,6 +158,8 @@ export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadIma
     }
 
     requestAnimationFrame(frame)
+
+    return { uis: [background_ui, foreground_ui] }
 }
 
 function syncCanvasSize({ canvas, background_ui, foreground_ui }) {

examples/engines/pixi.html

@@ -23,9 +23,11 @@
     <body>
         <canvas></canvas>
         <script type="module">
-            import UI from '../../src/ui/UI'
+            import UI from '../../src/ui/UIWebGPU'
             import ResourcesWebGPU from '../../src/renderer/webgpu/ResourcesWebGPU'
             import { loadImage, loadJson } from '../shared/load-assets'
+            import { loadAssets } from '../shared/assets'
+            import { loadYoga } from 'yoga-layout/load'
             import { main } from './pixi.ts'
 
             const canvas = document.querySelector('canvas')
@@ -35,8 +37,10 @@
                 onCanvasEvent,
                 UI,
                 ResourcesWebGPU,
-                loadImage,
-                loadJson,
+                loadYoga,
+                loadAssets: () => loadAssets({ loadImage, loadJson }),
+            }).then(({ uis }) => {
+                uis.forEach((ui) => ui.registerPlatformEvents())
             }).catch(console.error)
         </script>
     </body>

examples/engines/pixi.ts

@@ -1,18 +1,18 @@
 import { Container, DOMAdapter, Sprite, Texture, WebGPURenderer } from 'pixi.js'
-import { loadAssets, registerAssets } from '../shared/assets'
+import { registerAssets } from '../shared/assets'
 import { createBackgroundUI } from '../shared/uis/background-ui'
 import { createForegroundUI } from '../shared/uis/foreground-ui'
 
 const TEXTURE_SIZE = 256
 
 export { DOMAdapter }
 
-export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadImage, loadJson }) {
+export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadAssets, loadYoga }) {
     const adapter = await navigator.gpu.requestAdapter()
     const resources = await ResourcesWebGPU.create({ canvas, adapter })
     const device_pixel_ratio = window.devicePixelRatio
-    const { ui: background_ui } = await UI.create({ resources, device_pixel_ratio })
-    const { ui: foreground_ui } = await UI.create({ resources, device_pixel_ratio })
+    const { ui: background_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
+    const { ui: foreground_ui } = await UI.create({ loadYoga, resources, device_pixel_ratio })
 
     const pixi_renderer = new WebGPURenderer()
     await pixi_renderer.init({
@@ -33,7 +33,7 @@ export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadIma
     square.anchor.set(0.5)
     stage.addChild(square)
 
-    const assets = await loadAssets({ loadImage, loadJson })
+    const assets = await loadAssets()
     registerAssets({ resources, assets })
     const { grid } = createBackgroundUI({ ui: background_ui, assets, background_color: '#e2cff4' })
     createForegroundUI({ ui: foreground_ui, assets, title: 'Hello Pixi.js!' })
@@ -68,6 +68,8 @@ export async function main({ canvas, onCanvasEvent, UI, ResourcesWebGPU, loadIma
     }
 
     requestAnimationFrame(frame)
+
+    return { uis: [background_ui, foreground_ui] }
 }
 
 function syncCanvasSize({ canvas, pixi_renderer, square, background_ui, foreground_ui }) {

examples/engines/playcanvas-worldspace.html

@@ -24,9 +24,11 @@
         <canvas></canvas>
         <script type="module">
             import ResourcesWebGPU from '../../src/renderer/webgpu/ResourcesWebGPU'
-            import UI from '../../src/ui/UI'
-            import UIPlayCanvas from '../../src/ui/UIPlayCanvas'
+            import UI from '../../src/ui/UIWebGPU'
+            import UIPlayCanvas from '../../src/ui/UIWebGPUPlayCanvas'
             import { loadImage, loadJson } from '../shared/load-assets'
+            import { loadAssets } from '../shared/assets'
+            import { loadYoga } from 'yoga-layout/load'
             import { main } from './playcanvas-worldspace.ts'
 
             const canvas = document.querySelector('canvas')
@@ -37,8 +39,10 @@
                 ResourcesWebGPU,
                 UI,
                 UIPlayCanvas,
-                loadImage,
-                loadJson,
+                loadYoga,
+                loadAssets: () => loadAssets({ loadImage, loadJson }),
+            }).then(({ uis }) => {
+                uis.forEach((ui) => ui.registerPlatformEvents())
             }).catch(console.error)
         </script>
     </body>