Strip core to render data and render graphs

Move glTF, picking, camera controls, and conventional handles into addons. Keep camera and material mutations in SIMD-aligned shared SOA rows and synchronize material updates directly into GPU buffers.

Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae
Co-authored-by: Heaust Azure <heaust.azure@gmail.com>

examples/render-graph-studio/demo-loadouts.js

@@ -21,7 +21,7 @@ export function encodeGeometryGlb({positions,normals,texcoords,indices}) {
   const vertexCount=streams[0].length/3, bounds=finiteMinMax(streams[0],3);
   if(indices.some(value=>value>=vertexCount))throw new TypeError("Invalid demo geometry");
   const nodes=[]; for(let z=-1;z<=1;z++)for(let x=-1;x<=1;x++)nodes.push({mesh:0,translation:[x*3,0,z*3]});
-  const json={asset:{version:"2.0",generator:"yawn-phase8"},scene:0,scenes:[{nodes:nodes.map((_,i)=>i)}],nodes,meshes:[{primitives:[{attributes:{POSITION:0,NORMAL:1,TEXCOORD_0:2},indices:3}]}],buffers:[{byteLength}],bufferViews:views,accessors:[
+  const json={asset:{version:"2.0",generator:"yawn-demo"},scene:0,scenes:[{nodes:nodes.map((_,i)=>i)}],nodes,meshes:[{primitives:[{attributes:{POSITION:0,NORMAL:1,TEXCOORD_0:2},indices:3}]}],buffers:[{byteLength}],bufferViews:views,accessors:[
     {bufferView:0,componentType:5126,count:vertexCount,type:"VEC3",min:bounds.min,max:bounds.max},
     {bufferView:1,componentType:5126,count:vertexCount,type:"VEC3"},
     {bufferView:2,componentType:5126,count:vertexCount,type:"VEC2"},
@@ -57,7 +57,7 @@ const galleryPngBase64=Object.freeze({
 });
 const decodeBase64=value=>{const binary=atob(value),bytes=new Uint8Array(binary.length);for(let i=0;i<binary.length;i++)bytes[i]=binary.charCodeAt(i);return bytes;};
 
-/** Build the deterministic Phase 6 PBR shader validation gallery. */
+/** Build a deterministic PBR shader validation gallery. */
 export function createMaterialGalleryGlb(){
   // A modest shared sphere keeps the embedded GLB compact while making roughness
   // and normal-map responses much easier to compare than the former cubes.
@@ -78,7 +78,7 @@ export function createMaterialGalleryGlb(){
   ];
   const nodes=materials.map((material,index)=>({name:material.name,mesh:index,translation:[(index%4-1.5)*2.5,(1.5-Math.floor(index/4))*2.5,0],...(index===15?{scale:[-1.25,0.7,1.1]}:{})}));
   const meshes=materials.map((material,index)=>({name:material.name,primitives:[{attributes:{POSITION:0,NORMAL:1,TEXCOORD_0:2},indices:3,material:index}]}));
-  const json={asset:{version:"2.0",generator:"yawn-phase6-pbr-gallery"},extensionsUsed:["KHR_materials_ior"],scene:0,scenes:[{name:"Phase 6 deterministic PBR gallery",nodes:nodes.map((_,i)=>i)}],nodes,meshes,materials,
+  const json={asset:{version:"2.0",generator:"yawn-pbr-gallery"},extensionsUsed:["KHR_materials_ior"],scene:0,scenes:[{name:"Deterministic PBR gallery",nodes:nodes.map((_,i)=>i)}],nodes,meshes,materials,
     samplers:[{magFilter:9728,minFilter:9728,wrapS:10497,wrapT:10497}],images:images.map((_,i)=>({name:["Odd-width sRGB base color and emissive","Odd-width linear MR and AO","Odd-width OpenGL normal map"][i],bufferView:i+4,mimeType:"image/png"})),textures:images.map((_,i)=>({sampler:0,source:i})),
     buffers:[{byteLength}],bufferViews,accessors:[{bufferView:0,componentType:5126,count:vertexCount,type:"VEC3",min:bounds.min,max:bounds.max},{bufferView:1,componentType:5126,count:vertexCount,type:"VEC3"},{bufferView:2,componentType:5126,count:vertexCount,type:"VEC2"},{bufferView:3,componentType:5125,count:geometry.indices.length,type:"SCALAR"}]};
   let jsonBytes=encoder.encode(JSON.stringify(json));const jsonLength=align4(jsonBytes.length),total=12+8+jsonLength+8+byteLength,out=new ArrayBuffer(total),view=new DataView(out),bytes=new Uint8Array(out);

examples/render-graph-studio/index.html

@@ -71,11 +71,6 @@
         text-transform: uppercase;
         letter-spacing: 0.08em;
       }
-      #profile-menu { min-width: 210px; color: #9da9ba; }
-      #profile-menu summary { cursor: pointer; color: #eef2f8; }
-      #profile-menu table { width: 100%; font-size: 11px; }
-      #profile-menu th { text-align: left; font-weight: 500; }
-      #profile-menu td { text-align: right; font-variant-numeric: tabular-nums; }
       select,
       button {
         font: inherit;
@@ -165,7 +160,7 @@
             >Scene loadout<select id="loadout-select">
               <option value="cubes">Cubes</option>
               <option value="spheres">UV spheres</option>
-              <option value="materials">Phase 6 PBR gallery</option>
+              <option value="materials">PBR material gallery</option>
             </select></label
           ><label class="field" for="graph-select"
             >Graph preset<select id="graph-select">
@@ -175,7 +170,7 @@
           >
         </div>
         <canvas id="canvas0"></canvas
-        ><output id="demo-status" aria-live="polite">Starting Phase 8…</output>
+        ><output id="demo-status" aria-live="polite">Starting renderer…</output>
       </section>
       <section class="editor" aria-label="Render graph editor">
         <div class="editor-bar">

examples/render-graph-studio/index.js

@@ -1,5 +1,6 @@
 import { YawnCore, RendererError } from "@yawn/core";
-import { MeshHandles, createPickingWorker } from "@yawn/mesh-handles";
+import { MeshHandles } from "@yawn/mesh-handles";
+import { installCameraRenderDataControls } from "../cookbook/16-camera-render-data.js";
 import { loadDemoLoadout } from "./demo-loadouts.js";
 import { adaptFxNodeSnapshot } from "@yawn/render-graph-fxnode";
 import { createGraphAst } from "@yawn/render-graph-ast";
@@ -37,11 +38,7 @@ const state = {
   compiled: {},
   telemetry: null,
 };
-export const profileRequested = (search) =>
-  new URLSearchParams(search).get("profile") === "1";
-const profileEnabled = profileRequested(location.search);
-
-function createWorkerTransport(profile) {
+function createWorkerTransport() {
   const canvas = document.querySelector("#canvas0");
   const dpr = devicePixelRatio;
   canvas.width = Math.round(Math.max(1, canvas.clientWidth) * dpr);
@@ -62,16 +59,6 @@ function createWorkerTransport(profile) {
       kind,
       values: new Float64Array(values),
     });
-  const mouseValues = (event) => [
-    devicePixelRatio,
-    event.buttons,
-    event.movementX,
-    event.movementY,
-    event.offsetX,
-    event.offsetY,
-    Math.max(1, canvas.clientHeight),
-  ];
-
   addEventListener(
     "resize",
     () =>
@@ -82,106 +69,19 @@ function createWorkerTransport(profile) {
       ]),
     options,
   );
-  canvas.addEventListener(
-    "pointerdown",
-    (event) => {
-      if (event.pointerType === "mouse" && (event.button === 1 || event.button === 2)) {
-        event.preventDefault();
-        canvas.setPointerCapture(event.pointerId);
-      }
-    },
-    options,
-  );
-  canvas.addEventListener(
-    "pointermove",
-    (event) => {
-      if (
-        event.pointerType === "mouse" &&
-        canvas.hasPointerCapture(event.pointerId) &&
-        (event.buttons & 6) !== 0
-      ) {
-        event.preventDefault();
-        post(1, mouseValues(event));
-      }
-    },
-    options,
-  );
-  for (const type of ["pointerup", "pointercancel"]) {
-    canvas.addEventListener(
-      type,
-      (event) => {
-        if (canvas.hasPointerCapture(event.pointerId)) {
-          canvas.releasePointerCapture(event.pointerId);
-        }
-      },
-      options,
-    );
-  }
-  canvas.addEventListener(
-    "click",
-    (event) => {
-      if (event.button === 0) post(2, mouseValues(event));
-    },
-    options,
-  );
-  canvas.addEventListener(
-    "wheel",
-    (event) => {
-      event.preventDefault();
-      const delta =
-        event.deltaMode === 0
-          ? event.deltaY
-          : event.deltaMode === 1
-            ? event.deltaY * 16
-            : event.deltaMode === 2
-              ? event.deltaY * Math.max(1, canvas.clientHeight)
-              : null;
-      if (Number.isFinite(delta)) post(3, [delta]);
-    },
-    { ...options, passive: false },
-  );
-  canvas.addEventListener("contextmenu", (event) => event.preventDefault(), options);
-
   const offscreen = canvas.transferControlToOffscreen();
-  worker.postMessage({ type: "init", canvas: offscreen, profile }, [offscreen]);
+  worker.postMessage({ type: "init", canvas: offscreen }, [offscreen]);
   return {
     worker,
-    pickingWorkerFactory: createPickingWorker,
     free() {
       abort.abort();
     },
   };
 }
 
-function installProfileMenu() {
-  if (!profileEnabled) return;
-  const menu = document.createElement("details");
-  menu.id = "profile-menu";
-  menu.innerHTML =
-    '<summary>GPU profile</summary><div id="profile-status">Waiting for GPU timestamps…</div><table><tbody id="profile-passes"></tbody></table>';
-  document.querySelector(".toolbar")?.append(menu);
-  on(renderer, "renderer-profile", (event) => {
-    const p = event.detail;
-    document.querySelector("#profile-status").textContent = p.available
-      ? `${p.graph} · epoch ${p.epoch} · ${p.dropped} dropped`
-      : "GPU timestamps unavailable";
-    document.querySelector("#profile-passes").replaceChildren(
-      ...Object.entries(p.passes || {}).map(([id, ms]) => {
-        const row = document.createElement("tr"),
-          name = document.createElement("th"),
-          value = document.createElement("td");
-        name.textContent = id;
-        value.textContent = `${Number(ms).toFixed(3)} ms`;
-        row.append(name, value);
-        return row;
-      }),
-    );
-  });
-}
-
 function publish(telemetry) {
   state.telemetry = telemetry;
-  document.documentElement.dataset.phase8State = JSON.stringify({
+  document.documentElement.dataset.yawnState = JSON.stringify({
     activeLoadout: state.loadout,
     activeGraph: state.graph,
     renderDataRevision: telemetry.revision,
@@ -195,7 +95,6 @@ function publish(telemetry) {
     draws: telemetry.draws,
     instances: telemetry.instances,
     indices: telemetry.indices,
-    framingRadius: telemetry.framingRadius,
     gpuError: telemetry.gpuError,
   });
 }
@@ -252,9 +151,9 @@ async function transaction(label, operation, rollback) {
       try {
         await rollback?.();
       } catch (rollbackError) {
-        console.error("Phase 8 rollback failed", rollbackError);
+        console.error("Render graph rollback failed", rollbackError);
       }
-      console.error("Phase 8 transaction failed", error);
+      console.error("Render graph transaction failed", error);
       status(`Failed · ${error?.code ?? error?.message ?? error}`);
     }
     return false;
@@ -328,6 +227,7 @@ async function cleanup() {
     await editor?.destroy();
   } finally {
     gltfImporter?.dispose();
+    meshHandles?.dispose();
     renderer?.dispose();
   }
 }
@@ -337,12 +237,15 @@ const pagehide = () => {
 
 async function start() {
   addEventListener("pagehide", pagehide, { once: true });
-  delete document.documentElement.dataset.phase8Ready;
-  renderer = new YawnCore(createWorkerTransport(profileEnabled));
+  delete document.documentElement.dataset.yawnReady;
+  const transport = createWorkerTransport();
+  renderer = new YawnCore(transport);
   meshHandles = new MeshHandles(renderer);
   gltfImporter = new GltfImporter(renderer);
-  installProfileMenu();
   await renderer.ready;
+  listeners.push(
+    installCameraRenderDataControls(renderer, document.querySelector("#canvas0")),
+  );
   const nextEditor = await createRenderGraphEditor(
     document.querySelector("#graph-editor"),
   );
@@ -465,11 +368,11 @@ async function start() {
     },
   );
   if (!initialized) throw new Error("Initial demo transaction failed");
-  document.documentElement.dataset.phase8Ready = "true";
+  document.documentElement.dataset.yawnReady = "true";
 }
 const startupError = (error) => {
   if (cleaned) return;
-  console.error("Phase 8 startup failed", error);
+  console.error("Render graph startup failed", error);
   status(`Startup failed · ${error?.code ?? error}`);
   void cleanup();
 };