Scene 37 - Sheen Wood Leather Sofa

No bundle info available. '; ``` -------------------------------- ### Basic HTML and CSS for Canvas Setup Source: https://github.com/babylonjs/babylon-lite/blob/master/lab/lite/scene37.html Sets up the basic HTML structure and CSS styling for a full-screen canvas element, commonly used for WebGL applications like Babylon.js. ```html Scene 37 - Sheen Wood Leather Sofa

``` -------------------------------- ### Render Loop Start and Frame Rendering Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/22-engine.md Defines the structure for starting the engine's render loop using `requestAnimationFrame` and handling the first frame resolution. It also shows how to stop the loop. ```javascript registerScene(scene): adds scene as a RenderingContext startEngine(engine): return new Promise(resolve => { renderFn = (now) => { resizeEngine(engine); deltaMs = now - prev renderFrame(engine, deltaMs); resolve() // first frame only prev = now animFrameId = requestAnimationFrame(renderFn); }; animFrameId = requestAnimationFrame(renderFn); }) stopEngine(engine): cancelAnimationFrame(animFrameId); animFrameId = 0; renderFn = null; ``` -------------------------------- ### Sound State Machine Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/41-audio-engine.md Details the state transitions for a sound instance, including Stopped, Starting, Started, Stopping, and Stopped states, with branches for Paused and FailedToStart. The onEnded event fires when the last instance concludes. ```javascript Stopped → Starting → Started → (Stopping) → Stopped, with Paused and FailedToStart branches — identical to soundState.ts. onEnded fires when the last instance ends (non-looping full play, or explicit stop). ``` -------------------------------- ### Initialize and Load Scene in Babylon.js Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/03-porting-guide.md This snippet demonstrates the standard Babylon.js method for initializing the engine, creating a scene, loading a glTF model, and setting up lighting and environment. ```typescript const engine = new WebGPUEngine(canvas); await engine.initAsync(); const scene = new Scene(engine); scene.clearColor = new Color4(0.2, 0.2, 0.3, 1); const light = new HemisphericLight("h", new Vector3(0, 1, 0), scene); light.intensity = 1.0; await SceneLoader.ImportMeshAsync("", baseUrl, "BoomBox.glb", scene); const envTex = new CubeTexture(envUrl, scene); scene.environmentTexture = envTex; scene.createDefaultCamera(true, true, true); scene.createDefaultEnvironment({ skyboxSize: 1000 }); engine.runRenderLoop(() => scene.render()); ``` -------------------------------- ### Pure 2D Sprite Renderer Setup Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/32-sprites.md Initializes a SpriteRenderer for a pure 2D application without a SceneContext. This setup involves creating an engine, loading a sprite atlas, creating a layer, adding sprites, and registering the renderer. ```typescript const engine = await createEngine(canvas); const atlas = await loadSpriteAtlas(engine, "sprites.png", { gridSize: [32, 32] }); const layer = createSprite2DLayer(atlas); sprite2DIndex(layer, { positionPx: [100, 200], sizePx: [64, 64], frame: 0 }); const sr = createSpriteRenderer(engine, { layers: [layer], clearValue: { r: 0, g: 0, b: 0, a: 1 }, }); registerSpriteRenderer(sr); await startEngine(engine); ``` -------------------------------- ### Material Stencil Usage Example Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/40-material-stencil.md Illustrates how to configure a material to write to the stencil buffer using `compare: "always"` and `passOp: "increment-clamp"`. This example shows how a 'writer' material increments the stencil value where it draws. ```typescript // Mask/test without a dynamic reference: a **writer** uses `compare: "always"` + `passOp: "increment-clamp"` // (stencil 0 → 1 where it draws); a **tester** uses `compare: "equal"`, which passes only where the stencil is // still the render pass's default reference of `0` (i.e. NOT written). ``` -------------------------------- ### Initialize Demos Grid Source: https://github.com/babylonjs/babylon-lite/blob/master/lab/index.html Renders the demos grid by iterating over a provided 'demos' array. It generates HTML for each demo card, including images, titles, descriptions, tags, and hide buttons. Requires helper functions like 'renderHideBtn', 'escapeAttr', 'normalizeSearchText', and 'renderDemoFilterPills'. ```javascript function initDemosGrid(demos) { var grid = document.getElementById("demos-grid"); if (!grid) return; grid.innerHTML = (demos || []).map(function (d) { var demoKey = "demo-" + d.slug; var tags = d.tags || []; var searchAttr = escapeAttr(normalizeSearchText([demoKey, d.slug, d.name, d.description, tags.join(" ")].join(" "))); return ( '' + renderHideBtn(demoKey) + '

' + '

' + escapeAttr(d.name) + '

' + '

' + escapeAttr(d.description) + '

' + renderBadges(tags, DEMO_TAG_LABELS) + '

' + '

' ); }).join(""); renderDemoFilterPills(demos); } ``` -------------------------------- ### startAnimationManager Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/07-animation.md Starts the animation playback for all animations managed by an AnimationManager. ```APIDOC ## startAnimationManager ### Description Starts the animation playback for all animations managed by an AnimationManager. ### Parameters - **manager** (AnimationManager) - The animation manager. ``` -------------------------------- ### Engine and Render Loop Initialization Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/03-porting-guide.md Babylon Lite uses `startEngine` which returns a promise resolving after the first frame, whereas Babylon.js uses `runRenderLoop` with a callback. ```typescript // ❌ Babylon.js const engine = new WebGPUEngine(canvas); await engine.initAsync(); const scene = new Scene(engine); // ... setup ... engine.runRenderLoop(() => scene.render()); // ✅ Babylon Lite const engine = await createEngine(canvas); const scene = createSceneContext(engine); // ... setup ... await startEngine(engine); ``` -------------------------------- ### Load Bundle Manifests Source: https://github.com/babylonjs/babylon-lite/blob/master/lab/index.html Fetches the main bundle manifest and an optional master manifest, then updates the bundle summary. ```javascript function loadBundleManifest() { Promise.all(\[ fetch("/bundle/manifest.json?t=" + Date.now(), { cache: "no-store" }).then(function (r) { return r.json(); }), fetchOptionalJson("/bundle/master-manifest.json"), \] ) .then(function (r) { var manifest = r\[0\]; var masterManifest = r\[1\]; setBundleMasterStatus(masterManifest); updateBundleSummary(manifest, masterManifest); var bjsCount = 0; for (var scene in manifest) { if (!manifest.hasOwnProperty(scene)) continue; var sizes = manifest\[scene\]; var masterSizes = masterManifest && masterManifest\[scene\]; var card = document.querySelector('\\[data-scene="' + scene + '"\\] .size-info'); if (!card) continue; var html = '

; ``` -------------------------------- ### Stop Static Sound Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/41-audio-engine.md Stops the playback of a static sound and resets its playback position to the start. ```typescript export function stopSound(sound: StaticSound): void; ``` -------------------------------- ### Build and Run Parity Tests on Cloud Source: https://github.com/babylonjs/babylon-lite/blob/master/TESTING.md Build bundle scenes and execute parity tests using cloud configurations. Requires BrowserStack credentials to be set. ```sh pnpm build:bundle-scenes pnpm test:parity-cloud ``` -------------------------------- ### Get Regeneration Toolbar Button Source: https://github.com/babylonjs/babylon-lite/blob/master/lab/index.html Retrieves the regeneration button element from the toolbar for a given target. ```javascript function _genToolbarBtn(target) { return document.getElementById(target + "-regen-btn"); } ``` -------------------------------- ### Get View Matrix Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/01-getting-started.md Behavior functions, such as `getViewMatrix`, operate on data objects and are separate from the object definitions. ```typescript getViewMatrix(camera); ``` -------------------------------- ### Run Unit Tests (GPU-free) Source: https://github.com/babylonjs/babylon-lite/blob/master/packages/babylon-lite-compat/CONTRIBUTING.md Execute unit tests for math, observables, engine/scene APIs, and bundler resolver without requiring a GPU. ```sh pnpm exec vitest run --project compat ``` -------------------------------- ### Scene-Based Sprite Animation Setup Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/32-sprites.md Demonstrates how to set up sprite animations attached to a Babylon.js scene. This involves creating a scene context, loading a sprite atlas, creating a sprite layer, and attaching animations to the scene's render loop. ```typescript const scene = createSceneContext(engine); const atlas = await loadSpriteAtlas(engine, "sprites.png", { gridSize: [32, 32] }); const layer = createSprite2DLayer(atlas, { depth: "test" }); addDepthHostedSpriteLayer(scene, layer); const animMgr = createSpriteAnimationManager(); attachSpriteAnimationsToScene(scene, animMgr); const handle = addSprite2D(layer, { positionPx: [100, 200], sizePx: [64, 64], frame: 0 }); playSprite2DAnimation(animMgr, handle, 0, 7, true, 100); // 8-frame loop at 100ms/frame ``` -------------------------------- ### Initialize and Load Scene in Babylon Lite Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/03-porting-guide.md This snippet shows the Babylon Lite approach to creating an engine, scene context, loading glTF models, and setting up the environment. ```typescript const engine = await createEngine(canvas); const scene = createSceneContext(engine); addToScene(scene, await loadGltf(engine, "BoomBox.glb")); await loadEnvironment(scene, envUrl, { skyboxUrl: "skybox.dds", skyboxSize: 1000, groundTextureUrl: "ground.png", brdfUrl: "/brdf-lut.png", }); const cam = createDefaultCamera(scene); attachControl(cam, canvas, scene); addToScene(scene, createHemisphericLight([0, 1, 0], 1.0)); await startEngine(engine); ``` -------------------------------- ### Get Performance Regression Label Source: https://github.com/babylonjs/babylon-lite/blob/master/lab/index.html Generates a display label for a performance regression, showing the delta percentage or 'inconclusive'. ```javascript function perfRegLabel(e) { return perfRegVerdict(e) === "inconclusive" ? "inconclusive" : fmtDelta(e.avgDeltaPct); } ``` -------------------------------- ### Create a Basic Babylon.js Lite Scene Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/01-getting-started.md This snippet shows the core structure for a minimal Babylon.js Lite application. It initializes the engine, scene, camera, light, and a sphere with a PBR material. Follow the 'create → add → register → start' pattern. ```typescript import { createEngine, createSceneContext, createArcRotateCamera, attachControl, createHemisphericLight, createSphere, createPbrMaterial, addToScene, registerScene, startEngine, } from "@babylonjs/lite"; const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; // 1. Engine const engine = await createEngine(canvas); // 2. Scene const scene = createSceneContext(engine); // Camera (plain data) — set it on the scene, then attach input handling const camera = createArcRotateCamera(-Math.PI / 2, Math.PI / 2.5, 4, { x: 0, y: 0, z: 0 }); scene.camera = camera; attachControl(camera, canvas, scene); // Light addToScene(scene, createHemisphericLight([0, 1, 0], 1.0)); // A sphere with a simple PBR material const sphere = createSphere(engine, { segments: 16, diameter: 2 }); sphere.material = createPbrMaterial({ baseColorFactor: [0.9, 0.1, 0.1, 1], metallicFactor: 0.1, roughnessFactor: 0.4 }); addToScene(scene, sphere); // 3. Register (after everything is added) await registerScene(scene); // 4. Start the render loop await startEngine(engine); ``` ```html

``` -------------------------------- ### Get Master Lookups Source: https://github.com/babylonjs/babylon-lite/blob/master/lab/index.html Retrieves or computes lookup tables for master chunk and module bytes. Caches the result for performance. ```javascript function getMasterLookups() { if (state.source !== "local" || !state.sources.master) return null; if (state.masterLookups) return state.masterLookups; var chunkBytes = {}; var moduleBytes = {}; var chunks = state.sources.master.info.chunks || []; for (var i = 0; i < chunks.length; i++) { chunkBytes[chunkSortKey(chunks[i].file)] = chunks[i].bytes; } buildModuleList(chunks).forEach(function (m) { moduleBytes[m.id] = m.bytes; }); state.masterLookups = { chunkBytes: chunkBytes, moduleBytes: moduleBytes }; return state.masterLookups; } ``` -------------------------------- ### Build Publishable Distribution Source: https://github.com/babylonjs/babylon-lite/blob/master/packages/babylon-lite-compat/CONTRIBUTING.md Create the distributable files for the @babylonjs/lite-compat package, including ESM and .d.ts files. ```sh pnpm --filter @babylonjs/lite-compat build ``` -------------------------------- ### Get Float Frequency Data Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/41-audio-engine.md Retrieves the frequency data of a sound or audio bus as an array of 32-bit floating-point numbers. ```typescript export function getFloatFrequencyData(sound: StaticSound | AudioBus, out: Float32Array): void; ``` -------------------------------- ### Create and Load PBR Material Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/06-pbr-material.md Demonstrates manual creation of a PBR material with various texture and layer properties, and shows how materials are automatically built when loading glTF models. Ensure textures are loaded before assigning them. ```typescript // Manual creation const mat = createPbrMaterial({ baseColorTexture: await loadTexture2D(engine, "albedo.png"), normalTexture: await loadTexture2D(engine, "normal.png"), ormTexture: await loadTexture2D(engine, "orm.png"), clearCoat: { isEnabled: true, intensity: 1, roughness: 0.1 }, sheen: { isEnabled: true, color: [1, 1, 1], roughness: 0.5 }, }); // From glTF (automatic — loadGltf() builds PbrMaterialProps internally) addToScene(scene, await loadGltf(engine, "model.glb")); ``` -------------------------------- ### Create Audio Engine Async Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/41-audio-engine.md Asynchronously creates an instance of the audio engine. Options can configure the audio context, parameter ramp duration, initial volume, and interaction-based resumption. ```typescript export function createAudioEngineAsync(options?: AudioEngineOptions): Promise; ``` -------------------------------- ### Get Byte Frequency Data Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/41-audio-engine.md Retrieves the frequency data of a sound or audio bus as an array of unsigned 8-bit integers. ```typescript export function getByteFrequencyData(sound: StaticSound | AudioBus, out: Uint8Array): void; ``` -------------------------------- ### Pure-2D Sprite Animation Setup Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/32-sprites.md Illustrates setting up sprite animations for a pure-2D rendering context without direct scene attachment. This requires manually creating a sprite renderer and attaching animations to it. ```typescript // Pure-2D with manual update const sr = createSpriteRenderer(engine, { layers: [layer] }); const binding = attachSpriteAnimationsToRenderer(sr, animMgr); // Animation now updates before sprite uploads ``` -------------------------------- ### Get Picked UV Source: https://github.com/babylonjs/babylon-lite/blob/master/docs/lite/architecture/18-picking.md Interpolates the UV coordinates at the picked point using barycentric coordinates. This is useful for texture mapping. ```typescript /** Interpolate the UV at the picked point using barycentric coords. */ function getPickedUV(info: PickingInfo): [number, number] | null; ``` -------------------------------- ### Capture Golden Reference Image Commands Source: https://github.com/babylonjs/babylon-lite/blob/master/CONTRIBUTING.md Bash commands to start the development server and capture the golden reference image for a scene. ```bash # Start the dev server pnpm dev:lab # In another terminal, capture the golden pnpm exec tsx scripts/capture-golden.ts --scene N ```