From 85b56c7e92f5a48ff538be09ff37213247a8b174 Mon Sep 17 00:00:00 2001
From: Josema
Date: Wed, 30 Sep 2026 09:48:31 +0200
Subject: [PATCH 1/4] Passing loadYoga and loadAssets to engines examples
---
examples/engines/babylon-worldspace.html | 12 ++++++++----
examples/engines/babylon-worldspace.ts | 14 +++++++++-----
examples/engines/babylon.html | 10 +++++++---
examples/engines/babylon.ts | 12 +++++++-----
examples/engines/babylonlite-worldspace.html | 12 ++++++++----
examples/engines/babylonlite-worldspace.ts | 14 +++++++++-----
examples/engines/babylonlite.html | 10 +++++++---
examples/engines/babylonlite.ts | 12 +++++++-----
examples/engines/pixi.html | 10 +++++++---
examples/engines/pixi.ts | 12 +++++++-----
examples/engines/playcanvas-worldspace.html | 12 ++++++++----
examples/engines/playcanvas-worldspace.ts | 14 +++++++++-----
examples/engines/playcanvas.html | 10 +++++++---
examples/engines/playcanvas.ts | 12 +++++++-----
examples/engines/three-worldspace.html | 12 ++++++++----
examples/engines/three-worldspace.ts | 14 +++++++++-----
examples/engines/three.html | 10 +++++++---
examples/engines/three.ts | 10 +++++++---
examples/engines/typegpu.html | 10 +++++++---
examples/engines/typegpu.ts | 12 +++++++-----
examples/engines/webgpu.html | 10 +++++++---
examples/engines/webgpu.ts | 12 +++++++-----
22 files changed, 166 insertions(+), 90 deletions(-)
diff --git a/examples/engines/babylon-worldspace.html b/examples/engines/babylon-worldspace.html
index 29704ec..0d04f4a 100644
--- a/examples/engines/babylon-worldspace.html
+++ b/examples/engines/babylon-worldspace.html
@@ -23,10 +23,12 @@
diff --git a/examples/engines/babylon-worldspace.ts b/examples/engines/babylon-worldspace.ts
index 0079ae7..d33d5fe 100644
--- a/examples/engines/babylon-worldspace.ts
+++ b/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 }) {
diff --git a/examples/engines/babylon.html b/examples/engines/babylon.html
index ccc8d0a..ea310f5 100644
--- a/examples/engines/babylon.html
+++ b/examples/engines/babylon.html
@@ -23,9 +23,11 @@
diff --git a/examples/engines/babylon.ts b/examples/engines/babylon.ts
index 9ff450e..86eed27 100644
--- a/examples/engines/babylon.ts
+++ b/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 }) {
diff --git a/examples/engines/babylonlite-worldspace.html b/examples/engines/babylonlite-worldspace.html
index 1aaebd9..40032f1 100644
--- a/examples/engines/babylonlite-worldspace.html
+++ b/examples/engines/babylonlite-worldspace.html
@@ -23,10 +23,12 @@
diff --git a/examples/engines/babylonlite-worldspace.ts b/examples/engines/babylonlite-worldspace.ts
index f2de5d7..9e3224b 100644
--- a/examples/engines/babylonlite-worldspace.ts
+++ b/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 }) {
diff --git a/examples/engines/babylonlite.html b/examples/engines/babylonlite.html
index 879e435..5616dc1 100644
--- a/examples/engines/babylonlite.html
+++ b/examples/engines/babylonlite.html
@@ -23,9 +23,11 @@
diff --git a/examples/engines/babylonlite.ts b/examples/engines/babylonlite.ts
index a2d13aa..7b5f4b7 100644
--- a/examples/engines/babylonlite.ts
+++ b/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 }) {
diff --git a/examples/engines/pixi.html b/examples/engines/pixi.html
index 17b6396..acceb6b 100644
--- a/examples/engines/pixi.html
+++ b/examples/engines/pixi.html
@@ -23,9 +23,11 @@
diff --git a/examples/engines/pixi.ts b/examples/engines/pixi.ts
index d56a01b..62fbe00 100644
--- a/examples/engines/pixi.ts
+++ b/examples/engines/pixi.ts
@@ -1,5 +1,5 @@
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'
@@ -7,12 +7,12 @@ 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 }) {
diff --git a/examples/engines/playcanvas-worldspace.html b/examples/engines/playcanvas-worldspace.html
index d432f3c..231f931 100644
--- a/examples/engines/playcanvas-worldspace.html
+++ b/examples/engines/playcanvas-worldspace.html
@@ -24,9 +24,11 @@