feat: add render graph driven renderer architecture
Amp-Thread-ID: https://ampcode.com/threads/T-019f9d91-77c1-7206-a60f-ed6554ce92ab Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
This commit is contained in:
Amp
@@ -0,0 +1,25 @@
|
||||
export class DerivedBvh {
|
||||
constructor() { this.count = 0; this.identity = new Uint32Array(); this.meshIdentity = new Uint32Array(); this.pickable = new Uint8Array(); this.bounds = new Float32Array(); this.nodeBounds = new Float32Array(); this.left = this.right = new Int32Array(); this.leafStart = this.leafCount = new Uint32Array(); this.leaves = new Uint32Array(); this.root = -1; this.rebuilds = 0; this.refits = 0; }
|
||||
update(snapshot) {
|
||||
const s = snapshot.streams, n = snapshot.instanceCount;
|
||||
let changed = n !== this.count;
|
||||
if (!changed) for (let i = 0; i < n; i++) if (this.identity[i * 2] !== s.instanceSlot[i] || this.identity[i * 2 + 1] !== s.instanceGeneration[i] || this.meshIdentity[i * 2] !== s.instanceMeshSlot[i] || this.meshIdentity[i * 2 + 1] !== s.instanceMeshGeneration[i]) { changed = true; break; }
|
||||
this.count = n; this.identity = new Uint32Array(n * 2); this.meshIdentity = new Uint32Array(n * 2); this.pickable = new Uint8Array(n); this.bounds = new Float32Array(n * 6);
|
||||
for (let i = 0; i < n; i++) { this.identity.set([s.instanceSlot[i], s.instanceGeneration[i]], i * 2); this.meshIdentity.set([s.instanceMeshSlot[i], s.instanceMeshGeneration[i]], i * 2); this.pickable[i] = !!s.instancePickable[i]; this.bounds.set(s.instanceWorldMin.subarray(i * 3, i * 3 + 3), i * 6); this.bounds.set(s.instanceWorldMax.subarray(i * 3, i * 3 + 3), i * 6 + 3); }
|
||||
changed ? this.rebuild() : this.refit();
|
||||
}
|
||||
rebuild() {
|
||||
this.rebuilds++; const nodes = [], leaves = [];
|
||||
const build = indices => { const at = nodes.length, node = {left: -1, right: -1, start: 0, count: 0, bounds: [Infinity, Infinity, Infinity, -Infinity, -Infinity, -Infinity]}; nodes.push(node); for (const i of indices) for (let a = 0; a < 3; a++) { node.bounds[a] = Math.min(node.bounds[a], this.bounds[i * 6 + a]); node.bounds[a + 3] = Math.max(node.bounds[a + 3], this.bounds[i * 6 + a + 3]); } if (indices.length <= 2) { node.start = leaves.length; node.count = indices.length; leaves.push(...indices); return at; } let axis = 0, extent = node.bounds[3] - node.bounds[0]; for (let a = 1; a < 3; a++) if (node.bounds[a + 3] - node.bounds[a] > extent) { axis = a; extent = node.bounds[a + 3] - node.bounds[a]; } indices.sort((a, b) => (this.bounds[a * 6 + axis] + this.bounds[a * 6 + axis + 3]) - (this.bounds[b * 6 + axis] + this.bounds[b * 6 + axis + 3]) || a - b); const mid = indices.length >> 1; node.left = build(indices.slice(0, mid)); node.right = build(indices.slice(mid)); return at; };
|
||||
this.root = this.count ? build(Array.from({length: this.count}, (_, i) => i)) : -1; const n = nodes.length;
|
||||
this.nodeBounds = new Float32Array(n * 6); this.left = new Int32Array(n); this.right = new Int32Array(n); this.leafStart = new Uint32Array(n); this.leafCount = new Uint32Array(n); this.leaves = Uint32Array.from(leaves);
|
||||
nodes.forEach((x, i) => { this.nodeBounds.set(x.bounds, i * 6); this.left[i] = x.left; this.right[i] = x.right; this.leafStart[i] = x.start; this.leafCount[i] = x.count; });
|
||||
}
|
||||
refit() { this.refits++; for (let n = this.left.length - 1; n >= 0; n--) { const at = n * 6; for (let a = 0; a < 3; a++) { let lo = Infinity, hi = -Infinity; if (this.leafCount[n]) for (let j = 0; j < this.leafCount[n]; j++) { const i = this.leaves[this.leafStart[n] + j]; lo = Math.min(lo, this.bounds[i * 6 + a]); hi = Math.max(hi, this.bounds[i * 6 + a + 3]); } else { lo = Math.min(this.nodeBounds[this.left[n] * 6 + a], this.nodeBounds[this.right[n] * 6 + a]); hi = Math.max(this.nodeBounds[this.left[n] * 6 + a + 3], this.nodeBounds[this.right[n] * 6 + a + 3]); } this.nodeBounds[at + a] = lo; this.nodeBounds[at + a + 3] = hi; } } }
|
||||
pick(origin, direction, maxDistance = Infinity, maxHits = 1) {
|
||||
if (this.root < 0) return []; let magnitude = Math.hypot(...direction); const dir = direction.map(v => v / magnitude);
|
||||
const intersect = (array, at) => { let lo = 0, hi = maxDistance; for (let a = 0; a < 3; a++) { const min = array[at + a], max = array[at + a + 3]; if (dir[a] === 0) { if (origin[a] < min || origin[a] > max) return Infinity; } else { let x = (min - origin[a]) / dir[a], y = (max - origin[a]) / dir[a]; if (x > y) [x, y] = [y, x]; lo = Math.max(lo, x); hi = Math.min(hi, y); if (lo > hi) return Infinity; } } return lo; };
|
||||
const hits = [], stack = [this.root]; while (stack.length) { const n = stack.pop(); if (intersect(this.nodeBounds, n * 6) === Infinity) continue; if (this.leafCount[n]) for (let j = 0; j < this.leafCount[n]; j++) { const i = this.leaves[this.leafStart[n] + j]; if (!this.pickable[i]) continue; const distance = intersect(this.bounds, i * 6); if (distance !== Infinity) hits.push({slot: this.identity[i * 2], generation: this.identity[i * 2 + 1], distance}); } else stack.push(this.right[n], this.left[n]); }
|
||||
hits.sort((a, b) => a.distance - b.distance || a.slot - b.slot || a.generation - b.generation); return hits.slice(0, maxHits);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import {SnapshotReader} from "./render-data-snapshot.js";
|
||||
import {DerivedBvh} from "./bvh-core.js";
|
||||
|
||||
let reader, bvh = new DerivedBvh(), epoch = 0, updating = false, requestedEpoch = 0;
|
||||
function ensureEpoch(expected) {
|
||||
if (!reader) return false;
|
||||
const latest = reader.latest();
|
||||
if (latest.epoch !== expected) return false;
|
||||
if (epoch === expected) return true;
|
||||
const result = reader.transaction(snapshot => { bvh.update(snapshot); epoch = snapshot.epoch; }, expected);
|
||||
return result !== null && epoch === expected;
|
||||
}
|
||||
function coalescedUpdate(hint = 0) {
|
||||
requestedEpoch = Math.max(requestedEpoch, hint >>> 0);
|
||||
if (updating) return;
|
||||
updating = true;
|
||||
queueMicrotask(() => { try { const latest = reader?.latest(); if (latest?.epoch && latest.epoch !== epoch) ensureEpoch(latest.epoch); if (epoch) postMessage({type: "updated", epoch}); } catch (error) { postMessage({type: "fatal", code: "PICK_PROTOCOL_MISMATCH", message: String(error)}); } finally { updating = false; if (requestedEpoch > epoch) coalescedUpdate(); } });
|
||||
}
|
||||
addEventListener("message", event => {
|
||||
const m = event.data;
|
||||
try {
|
||||
if (m.type === "init") { reader = new SnapshotReader(m.memory, m.controlPtr); if (m.controlVersion !== 1 || m.schemaVersion !== 1) throw Object.assign(new Error("version"), {code: "PICK_PROTOCOL_MISMATCH"}); postMessage({type: "ready"}); }
|
||||
else if (m.type === "update") coalescedUpdate(m.epoch);
|
||||
else if (m.type === "pick") { if (!ensureEpoch(m.epoch)) { postMessage({type: "pick", request: m.request, stale: true, epoch}); return; } const hits = bvh.pick(m.origin, m.direction, m.maxDistance, m.maxHits); const latest = reader.latest().epoch; postMessage({type: "pick", request: m.request, stale: latest !== m.epoch || epoch !== m.epoch, epoch, hits}); }
|
||||
else if (m.type === "dispose") close();
|
||||
} catch (error) { postMessage({type: "fatal", code: error.name === "SnapshotProtocolError" || error.code === "PICK_PROTOCOL_MISMATCH" ? "PICK_PROTOCOL_MISMATCH" : "PICK_WORKER_ERROR", message: String(error)}); }
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
const JSON_CHUNK = 0x4e4f534a;
|
||||
const BIN_CHUNK = 0x004e4942;
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
const align4 = value => (value + 3) & ~3;
|
||||
const finiteMinMax = (values, width) => {
|
||||
const min = Array(width).fill(Infinity), max = Array(width).fill(-Infinity);
|
||||
for (let i=0;i<values.length;i++) { const lane=i%width; min[lane]=Math.min(min[lane],values[i]); max[lane]=Math.max(max[lane],values[i]); }
|
||||
return {min,max};
|
||||
};
|
||||
|
||||
/** Encode indexed geometry as a deterministic, self-contained GLB 2.0 scene. */
|
||||
export function encodeGeometryGlb({positions,normals,texcoords,indices}) {
|
||||
if([...positions,...normals,...texcoords].some(value=>!Number.isFinite(value))||indices.some(value=>!Number.isInteger(value)||value<0))throw new TypeError("Invalid demo geometry");
|
||||
const streams=[new Float32Array(positions),new Float32Array(normals),new Float32Array(texcoords),new Uint32Array(indices)];
|
||||
if(!streams[0].length||streams[0].length%3||streams[1].length!==streams[0].length||streams[2].length/2!==streams[0].length/3||streams[3].length%3) throw new TypeError("Invalid demo geometry");
|
||||
const offsets=[], chunks=[], views=[]; let byteLength=0;
|
||||
for(const stream of streams){byteLength=align4(byteLength);offsets.push(byteLength);const bytes=new Uint8Array(stream.buffer);chunks.push({offset:byteLength,bytes});views.push({buffer:0,byteOffset:byteLength,byteLength:bytes.length});byteLength+=bytes.length;}
|
||||
byteLength=align4(byteLength);
|
||||
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:[
|
||||
{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:streams[3].length,type:"SCALAR"},
|
||||
]};
|
||||
let jsonBytes=encoder.encode(JSON.stringify(json)); const jsonLength=align4(jsonBytes.length), total=12+8+jsonLength+8+byteLength;
|
||||
const out=new ArrayBuffer(total), view=new DataView(out), bytes=new Uint8Array(out); view.setUint32(0,0x46546c67,true);view.setUint32(4,2,true);view.setUint32(8,total,true);
|
||||
view.setUint32(12,jsonLength,true);view.setUint32(16,JSON_CHUNK,true);bytes.fill(0x20,20,20+jsonLength);bytes.set(jsonBytes,20);
|
||||
const binHeader=20+jsonLength;view.setUint32(binHeader,byteLength,true);view.setUint32(binHeader+4,BIN_CHUNK,true);for(const chunk of chunks)bytes.set(chunk.bytes,binHeader+8+chunk.offset);
|
||||
return out;
|
||||
}
|
||||
|
||||
export function createCubeGeometry(){
|
||||
const positions=[],normals=[],texcoords=[],indices=[];const faces=[[[1,0,0],[1,-1,-1],[1,-1,1],[1,1,1],[1,1,-1]],[[-1,0,0],[-1,-1,1],[-1,-1,-1],[-1,1,-1],[-1,1,1]],[[0,1,0],[-1,1,1],[1,1,1],[1,1,-1],[-1,1,-1]],[[0,-1,0],[-1,-1,-1],[1,-1,-1],[1,-1,1],[-1,-1,1]],[[0,0,1],[-1,-1,1],[1,-1,1],[1,1,1],[-1,1,1]],[[0,0,-1],[1,-1,-1],[-1,-1,-1],[-1,1,-1],[1,1,-1]]];
|
||||
for(const [normal,...corners] of faces){
|
||||
const base=positions.length/3;corners.forEach((p,i)=>{positions.push(...p);normals.push(...normal);texcoords.push(...[[0,0],[1,0],[1,1],[0,1]][i]);});
|
||||
const a=corners[0],b=corners[1],c=corners[2],ab=b.map((value,i)=>value-a[i]),ac=c.map((value,i)=>value-a[i]);
|
||||
const cross=[ab[1]*ac[2]-ab[2]*ac[1],ab[2]*ac[0]-ab[0]*ac[2],ab[0]*ac[1]-ab[1]*ac[0]];
|
||||
const outward=cross.reduce((sum,value,i)=>sum+value*normal[i],0)>0;
|
||||
indices.push(...(outward?[base,base+1,base+2,base,base+2,base+3]:[base,base+2,base+1,base,base+3,base+2]));
|
||||
}
|
||||
return {positions,normals,texcoords,indices};
|
||||
}
|
||||
export function createUvSphereGeometry(segments=24,rings=12){
|
||||
const positions=[],normals=[],texcoords=[],indices=[];for(let y=0;y<=rings;y++){const v=y/rings,phi=v*Math.PI;for(let x=0;x<=segments;x++){const u=x/segments,theta=u*Math.PI*2,nx=Math.sin(phi)*Math.cos(theta),ny=Math.cos(phi),nz=Math.sin(phi)*Math.sin(theta);positions.push(nx,ny,nz);normals.push(nx,ny,nz);texcoords.push(u,v);}}
|
||||
for(let y=0;y<rings;y++)for(let x=0;x<segments;x++){const a=y*(segments+1)+x,b=a+segments+1;indices.push(a,a+1,b,a+1,b+1,b);}return {positions,normals,texcoords,indices};
|
||||
}
|
||||
export function isGitLfsPointer(bytes){const text=new TextDecoder().decode(new Uint8Array(bytes,0,Math.min(bytes.byteLength,256)));return text.startsWith("version https://git-lfs.github.com/spec/v1\n");}
|
||||
export class LoadoutError extends Error{constructor(code,message){super(message);this.name="LoadoutError";this.code=code;}}
|
||||
export const loadouts=Object.freeze({cubes:{label:"Procedural cubes"},spheres:{label:"Procedural spheres"},manor:{label:"The Manor"},sponza:{label:"Sponza"}});
|
||||
const assetUrls=Object.freeze({manor:new URL("./themanor.glb",import.meta.url),sponza:new URL("./sponza.glb",import.meta.url)});
|
||||
export async function loadDemoLoadout(id,{signal,fetchImpl=fetch}={}){
|
||||
if(id==="cubes")return encodeGeometryGlb(createCubeGeometry());if(id==="spheres")return encodeGeometryGlb(createUvSphereGeometry());
|
||||
const url=assetUrls[id];if(!url)throw new LoadoutError("LOADOUT_UNKNOWN",`Unknown loadout: ${id}`);
|
||||
let response;try{response=await fetchImpl(url,{signal});}catch(error){if(error?.name==="AbortError")throw error;throw new LoadoutError("LOADOUT_FETCH_FAILED",`Could not fetch ${id}: ${error?.message||"network error"}`);}
|
||||
if(!response.ok)throw new LoadoutError("LOADOUT_HTTP",`Could not fetch ${id}: HTTP ${response.status}`);const buffer=await response.arrayBuffer();if(isGitLfsPointer(buffer))throw new LoadoutError("LOADOUT_LFS_POINTER",`${id} is a Git LFS pointer; hydrate repository assets first`);return buffer;
|
||||
}
|
||||
+5
-42
@@ -1,42 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<!-- TODO: Intro -->
|
||||
</section>
|
||||
<section>
|
||||
<canvas id="canvas0"></canvas>
|
||||
<script type="module" src="./index.js"></script>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Yawn Render Graph Demo</title>
|
||||
<style>
|
||||
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#0b0e14;color:#eef2f8;font:14px Inter,system-ui,sans-serif}main{display:grid;grid-template-columns:minmax(0,3fr) minmax(380px,2fr);height:100%}.viewport,.editor{min-width:0;min-height:0;position:relative}canvas{display:block;width:100%;height:100%}#canvas0{background:#090d16}.toolbar{position:absolute;z-index:2;inset:18px 18px auto;display:flex;align-items:end;gap:14px;padding:13px 16px;border:1px solid #ffffff18;border-radius:10px;background:#111722e8;box-shadow:0 12px 30px #0008}.brand{margin-right:auto}.brand strong{display:block;font-size:17px;letter-spacing:.08em}.brand small{color:#8d9bb1}.field{display:grid;gap:5px;color:#9da9ba;font-size:11px;text-transform:uppercase;letter-spacing:.08em}select,button{font:inherit;color:#eef;background:#202938;border:1px solid #3a4659;border-radius:6px;padding:7px 10px}button{background:#ba5c2e;border-color:#d77949;font-weight:650;cursor:pointer}button:disabled,select:disabled{opacity:.48;cursor:wait}#demo-status{position:absolute;z-index:2;left:18px;bottom:18px;padding:9px 12px;border-radius:7px;background:#0b1019dc;color:#bac6d8;box-shadow:0 5px 20px #0008}.editor{display:grid;grid-template-rows:58px minmax(0,1fr);border-left:1px solid #2d3542;background:#151820}.editor-bar{display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #303745}.editor-bar strong{font-size:15px}.editor-bar span{color:#9ba7b9}@media(max-width:820px){main{grid-template-columns:1fr;grid-template-rows:52% 48%}.editor{border-left:0;border-top:1px solid #2d3542}.toolbar{flex-wrap:wrap}.brand{width:100%}}
|
||||
</style></head><body><main><section class="viewport" aria-label="Rendered scene"><div class="toolbar"><div class="brand"><strong>YAWN</strong><small>Render Graph Studio</small></div><label class="field" for="loadout-select">Scene loadout<select id="loadout-select"><option value="cubes">Cubes</option><option value="spheres">UV spheres</option><option value="manor">The Manor</option><option value="sponza">Sponza</option></select></label><label class="field" for="graph-select">Graph preset<select id="graph-select"><option value="authored">Authored</option><option value="midnight">Midnight</option><option value="ember">Ember</option></select></label></div><canvas id="canvas0"></canvas><output id="demo-status" aria-live="polite">Starting Phase 8…</output></section><section class="editor" aria-label="Render graph editor"><div class="editor-bar"><strong>Authored Graph</strong><button id="apply-graph" disabled>Apply</button><span id="graph-status">Loading editor…</span></div><canvas id="graph-editor"></canvas></section></main><script type="module" src="./index.js"></script></body></html>
|
||||
|
||||
+57
-10
@@ -1,13 +1,60 @@
|
||||
import wbg_init, { main } from "../level-editor/pkg/level_editor.js";
|
||||
import wbg_init, { main } from "./level-editor/pkg/level_editor.js";
|
||||
import { RendererClient, RendererError } from "./renderer-client.js";
|
||||
import { loadDemoLoadout } from "./demo-loadouts.js";
|
||||
import { adaptFxNodeSnapshot } from "./render-graph/adapter.js";
|
||||
import { AuthoringController } from "./render-graph/authoring-controller.js";
|
||||
import { createRenderGraphEditor } from "./render-graph/fxnode-editor.js";
|
||||
import { renderGraphPresets } from "./render-graph/presets.js";
|
||||
|
||||
const start = async () => {
|
||||
await wbg_init();
|
||||
main();
|
||||
};
|
||||
let renderer,editor,controller,assetAbort,busy=false,cleaned=false;
|
||||
let unsubscribeController=()=>{},unsubscribeSnapshots=()=>{};
|
||||
const listeners=[];
|
||||
const on=(target,type,fn)=>{target.addEventListener(type,fn);listeners.push(()=>target.removeEventListener(type,fn));};
|
||||
const status=message=>{const node=document.querySelector("#demo-status");if(node)node.textContent=message;};
|
||||
const sameId=(a,b)=>Array.isArray(a)&&Array.isArray(b)&&a[0]===b[0]&&a[1]===b[1];
|
||||
const state={loadout:"cubes",graph:"authored",compiled:{},telemetry:null};
|
||||
|
||||
// Wait for DOM to be ready before starting
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", start);
|
||||
} else {
|
||||
start();
|
||||
function publish(telemetry){
|
||||
state.telemetry=telemetry;
|
||||
document.documentElement.dataset.phase8State=JSON.stringify({activeLoadout:state.loadout,activeGraph:state.graph,renderDataRevision:telemetry.revision,renderMode:telemetry.renderMode,activeCompiledId:telemetry.activeCompiledId,activeCompiledGraph:telemetry.activeCompiledGraph,activeCompiledRevision:telemetry.activeCompiledRevision,graphPasses:telemetry.graphPasses,draws:telemetry.draws,instances:telemetry.instances,indices:telemetry.indices,framingRadius:telemetry.framingRadius,gpuError:telemetry.gpuError});
|
||||
}
|
||||
function waitTelemetry(predicate,timeout=30000){
|
||||
const current=renderer?.telemetry;if(current&&predicate(current))return Promise.resolve(current);
|
||||
return new Promise((resolve,reject)=>{let timer;const done=()=>{clearTimeout(timer);removeEventListener("renderer-frame",frame);};const frame=e=>{if(predicate(e.detail)){done();resolve(e.detail);}};timer=setTimeout(()=>{done();reject(new Error("Telemetry confirmation timed out"));},timeout);onAbort=()=>{done();reject(new RendererError("DISPOSED"));};addEventListener("renderer-frame",frame);timer.unref?.();});
|
||||
}
|
||||
let onAbort=()=>{};
|
||||
async function transaction(label,operation,rollback){
|
||||
if(busy||cleaned)return false;busy=true;document.querySelectorAll("select, #apply-graph").forEach(x=>x.disabled=true);status(label);
|
||||
try{const telemetry=await operation();if(cleaned)return false;if(telemetry){publish(telemetry);status(`${state.loadout} · ${state.graph} · ${telemetry.draws} draws · ${telemetry.instances} instances`);}else status(`${state.loadout} · ${state.graph} · committed; telemetry pending`);return true;}
|
||||
catch(error){if(!cleaned){try{await rollback?.();}catch(rollbackError){console.error("Phase 8 rollback failed",rollbackError);}console.error("Phase 8 transaction failed",error);status(`Failed · ${error?.code??error?.message??error}`);}return false;}
|
||||
finally{busy=false;if(!cleaned){document.querySelectorAll("select").forEach(x=>x.disabled=false);const button=document.querySelector("#apply-graph");if(button)button.disabled=controller?.applying||!controller?.dirty;}}
|
||||
}
|
||||
async function selectLoadout(next,select){
|
||||
const previous=state.loadout,targetRevision=(renderer.telemetry?.revision??0)+1;assetAbort=new AbortController();
|
||||
const ok=await transaction(`Loading ${next}…`,async()=>{const glb=await loadDemoLoadout(next,{signal:assetAbort.signal});await renderer.replaceSceneGlb(glb,{framing:next==="sponza"?"interior":"exterior"});state.loadout=next;return waitTelemetry(x=>x.revision===targetRevision&&x.draws>0&&x.activeCompiledGraph===state.compiled[state.graph].graphId&&x.gpuError===false).catch(()=>null);});
|
||||
assetAbort=undefined;if(!ok)select.value=previous;
|
||||
}
|
||||
async function selectGraph(next,select){
|
||||
const previous=state.graph,compiled=state.compiled[next];
|
||||
const ok=await transaction(`Activating ${next}…`,async()=>{await renderer.switchCompiledGraph(compiled.compiledId);state.graph=next;return waitTelemetry(x=>sameId(x.activeCompiledId,compiled.compiledId)&&x.activeCompiledGraph===compiled.graphId&&x.activeCompiledRevision===compiled.revision&&x.gpuError===false).catch(()=>null);},async()=>{state.graph=previous;select.value=previous;});
|
||||
if(!ok)select.value=previous;
|
||||
}
|
||||
async function cleanup(){if(cleaned)return;cleaned=true;removeEventListener("pagehide",pagehide);assetAbort?.abort();onAbort();listeners.splice(0).forEach(fn=>fn());unsubscribeController();unsubscribeSnapshots();try{await editor?.destroy();}finally{renderer?.dispose();}}
|
||||
const pagehide=()=>{void cleanup()};
|
||||
|
||||
async function start(){
|
||||
addEventListener("pagehide",pagehide,{once:true});delete document.documentElement.dataset.phase8Ready;await wbg_init();if(cleaned)return;
|
||||
renderer=new RendererClient(main());await renderer.ready;const nextEditor=await createRenderGraphEditor(document.querySelector("#graph-editor"));if(cleaned){await nextEditor.destroy();return}editor=nextEditor;
|
||||
controller=new AuthoringController({renderer,getState:editor.getState});const apply=document.querySelector("#apply-graph"),graphStatus=document.querySelector("#graph-status"),loadoutSelect=document.querySelector("#loadout-select"),graphSelect=document.querySelector("#graph-select");
|
||||
unsubscribeController=controller.subscribe(s=>{apply.disabled=busy||s.applying||!s.dirty;graphStatus.textContent=s.applying?"Applying…":s.dirty?"Unapplied changes":`Authored revision ${s.revision}`;});unsubscribeSnapshots=editor.onSnapshots(()=>controller.markDirty());
|
||||
const authored=await controller.apply(adaptFxNodeSnapshot);state.compiled.authored={...authored,graphId:"demo_forward"};
|
||||
for(const [name,preset] of Object.entries(renderGraphPresets)){const compiled=await renderer.compileGraph(preset);state.compiled[name]={...compiled,graphId:preset.graphId,revision:preset.revision};}
|
||||
on(window,"renderer-frame",event=>{const expected=state.compiled[state.graph],telemetry=event.detail;if(expected&&telemetry.activeCompiledGraph===expected.graphId&&sameId(telemetry.activeCompiledId,expected.compiledId)&&telemetry.gpuError===false){publish(telemetry);if(!busy)status(`${state.loadout} · ${state.graph} · ${telemetry.draws} draws · ${telemetry.instances} instances`);}});
|
||||
on(loadoutSelect,"change",()=>void selectLoadout(loadoutSelect.value,loadoutSelect));on(graphSelect,"change",()=>void selectGraph(graphSelect.value,graphSelect));
|
||||
on(apply,"click",()=>{const previous=state.graph,previousAuthored=state.compiled.authored;void transaction("Applying authored graph…",async()=>{const compiled=await controller.apply(adaptFxNodeSnapshot);state.compiled.authored={...compiled,graphId:"demo_forward"};state.graph="authored";graphSelect.value="authored";return waitTelemetry(x=>sameId(x.activeCompiledId,compiled.compiledId)&&x.activeCompiledGraph==="demo_forward"&&x.activeCompiledRevision===compiled.revision&&x.gpuError===false).catch(()=>null);},async()=>{state.compiled.authored=previousAuthored;state.graph=previous;graphSelect.value=previous;controller.markDirty();});});
|
||||
await editor.whenRendered();
|
||||
const initialized=await transaction("Preparing procedural cubes…",async()=>{const targetRevision=(renderer.telemetry?.revision??0)+1;await renderer.replaceSceneGlb(await loadDemoLoadout("cubes"));await renderer.switchCompiledGraph(authored.compiledId);return waitTelemetry(x=>x.revision===targetRevision&&x.draws>0&&x.activeCompiledGraph==="demo_forward"&&x.activeCompiledRevision===authored.revision&&x.gpuError===false);});
|
||||
if(!initialized)throw new Error("Initial demo transaction failed");document.documentElement.dataset.phase8Ready="true";
|
||||
}
|
||||
const startupError=error=>{if(cleaned)return;console.error("Phase 8 startup failed",error);status(`Startup failed · ${error?.code??error}`);void cleanup();};
|
||||
if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",()=>start().catch(startupError),{once:true});else start().catch(startupError);
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
export const SNAPSHOT = Object.freeze({
|
||||
MAGIC: 0x504e5359, BLOB_MAGIC: 0x31534452, VERSION: 1, BYTES: 256,
|
||||
SLOTS: 3, SLOT_BYTES: 64, SCHEMA: 1, INIT: 0, OPEN: 1, FAILED: 2,
|
||||
CLOSED: 3, FREE: 0, WRITING: 1, READY: 2, READING: 3,
|
||||
});
|
||||
export const STREAM_NAMES = ["meshSlot", "meshGeneration", "meshFlags", "meshLocalMin", "meshLocalMax", "instanceSlot", "instanceGeneration", "instanceMeshSlot", "instanceMeshGeneration", "instanceFlags", "instanceModel", "instanceWorldMin", "instanceWorldMax", "instancePickable"];
|
||||
const COMPONENTS = [1, 1, 1, 3, 3, 1, 1, 1, 1, 1, 16, 3, 3, 1];
|
||||
const SCALARS = [1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2, 1];
|
||||
const STRIDES = COMPONENTS.map(n => n * 4);
|
||||
|
||||
export class SnapshotProtocolError extends Error {
|
||||
constructor(code) { super(code); this.code = code; this.name = "SnapshotProtocolError"; }
|
||||
}
|
||||
|
||||
const bad = code => { throw new SnapshotProtocolError(code); };
|
||||
const add = (a, b) => { const n = a + b; if (!Number.isSafeInteger(n) || n > 0xffffffff) bad("BAD_RANGE"); return n; };
|
||||
const mul = (a, b) => { const n = a * b; if (!Number.isSafeInteger(n) || n > 0xffffffff) bad("BAD_RANGE"); return n; };
|
||||
|
||||
export class SnapshotReader {
|
||||
constructor(memory, controlPtr) {
|
||||
if (!memory || !(memory.buffer instanceof SharedArrayBuffer)) bad("BAD_MEMORY");
|
||||
if (!Number.isInteger(controlPtr) || controlPtr < 0 || controlPtr % 64 || add(controlPtr, 256) > memory.buffer.byteLength) bad("BAD_CONTROL_POINTER");
|
||||
this.memory = memory; this.controlPtr = controlPtr; this.buffer = null;
|
||||
this.refresh(); this.validateControl();
|
||||
}
|
||||
refresh() {
|
||||
if (this.buffer === this.memory.buffer) return;
|
||||
this.buffer = this.memory.buffer;
|
||||
if (add(this.controlPtr, 256) > this.buffer.byteLength) bad("BAD_CONTROL_POINTER");
|
||||
this.control = new Int32Array(this.buffer, this.controlPtr, 64);
|
||||
}
|
||||
validateControl() {
|
||||
const h = this.control;
|
||||
if ((Atomics.load(h, 0) >>> 0) !== SNAPSHOT.MAGIC) bad("BAD_MAGIC");
|
||||
if ((Atomics.load(h, 1) >>> 0) !== SNAPSHOT.VERSION) bad("BAD_VERSION");
|
||||
if ((Atomics.load(h, 2) >>> 0) !== SNAPSHOT.BYTES || (Atomics.load(h, 3) >>> 0) !== SNAPSHOT.SLOTS || (Atomics.load(h, 4) >>> 0) !== SNAPSHOT.SLOT_BYTES || (Atomics.load(h, 5) >>> 0) !== SNAPSHOT.SCHEMA) bad("BAD_LAYOUT");
|
||||
const lifecycle = Atomics.load(h, 6) >>> 0;
|
||||
if (lifecycle > SNAPSHOT.CLOSED) bad("BAD_LIFECYCLE");
|
||||
if ((Atomics.load(h, 15) >>> 0) !== 0) bad("BAD_RESERVED");
|
||||
}
|
||||
latest() {
|
||||
this.refresh(); this.validateControl();
|
||||
for (let tries = 0; tries < 16; tries++) {
|
||||
const a = Atomics.load(this.control, 7) >>> 0;
|
||||
if (a & 1) continue;
|
||||
const lifecycle = Atomics.load(this.control, 6) >>> 0;
|
||||
const value = { lifecycle, epoch: Atomics.load(this.control, 8) >>> 0, slot: Atomics.load(this.control, 9) >>> 0, revisionLo: Atomics.load(this.control, 10) >>> 0, revisionHi: Atomics.load(this.control, 11) >>> 0, wasmPages: Atomics.load(this.control, 12) >>> 0, layoutEpoch: Atomics.load(this.control, 13) >>> 0, error: Atomics.load(this.control, 14) >>> 0 };
|
||||
const b = Atomics.load(this.control, 7) >>> 0;
|
||||
if (a === b && !(b & 1)) {
|
||||
if (lifecycle === SNAPSHOT.FAILED) bad("SNAPSHOT_FAILED");
|
||||
if (lifecycle === SNAPSHOT.CLOSED) bad("SNAPSHOT_CLOSED");
|
||||
if (lifecycle !== SNAPSHOT.INIT && lifecycle !== SNAPSHOT.OPEN) bad("BAD_LIFECYCLE");
|
||||
if (value.wasmPages && value.wasmPages > this.buffer.byteLength / 65536) bad("BAD_WASM_PAGES");
|
||||
return value;
|
||||
}
|
||||
}
|
||||
bad("UNSTABLE_CONTROL");
|
||||
}
|
||||
transaction(fn, expectedEpoch = 0) {
|
||||
this.refresh();
|
||||
const latest = this.latest();
|
||||
if (!latest.epoch || latest.slot >= SNAPSHOT.SLOTS || (expectedEpoch && latest.epoch !== expectedEpoch)) return null;
|
||||
let control = this.control;
|
||||
const base = 16 + latest.slot * 16;
|
||||
if (Atomics.compareExchange(control, base, SNAPSHOT.READY, SNAPSHOT.READING) !== SNAPSHOT.READY) return null;
|
||||
try {
|
||||
// memory.grow replaces memory.buffer even after the slot has been pinned.
|
||||
this.refresh(); control = this.control;
|
||||
const slot = Array.from({length: 16}, (_, i) => Atomics.load(control, base + i) >>> 0);
|
||||
if (slot[0] !== SNAPSHOT.READING || slot[1] !== latest.epoch || slot[2] !== latest.layoutEpoch || slot[5] !== latest.revisionLo || slot[6] !== latest.revisionHi || slot[9] !== SNAPSHOT.SCHEMA || slot[10] !== 64) return null;
|
||||
if (slot.slice(11).some(Boolean)) bad("BAD_SLOT_RESERVED");
|
||||
const ptr = slot[3], bytes = slot[4];
|
||||
if (ptr % 16 || bytes < 512 || bytes % 16 || add(ptr, bytes) > this.buffer.byteLength) bad("BAD_SLOT");
|
||||
const u32 = new Uint32Array(this.buffer, ptr, bytes / 4);
|
||||
if (u32[0] !== SNAPSHOT.BLOB_MAGIC || u32[1] !== SNAPSHOT.SCHEMA || u32[2] !== 64 || u32[3] !== bytes || u32[4] !== slot[1] || u32[5] !== slot[5] || u32[6] !== slot[6] || u32[7] !== 14 || u32[8] !== 64 || u32[9] !== 32 || u32[10] !== slot[7] || u32[11] !== slot[8] || u32[12] !== 0x01020304 || u32[13] !== 3) bad("BAD_BLOB");
|
||||
if (u32[14] || u32[15]) bad("BAD_BLOB_RESERVED");
|
||||
const ranges = [], streams = {};
|
||||
for (let i = 0; i < 14; i++) {
|
||||
const d = 16 + i * 8, semantic = u32[d], scalar = u32[d + 1], offset = u32[d + 2], count = u32[d + 3], components = u32[d + 4], stride = u32[d + 5], width = u32[d + 6], reserved = u32[d + 7];
|
||||
const want = i < 5 ? slot[7] : slot[8];
|
||||
if (semantic !== i + 1 || scalar !== SCALARS[i] || count !== want || components !== COMPONENTS[i] || stride !== STRIDES[i] || width !== 4 || reserved || offset < 512 || offset % 16) bad("BAD_DESCRIPTOR");
|
||||
const end = add(offset, mul(stride, count));
|
||||
if (end > bytes) bad("BAD_DESCRIPTOR_RANGE");
|
||||
if (count) ranges.push([offset, end]);
|
||||
const Type = scalar === 2 ? Float32Array : Uint32Array;
|
||||
streams[STREAM_NAMES[i]] = new Type(this.buffer, add(ptr, offset), mul(count, components));
|
||||
}
|
||||
ranges.sort((a, b) => a[0] - b[0]);
|
||||
for (let i = 1; i < ranges.length; i++) if (ranges[i][0] < ranges[i - 1][1]) bad("OVERLAPPING_STREAMS");
|
||||
return fn(Object.freeze({epoch: slot[1], revisionLo: slot[5], revisionHi: slot[6], meshCount: slot[7], instanceCount: slot[8], streams: Object.freeze(streams)}));
|
||||
} finally {
|
||||
Atomics.store(control, base, SNAPSHOT.FREE); Atomics.notify(control, base);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { CATALOG_VERSION, descriptors, GRAPH_ID } from "./catalog.js";
|
||||
|
||||
export class AuthoringGraphError extends Error {
|
||||
constructor(code, details = {}) { super(code); this.name="AuthoringGraphError"; this.code=code; this.details=Object.freeze(details); }
|
||||
}
|
||||
const fail=(code,details)=>{throw new AuthoringGraphError(code,details)};
|
||||
const object=v=>v !== null && typeof v === "object" && !Array.isArray(v);
|
||||
const validId=v=>typeof v === "string" && /^[A-Za-z][A-Za-z0-9_.-]*$/.test(v) && new TextEncoder().encode(v).length<=64;
|
||||
const validSocketId=v=>typeof v === "string" && /^[A-Za-z][A-Za-z0-9_.-]*:[A-Za-z][A-Za-z0-9_.-]*$/.test(v) && new TextEncoder().encode(v).length<=129;
|
||||
const keysEqual=(a,b)=>a.length===b.length && a.every(x=>b.includes(x));
|
||||
|
||||
/** Validate hostile fxnode state and return an app-owned, layout-free projection. */
|
||||
export function projectAuthoringSnapshot(raw) {
|
||||
if(!object(raw)||!Array.isArray(raw.nodes)||!Array.isArray(raw.links)) fail("AUTHORING_SHAPE",{field:"snapshot"});
|
||||
if(raw.graphId!==GRAPH_ID||raw.catalogVersion!==CATALOG_VERSION) fail("AUTHORING_CATALOG",{graphId:raw.graphId,catalogVersion:raw.catalogVersion});
|
||||
const nodeIds=new Set(), socketIds=new Set(), byId=new Map(), byType=new Map();
|
||||
for(const n of raw.nodes){
|
||||
if(!object(n)||!validId(n.id)) fail("AUTHORING_ID",{kind:"node",id:n?.id});
|
||||
if(nodeIds.has(n.id)) fail("AUTHORING_ID_DUPLICATE",{kind:"node",id:n.id}); nodeIds.add(n.id);
|
||||
const d=descriptors[n.typeId];
|
||||
if(!d) fail("AUTHORING_NODE_TYPE",{nodeId:n.id,typeId:n.typeId});
|
||||
if(n.known!==true) fail("AUTHORING_NODE_UNKNOWN",{nodeId:n.id});
|
||||
if(n.typeVersion!==d.version) fail("AUTHORING_NODE_VERSION",{nodeId:n.id,expected:d.version,actual:n.typeVersion});
|
||||
if(typeof n.muted!=="boolean") fail("AUTHORING_NODE_MUTED",{nodeId:n.id});
|
||||
if(n.muted&&n.typeId!=="scene_forward") fail("AUTHORING_NODE_MUTED",{nodeId:n.id});
|
||||
if(byType.has(n.typeId)) fail("AUTHORING_TOPOLOGY",{reason:"duplicate-type",typeId:n.typeId});
|
||||
if(!Array.isArray(n.sockets)||!keysEqual(n.sockets.map(s=>s?.key),Object.keys(d.sockets))) fail("AUTHORING_SOCKET_SET",{nodeId:n.id});
|
||||
const sockets={};
|
||||
for(const s of n.sockets){ const expected=d.sockets[s.key];
|
||||
if(!object(s)||!validSocketId(s.id)) fail("AUTHORING_ID",{kind:"socket",id:s?.id});
|
||||
if(socketIds.has(s.id)) fail("AUTHORING_ID_DUPLICATE",{kind:"socket",id:s.id}); socketIds.add(s.id);
|
||||
if(s.direction!==expected[0]||s.dataType!==expected[1]) fail("AUTHORING_SOCKET",{nodeId:n.id,socket:s.key});
|
||||
sockets[s.key]={id:s.id,direction:s.direction,type:s.dataType,nodeId:n.id};
|
||||
}
|
||||
const p=object(n.parameters)?n.parameters:null;
|
||||
if(!p||!keysEqual(Object.keys(p),d.parameters)) fail("AUTHORING_PARAMETERS",{nodeId:n.id});
|
||||
let parameters={};
|
||||
if(n.typeId==="scene_forward"){
|
||||
const c=p.clearColor, z=p.clearDepth;
|
||||
if(!object(c)||c.kind!=="color"||!Array.isArray(c.value)||c.value.length!==4||c.value.some(v=>!Number.isFinite(v)||v<0||v>1)) fail("AUTHORING_PARAMETER",{parameter:"clearColor"});
|
||||
if(!object(z)||z.kind!=="number"||!Number.isFinite(z.value)||z.value<0||z.value>1) fail("AUTHORING_PARAMETER",{parameter:"clearDepth"});
|
||||
parameters={clearColor:[...c.value],clearDepth:z.value};
|
||||
}
|
||||
const projected={type:n.typeId,id:n.id,sockets,parameters,muted:n.muted}; byId.set(n.id,projected); byType.set(n.typeId,projected);
|
||||
}
|
||||
if(!keysEqual([...byType.keys()],Object.keys(descriptors))) fail("AUTHORING_TOPOLOGY",{reason:"node-set"});
|
||||
const linkIds=new Set(), incoming=new Set(), links=[];
|
||||
for(const l of raw.links){
|
||||
if(!object(l)||!validId(l.id)) fail("AUTHORING_ID",{kind:"link",id:l?.id});
|
||||
if(linkIds.has(l.id)) fail("AUTHORING_ID_DUPLICATE",{kind:"link",id:l.id}); linkIds.add(l.id);
|
||||
if(typeof l.muted!=="boolean") fail("AUTHORING_LINK",{linkId:l.id,reason:"muted"});
|
||||
const from=byId.get(l.fromNodeId),to=byId.get(l.toNodeId),fs=from&&Object.values(from.sockets).find(s=>s.id===l.fromSocketId),ts=to&&Object.values(to.sockets).find(s=>s.id===l.toSocketId);
|
||||
if(!fs||!ts||fs.direction!=="output"||ts.direction!=="input"||fs.type!==ts.type) fail("AUTHORING_LINK",{linkId:l.id});
|
||||
if(incoming.has(ts.id)) fail("AUTHORING_LINK_INCOMING",{socketId:ts.id}); incoming.add(ts.id);
|
||||
links.push({from:`${from.type}.${Object.keys(from.sockets).find(k=>from.sockets[k]===fs)}`,to:`${to.type}.${Object.keys(to.sockets).find(k=>to.sockets[k]===ts)}`,muted:l.muted});
|
||||
}
|
||||
const required=["surface_color.surface>scene_forward.color","depth32.depth>scene_forward.depth","scene_forward.result>present.surface"];
|
||||
const active=links.filter(l=>!l.muted).map(l=>`${l.from}>${l.to}`).sort();
|
||||
if(!keysEqual(active,required.sort())||links.length!==3) fail("AUTHORING_TOPOLOGY",{reason:"links"});
|
||||
return Object.freeze({graphId:GRAPH_ID,clearColor:byType.get("scene_forward").parameters.clearColor,clearDepth:byType.get("scene_forward").parameters.clearDepth,passState:byType.get("scene_forward").muted?"disabled":"enabled"});
|
||||
}
|
||||
|
||||
export function semanticProjectionToV1(p, revision=1){
|
||||
if(!Number.isInteger(revision)||revision<1||revision>0xffffffff) fail("AUTHORING_REVISION",{revision});
|
||||
const extent={kind:"surface_relative",width:{numerator:1,denominator:1},height:{numerator:1,denominator:1},depthOrArrayLayers:1};
|
||||
return {schemaVersion:1,graphId:p.graphId,revision,resources:[
|
||||
{id:"surface",version:0,residency:{kind:"external",source:"surface_color"},texture:{dimension:"d2",format:"surface",extent,mipLevelCount:1,sampleCount:1}},
|
||||
{id:"depth",version:0,residency:{kind:"transient"},texture:{dimension:"d2",format:"depth32_float",extent,mipLevelCount:1,sampleCount:1}},
|
||||
],passes:[{id:"forward",state:p.passState,executor:{key:"scene_forward",version:1},parameters:{},reads:[],writes:[
|
||||
{binding:"color",resource:{id:"surface",version:0},access:{kind:"color_attachment",location:0,load:{op:"clear",value:p.clearColor},store:"store"}},
|
||||
{binding:"depth",resource:{id:"depth",version:0},access:{kind:"depth_attachment",load:{op:"clear",value:p.clearDepth},store:"store"}},
|
||||
]}],outputs:[{name:"present",resource:{id:"surface",version:0}}]};
|
||||
}
|
||||
export const adaptFxNodeSnapshot=(snapshot,revision=1)=>semanticProjectionToV1(projectAuthoringSnapshot(snapshot),revision);
|
||||
export const adaptGraphSnapshot=adaptFxNodeSnapshot;
|
||||
@@ -0,0 +1,14 @@
|
||||
export class AuthoringController {
|
||||
#renderer; #getState; #revision=0; #nextRevision=1; #dirty=true; #applying=null; #listeners=new Set();
|
||||
constructor({renderer,getState}) { this.#renderer=renderer; this.#getState=getState; }
|
||||
get revision(){return this.#revision} get dirty(){return this.#dirty} get applying(){return !!this.#applying}
|
||||
subscribe(fn){this.#listeners.add(fn);return()=>this.#listeners.delete(fn)}
|
||||
markDirty(){this.#dirty=true;this.#emit()}
|
||||
#emit(){for(const fn of this.#listeners)fn({revision:this.#revision,dirty:this.#dirty,applying:!!this.#applying})}
|
||||
apply(adapt){
|
||||
if(this.#applying)return this.#applying;
|
||||
const revision=this.#nextRevision++; this.#dirty=false; this.#emit();
|
||||
this.#applying=(async()=>{try{const snapshot=await this.#getState();const ir=adapt(snapshot,revision);const compiled=await this.#renderer.compileGraph(ir);await this.#renderer.switchCompiledGraph(compiled.compiledId);this.#revision=revision;return compiled} catch(e){this.#dirty=true;throw e} finally{this.#applying=null;this.#emit()}})();
|
||||
return this.#applying;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
const viewport = (canvas, ownerWindow) => ({
|
||||
width: Math.max(1, canvas.clientWidth),
|
||||
height: Math.max(1, canvas.clientHeight),
|
||||
dpr: Math.min(4, Math.max(1, ownerWindow.devicePixelRatio || 1)),
|
||||
});
|
||||
const sameViewport = (a, b) => a.width === b.width && a.height === b.height && a.dpr === b.dpr;
|
||||
const sizeCanvas = (canvas, value) => {
|
||||
canvas.width = Math.round(value.width * value.dpr);
|
||||
canvas.height = Math.round(value.height * value.dpr);
|
||||
};
|
||||
const mods = e => ({ alt:e.altKey, control:e.ctrlKey, meta:e.metaKey, shift:e.shiftKey });
|
||||
|
||||
export function prepareBrowserHost(canvas, { onError=console.error, chooseNodeType }={}) {
|
||||
const ownerDocument=canvas.ownerDocument, ownerWindow=ownerDocument.defaultView ?? window;
|
||||
const originalTabIndex=canvas.getAttribute("tabindex"), originalTouchAction=canvas.style.touchAction;
|
||||
let view, dead=false, generation=0, resizing=false, pending, appliedViewport, menuPending=false, unsubscribeHost=()=>{};
|
||||
const captured=new Set();
|
||||
const initialViewport=viewport(canvas,ownerWindow); appliedViewport=initialViewport; sizeCanvas(canvas,initialViewport);
|
||||
canvas.tabIndex=0; canvas.style.touchAction="none";
|
||||
const point=e=>{const r=canvas.getBoundingClientRect();return{x:e.clientX-r.left,y:e.clientY-r.top}};
|
||||
const input=e=>{
|
||||
if(!view)return;
|
||||
if(e instanceof ownerWindow.PointerEvent){
|
||||
const phase=e.type==="pointerdown"?"down":e.type==="pointermove"?"move":e.type==="pointerup"?"up":"cancel";
|
||||
if(phase==="down"){menuPending=e.button===2&&!e.ctrlKey&&(e.buttons&1)===0;canvas.focus();try{canvas.setPointerCapture(e.pointerId);captured.add(e.pointerId)}catch{}}
|
||||
if((phase==="up"||phase==="cancel")&&captured.delete(e.pointerId))try{if(canvas.hasPointerCapture(e.pointerId))canvas.releasePointerCapture(e.pointerId)}catch{}
|
||||
view.feedInput({kind:"pointer",phase,pointerId:e.pointerId,pointerType:e.pointerType,position:point(e),button:e.button,buttons:e.buttons,modifiers:mods(e)});
|
||||
}else if(e instanceof ownerWindow.WheelEvent){
|
||||
e.preventDefault(); menuPending=false;
|
||||
const scale=e.deltaMode===ownerWindow.WheelEvent.DOM_DELTA_LINE?16:e.deltaMode===ownerWindow.WheelEvent.DOM_DELTA_PAGE?Math.max(1,canvas.clientHeight):1;
|
||||
view.feedInput({kind:"wheel",position:point(e),delta:{x:e.deltaX*scale,y:e.deltaY*scale},modifiers:mods(e)});
|
||||
}else if(e instanceof ownerWindow.KeyboardEvent){menuPending=false;view.feedInput({kind:"key",phase:e.type==="keydown"?"down":"up",key:e.key,code:e.code,repeat:e.repeat,modifiers:mods(e)});
|
||||
}else view.feedInput({kind:"focus",phase:e.type==="focus"?"focus":"blur"});
|
||||
};
|
||||
const names=["pointerdown","pointermove","pointerup","pointercancel","wheel","keydown","keyup","focus","blur"];
|
||||
const pump=()=>{
|
||||
if(!view||resizing||!pending||dead)return;
|
||||
const next=pending, currentGeneration=generation;pending=undefined;
|
||||
if(sameViewport(next,appliedViewport)){sizeCanvas(canvas,next);pump();return}
|
||||
resizing=true;
|
||||
Promise.resolve(view.setViewport(next)).then(()=>{if(dead||currentGeneration!==generation)return;appliedViewport=next;sizeCanvas(canvas,next)}).catch(error=>{if(!dead&¤tGeneration===generation)onError(error)}).finally(()=>{if(dead||currentGeneration!==generation)return;resizing=false;pump()});
|
||||
};
|
||||
const resize=()=>{if(dead)return;pending=viewport(canvas,ownerWindow);pump()};
|
||||
const outside=e=>{if(view&&e.button===0&&e.target!==canvas&&!canvas.contains(e.target)&&view.getHostSnapshot().colorPickerOpen)view.feedInput({kind:"outside-pointer",button:0})};
|
||||
const lost=e=>captured.delete(e.pointerId);
|
||||
const observer=new ownerWindow.ResizeObserver(resize);
|
||||
return {initialViewport,attach(_root,next){
|
||||
view=next;
|
||||
for(const n of names)canvas.addEventListener(n,input,{passive:n!=="wheel"});
|
||||
canvas.addEventListener("contextmenu",prevent);canvas.addEventListener("lostpointercapture",lost);
|
||||
ownerDocument.addEventListener("pointerdown",outside,true);ownerWindow.addEventListener("resize",resize);
|
||||
unsubscribeHost=view.onHostRequests(request=>{if(request.kind!=="add-node-menu"||!menuPending)return;menuPending=false;const typeId=chooseNodeType?.(request);if(typeId)view.addNode({typeId,viewPosition:request.viewPosition}).catch(onError)});
|
||||
observer.observe(canvas);resize();
|
||||
},destroy(){
|
||||
if(dead)return;dead=true;generation++;pending=undefined;observer.disconnect();unsubscribeHost();ownerWindow.removeEventListener("resize",resize);ownerDocument.removeEventListener("pointerdown",outside,true);
|
||||
for(const n of names)canvas.removeEventListener(n,input);canvas.removeEventListener("contextmenu",prevent);canvas.removeEventListener("lostpointercapture",lost);
|
||||
for(const id of captured)try{if(canvas.hasPointerCapture(id))canvas.releasePointerCapture(id)}catch{}captured.clear();
|
||||
if(originalTabIndex===null)canvas.removeAttribute("tabindex");else canvas.setAttribute("tabindex",originalTabIndex);canvas.style.touchAction=originalTouchAction;view=null;
|
||||
}};
|
||||
}
|
||||
function prevent(e){e.preventDefault()}
|
||||
@@ -0,0 +1,29 @@
|
||||
export const GRAPH_ID = "demo_forward";
|
||||
export const CATALOG_VERSION = 1;
|
||||
|
||||
export const socketTypes = {
|
||||
surface: { title: "Surface", color: "#62b0ff", acceptsFrom: ["surface"] },
|
||||
depth: { title: "Depth", color: "#b58cff", acceptsFrom: ["depth"] },
|
||||
};
|
||||
export const theme = {
|
||||
background:"#151820",grid:"#292e3a",frame:"#30343a80",frameHeader:"#59616c",body:"#292e39",control:"#191d26",controlFill:"#4775b8",controlEditing:"#101218",textSelection:"#4775b8",outline:"#0b0d12",text:"#edf1f7",muted:"#969eaa",shadow:"#00000088",nodeSelected:"#ff9f43",nodeActive:"#ffffff",unknownHeader:"#555b64",unknownSocket:"#999999",linkMuted:"#d94b4b",knifeMuted:"#e85b5b",emphasis:"#ffffff",focus:"#f5a623",editOutline:"#666a70",resize:"#8b8e95",muteOverlay:"#14141459",boxSelectionFill:"#f5a6231f",checkerLight:"#aaaaaa",checkerDark:"#777777",widgetBorder:"#111216",rampBorder:"#111111",resourceBackground:"#202228"
|
||||
};
|
||||
export const styles = { resource:{header:"#3977a8"}, pass:{header:"#426b43"}, output:{header:"#a75d37"} };
|
||||
const socket = (title, direction, type) => ({ title,direction,type,maxIncomingLinks:direction === "input" ? 1 : 0,visible:true,value:null,showValue:false });
|
||||
const node = (title, style, sockets, parameters = {}) => ({ version:1,title,behavior:"standard",style,parameters,sockets,ui:[...Object.keys(parameters).map(parameter=>({kind:"parameter",parameter})),...Object.keys(sockets).map(socket=>({kind:"socket",socket}))],muteBypass:[],migrations:[] });
|
||||
export const nodeDefinitions = {
|
||||
surface_color: node("Surface Color", "resource", { surface:socket("Surface","output","surface") }),
|
||||
depth32: node("Depth 32", "resource", { depth:socket("Depth","output","depth") }),
|
||||
scene_forward: node("Scene Forward", "pass", { color:socket("Color","input","surface"),depth:socket("Depth","input","depth"),result:socket("Result","output","surface") }, {
|
||||
clearColor:{type:"color",default:{kind:"color",value:[0,0,0,1]},minimum:0,maximum:1},
|
||||
clearDepth:{type:"number",default:{kind:"number",value:1},minimum:0,maximum:1,step:0.01},
|
||||
}),
|
||||
present: node("Present", "output", { surface:socket("Surface","input","surface") }),
|
||||
};
|
||||
|
||||
export const descriptors = Object.freeze({
|
||||
surface_color:{version:1,sockets:{surface:["output","surface"]},parameters:[]},
|
||||
depth32:{version:1,sockets:{depth:["output","depth"]},parameters:[]},
|
||||
scene_forward:{version:1,sockets:{color:["input","surface"],depth:["input","depth"],result:["output","surface"]},parameters:["clearColor","clearDepth"]},
|
||||
present:{version:1,sockets:{surface:["input","surface"]},parameters:[]},
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { createFxNode } from "@fxnode/index.ts";
|
||||
import { CATALOG_VERSION, GRAPH_ID, nodeDefinitions, socketTypes, styles, theme } from "./catalog.js";
|
||||
import { prepareBrowserHost } from "./browser-host.js";
|
||||
|
||||
const spec=[
|
||||
["surface","surface_color",{x:40,y:100}],
|
||||
["depth","depth32",{x:40,y:330}],
|
||||
["forward","scene_forward",{x:360,y:190}],
|
||||
["present","present",{x:700,y:220}],
|
||||
];
|
||||
async function seed(root){
|
||||
await root.setState({graphId:GRAPH_ID,catalogVersion:CATALOG_VERSION,nodes:[],links:[],metadata:{}});
|
||||
for(const [nodeId,nodeType,position] of spec) await root.dispatch({type:"node.add",nodeId,nodeType,position});
|
||||
for(const link of [
|
||||
{id:"surface_link",fromNodeId:"surface",fromSocketId:"surface:surface",toNodeId:"forward",toSocketId:"forward:color",muted:false,extensions:{}},
|
||||
{id:"depth_link",fromNodeId:"depth",fromSocketId:"depth:depth",toNodeId:"forward",toSocketId:"forward:depth",muted:false,extensions:{}},
|
||||
{id:"present_link",fromNodeId:"forward",fromSocketId:"forward:result",toNodeId:"present",toSocketId:"present:surface",muted:false,extensions:{}},
|
||||
]) await root.dispatch({type:"link.add",link});
|
||||
}
|
||||
export async function createRenderGraphEditor(canvas){
|
||||
const chooseNodeType=()=>{const value=canvas.ownerDocument.defaultView?.prompt(`Node type: ${Object.keys(nodeDefinitions).join(", ")}`,"scene_forward");return Object.hasOwn(nodeDefinitions,value)?value:null};
|
||||
const host=prepareBrowserHost(canvas,{chooseNodeType});let root,view,destroying;
|
||||
const destroy=()=>destroying??=(async()=>{host.destroy();try{await view?.detach()}finally{root?.destroy();view=undefined;root=undefined}})();
|
||||
try{root=await createFxNode({applicationId:"yawn.render-graph",applicationVersion:1,resources:{}});await root.setTheme(theme);await root.setHeaderStyles(styles);for(const entry of Object.entries(socketTypes))await root.composeSocket(...entry);for(const entry of Object.entries(nodeDefinitions))await root.composeNode(...entry);await seed(root);view=await root.attachView({canvas,viewport:host.initialViewport,initialCamera:{center:{x:470,y:210},zoom:.5}});host.attach(root,view);await view.whenRendered();return {getState:()=>root.getState(),onSnapshots:fn=>root.onSnapshots(fn),whenRendered:()=>view.whenRendered(),destroy};}catch(e){await destroy().catch(()=>{});throw e}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { semanticProjectionToV1 } from "./adapter.js";
|
||||
const make=(graphId,clearColor)=>Object.freeze(semanticProjectionToV1({graphId,clearColor,clearDepth:1,passState:"enabled"},1));
|
||||
export const midnight=make("preset_midnight",[0.015,0.06,0.18,1]);
|
||||
export const ember=make("preset_ember",[0.18,0.035,0.012,1]);
|
||||
export const renderGraphPresets=Object.freeze({midnight,ember});
|
||||
@@ -0,0 +1,287 @@
|
||||
import { SnapshotReader } from "./render-data-snapshot.js";
|
||||
|
||||
export const VISIBLE = 1;
|
||||
const HEADER_WORDS = 16, SLOT_WORDS = 24, CAPACITY = 1024, SLOT_VERSION = 1;
|
||||
const OP = { IMPORT_GLB: 1, MESH_FLAGS: 2, CREATE_INSTANCE: 3, INSTANCE_FLAGS: 4, INSTANCE_TRANSFORM: 5, DESTROY_INSTANCE: 6, COMPILE_GRAPH: 7, DROP_GRAPH: 8, SWITCH_GRAPH: 9 };
|
||||
const HANDLE_TOKEN = Symbol("renderer handle");
|
||||
|
||||
export class RendererError extends Error {
|
||||
constructor(code, details) { super(details?.message ?? code); this.name = "RendererError"; this.code = code; this.details = details; }
|
||||
}
|
||||
|
||||
export class RendererClient {
|
||||
#bridge; #worker; #header; #slots; #buffer; #next = 1; #payload = 1;
|
||||
#pending = new Map(); #payloadPending = new Map(); #payloadActive = new Set(); #ready; #disposed = false;
|
||||
#telemetry; #stopped = false;
|
||||
#graphQueue = []; #graphBusy = false;
|
||||
#bvh; #snapshotReader; #picking = true; #snapshotEpoch = 0; #pickNext = 1; #picks = new Map();
|
||||
|
||||
constructor(bridge) {
|
||||
this.#bridge = bridge;
|
||||
this.#worker = bridge.worker;
|
||||
this.#refreshViews();
|
||||
if (Atomics.load(this.#header, 0) !== 0x4e574159 || Atomics.load(this.#header, 1) !== 1 || Atomics.load(this.#header, 2) !== CAPACITY || Atomics.load(this.#header, 3) !== SLOT_WORDS) {
|
||||
try { this.#worker?.terminate?.(); } catch { /* best effort */ }
|
||||
try { bridge?.free?.(); } catch { /* best effort */ }
|
||||
throw new RendererError("PROTOCOL_MISMATCH");
|
||||
}
|
||||
this.#worker.addEventListener("message", e => this.#message(e.data));
|
||||
this.#worker.addEventListener("error", () => this.#fail("WORKER_ERROR"));
|
||||
this.#worker.addEventListener("messageerror", () => this.#fail("WORKER_MESSAGE_ERROR"));
|
||||
try {
|
||||
const factory = bridge.workerFactory || (() => new Worker(new URL("./bvh-worker.js", import.meta.url), { type: "module" }));
|
||||
this.#bvh = factory();
|
||||
this.#bvh.addEventListener("message", e => this.#bvhMessage(e.data));
|
||||
this.#bvh.addEventListener("error", () => this.#disablePicking("PICKING_FAILED"));
|
||||
this.#bvh.addEventListener("messageerror", () => this.#disablePicking("PICKING_FAILED"));
|
||||
} catch { this.#picking = false; }
|
||||
this.#ready = Promise.resolve(this);
|
||||
}
|
||||
|
||||
get ready() { return this.#ready; }
|
||||
get telemetry() { return this.#telemetry; }
|
||||
|
||||
#refreshViews() {
|
||||
const buffer = this.#bridge.memory.buffer;
|
||||
if (buffer === this.#buffer) return;
|
||||
this.#buffer = buffer;
|
||||
this.#header = new Int32Array(buffer, this.#bridge.ringPtr, HEADER_WORDS);
|
||||
this.#slots = new Int32Array(buffer, this.#bridge.ringPtr + 64, CAPACITY * SLOT_WORDS);
|
||||
}
|
||||
|
||||
#message(message) {
|
||||
if (message?.type === "reply") {
|
||||
const pending = this.#pending.get(message.request);
|
||||
if (!pending) return;
|
||||
this.#pending.delete(message.request);
|
||||
message.ok ? pending.resolve(message.result) : pending.reject(new RendererError(message.code, message.details));
|
||||
} else if (message?.type === "payload-ready") {
|
||||
const pending = this.#payloadPending.get(message.id);
|
||||
if (pending) { this.#payloadPending.delete(message.id); pending.resolve(); }
|
||||
} else if (message?.type === "telemetry") {
|
||||
this.#telemetry = message;
|
||||
dispatchEvent(new CustomEvent("renderer-frame", { detail: message }));
|
||||
} else if (message?.type === "fatal") {
|
||||
console.error("renderer worker fatal", message.code, message.message);
|
||||
this.#fail(message.code || "WORKER_FATAL");
|
||||
} else if (message?.type === "snapshot-init") {
|
||||
try {
|
||||
if (message.controlVersion !== 1 || message.schemaVersion !== 1) throw new Error("version");
|
||||
this.#snapshotReader = new SnapshotReader(this.#bridge.memory, message.controlPtr);
|
||||
this.#bvh?.postMessage({type:"init",memory:this.#bridge.memory,controlPtr:message.controlPtr,controlVersion:1,schemaVersion:1});
|
||||
} catch { this.#disablePicking("PICK_PROTOCOL_MISMATCH"); }
|
||||
} else if (message?.type === "snapshot-published") {
|
||||
try { this.#snapshotEpoch=this.#snapshotReader?.latest().epoch||0; this.#bvh?.postMessage({type:"update",epoch:this.#snapshotEpoch}); } catch { this.#disablePicking("PICK_PROTOCOL_MISMATCH"); }
|
||||
}
|
||||
}
|
||||
|
||||
#disablePicking(code) { this.#picking=false; const allowed=new Set(["PICK_UNAVAILABLE","PICK_PROTOCOL_MISMATCH","PICK_WORKER_ERROR","PICK_STALE","DISPOSED"]); const error=new RendererError(allowed.has(code)?code:"PICK_WORKER_ERROR"); for(const p of this.#picks.values())p.reject(error); this.#picks.clear(); try{this.#bvh?.terminate?.();}catch{} this.#bvh=null; }
|
||||
#bvhMessage(message) {
|
||||
if(message?.type==="fatal"){this.#disablePicking(message.code);return;}
|
||||
if(message?.type!=="pick")return;
|
||||
const p=this.#picks.get(message.request);if(!p)return;this.#picks.delete(message.request);
|
||||
let latest=0;try{latest=this.#snapshotReader.latest().epoch;this.#snapshotEpoch=latest;}catch{this.#disablePicking("PICK_PROTOCOL_MISMATCH");p.reject(new RendererError("PICK_PROTOCOL_MISMATCH"));return;}
|
||||
if(message.stale||p.epoch!==message.epoch||message.epoch!==latest){if(!p.retried&&latest){this.#sendPick({...p,retried:true},latest);}else p.reject(new RendererError("PICK_STALE"));return;}
|
||||
const hits=(message.hits||[]).map(hit=>({instance:this.#instance([hit.slot>>>0,hit.generation>>>0]),distance:hit.distance}));p.resolve({epoch:latest,hits});
|
||||
}
|
||||
#sendPick(p,epoch){const request=this.#pickNext++>>>0||this.#pickNext++;p.epoch=epoch;this.#picks.set(request,p);try{this.#bvh.postMessage({type:"pick",request,epoch,origin:p.origin,direction:p.direction,maxDistance:p.maxDistance,maxHits:p.maxHits});}catch{this.#picks.delete(request);p.reject(new RendererError("PICK_WORKER_ERROR"));}}
|
||||
|
||||
pickRay(origin,direction,{maxDistance=Infinity,maxHits=1}={}) {
|
||||
const vector=(v,name)=>{if(!v||v.length!==3||[...v].some(x=>typeof x!=="number"||!Number.isFinite(x)))throw new TypeError(`${name} must contain 3 finite numbers`);return [...v];};
|
||||
origin=vector(origin,"origin");direction=vector(direction,"direction");if(direction.every(x=>x===0))throw new TypeError("direction must be nonzero");if(typeof maxDistance!=="number"||(!(Number.isFinite(maxDistance)&&maxDistance>=0)&&maxDistance!==Infinity)||!Number.isInteger(maxHits)||maxHits<1||maxHits>64)throw new TypeError("invalid pick options");
|
||||
if(this.#disposed)return Promise.reject(new RendererError("DISPOSED"));if(!this.#picking||!this.#bvh||!this.#snapshotReader)return Promise.reject(new RendererError("PICK_UNAVAILABLE"));
|
||||
let epoch;try{epoch=this.#snapshotReader.latest().epoch;this.#snapshotEpoch=epoch;}catch{return Promise.reject(new RendererError("PICK_PROTOCOL_MISMATCH"));}if(!epoch)return Promise.reject(new RendererError("PICK_STALE"));
|
||||
return new Promise((resolve,reject)=>this.#sendPick({resolve,reject,origin,direction,maxDistance,maxHits,retried:false},epoch));
|
||||
}
|
||||
|
||||
#stop() {
|
||||
if (this.#stopped) return;
|
||||
this.#stopped = true;
|
||||
try { this.#worker?.terminate?.(); } catch { /* best effort */ }
|
||||
try { this.#bvh?.postMessage?.({type:"dispose"}); this.#bvh?.terminate?.(); } catch { /* best effort */ }
|
||||
try { this.#bridge?.free?.(); } catch { /* best effort */ }
|
||||
this.#bridge = null;
|
||||
}
|
||||
|
||||
#fail(code) {
|
||||
if (this.#disposed) { this.#stop(); return; }
|
||||
this.#disposed = true;
|
||||
const error = new RendererError(code);
|
||||
for (const pending of this.#pending.values()) pending.reject(error);
|
||||
this.#pending.clear();
|
||||
for (const pending of this.#payloadPending.values()) pending.reject(error);
|
||||
this.#payloadPending.clear();
|
||||
for (const pending of this.#graphQueue) pending.reject(error);
|
||||
this.#graphQueue.length = 0;
|
||||
this.#disablePicking(code === "DISPOSED" ? "DISPOSED" : "PICK_WORKER_ERROR");
|
||||
this.#stop();
|
||||
}
|
||||
|
||||
#corrupt(code) {
|
||||
Atomics.store(this.#header, 6, 1);
|
||||
this.#fail(code);
|
||||
return Promise.reject(new RendererError(code));
|
||||
}
|
||||
|
||||
#enqueue(opcode, words = []) {
|
||||
if (this.#disposed) return Promise.reject(new RendererError("DISPOSED"));
|
||||
this.#refreshViews();
|
||||
if (Atomics.load(this.#header, 6) !== 0) return this.#corrupt("RING_CLOSED");
|
||||
const read = Atomics.load(this.#header, 4) >>> 0;
|
||||
const write = Atomics.load(this.#header, 5) >>> 0;
|
||||
const backlog = (write - read) >>> 0;
|
||||
if (backlog > CAPACITY) return this.#corrupt("RING_CORRUPT");
|
||||
if (backlog === CAPACITY) return Promise.reject(new RendererError("RING_FULL"));
|
||||
let request = this.#next++ >>> 0;
|
||||
if (request === 0) { request = 1; this.#next = 2; }
|
||||
const base = (write % CAPACITY) * SLOT_WORDS;
|
||||
const promise = new Promise((resolve, reject) => this.#pending.set(request, { resolve, reject }));
|
||||
try {
|
||||
for (let i = 0; i < SLOT_WORDS; i++) Atomics.store(this.#slots, base + i, 0);
|
||||
for (let i = 0; i < words.length; i++) Atomics.store(this.#slots, base + 3 + i, words[i]);
|
||||
Atomics.store(this.#slots, base + 2, request);
|
||||
Atomics.store(this.#slots, base + 1, opcode);
|
||||
// The slot tag is its publication marker; write_index publishes the complete slot.
|
||||
Atomics.store(this.#slots, base, SLOT_VERSION);
|
||||
Atomics.store(this.#header, 5, (write + 1) | 0);
|
||||
Atomics.notify(this.#header, 5);
|
||||
} catch (error) {
|
||||
this.#pending.delete(request);
|
||||
this.#fail("PUBLICATION_FAILED");
|
||||
return Promise.reject(error);
|
||||
}
|
||||
return promise;
|
||||
}
|
||||
|
||||
#mesh(handle) {
|
||||
return new Mesh(HANDLE_TOKEN,
|
||||
visible => this.#enqueue(OP.MESH_FLAGS, [...handle, visible ? VISIBLE : 0]),
|
||||
async (transform, visible) => {
|
||||
const result = await this.#enqueue(OP.CREATE_INSTANCE, [...handle, ...floatWords(transform), visible ? VISIBLE : 0]);
|
||||
return this.#instance(result);
|
||||
});
|
||||
}
|
||||
|
||||
#instance(handle) {
|
||||
return new Instance(HANDLE_TOKEN,
|
||||
visible => this.#enqueue(OP.INSTANCE_FLAGS, [...handle, visible ? VISIBLE : 0]),
|
||||
transform => this.#enqueue(OP.INSTANCE_TRANSFORM, [...handle, ...floatWords(transform)]),
|
||||
() => this.#enqueue(OP.DESTROY_INSTANCE, [...handle]));
|
||||
}
|
||||
|
||||
async replaceSceneGlb(source, { framing = "exterior" } = {}) {
|
||||
if (this.#disposed) throw new RendererError("DISPOSED");
|
||||
if (framing !== "exterior" && framing !== "interior") throw new TypeError("framing must be exterior or interior");
|
||||
let buffer;
|
||||
if (typeof source === "string" || source instanceof URL) buffer = await (await fetch(source)).arrayBuffer();
|
||||
else if (typeof File !== "undefined" && source instanceof File) buffer = await source.arrayBuffer();
|
||||
else if (source instanceof ArrayBuffer) buffer = source;
|
||||
else throw new TypeError("GLB source must be URL, File, or ArrayBuffer");
|
||||
if (this.#disposed) throw new RendererError("DISPOSED");
|
||||
const result = await this.#withPayload(buffer, OP.IMPORT_GLB, [framing === "interior" ? 1 : 0]);
|
||||
return result.meshes.map(handle => this.#mesh(handle));
|
||||
}
|
||||
|
||||
/** Compatibility alias for the original opcode-1 API. */
|
||||
importGlb(source, options) { return this.replaceSceneGlb(source, options); }
|
||||
|
||||
async #withPayload(buffer, opcode, words = []) {
|
||||
if (this.#disposed) throw new RendererError("DISPOSED");
|
||||
let id;
|
||||
do { id = this.#payload++ >>> 0; if (!id) id = this.#payload++ >>> 0; }
|
||||
while (!id || this.#payloadActive.has(id));
|
||||
this.#payloadActive.add(id);
|
||||
const worker = this.#worker;
|
||||
const ready = new Promise((resolve, reject) => this.#payloadPending.set(id, { resolve, reject }));
|
||||
try {
|
||||
worker.postMessage({ type: "payload", id, buffer }, [buffer]);
|
||||
await ready;
|
||||
return await this.#enqueue(opcode, [id, ...words]);
|
||||
} finally {
|
||||
this.#payloadPending.delete(id);
|
||||
this.#payloadActive.delete(id);
|
||||
try { worker.postMessage({ type: "payload-release", id }); } catch { /* best effort after termination */ }
|
||||
}
|
||||
}
|
||||
|
||||
#graphCall(operation) {
|
||||
const result = new Promise((resolve, reject) => this.#graphQueue.push({operation, resolve, reject}));
|
||||
this.#pumpGraphQueue();
|
||||
return result;
|
||||
}
|
||||
|
||||
#pumpGraphQueue() {
|
||||
if (this.#graphBusy || !this.#graphQueue.length) return;
|
||||
const call = this.#graphQueue.shift();
|
||||
if (this.#disposed) { call.reject(new RendererError("DISPOSED")); this.#pumpGraphQueue(); return; }
|
||||
this.#graphBusy = true;
|
||||
let outcome;
|
||||
try { outcome = call.operation(); } catch (error) { outcome = Promise.reject(error); }
|
||||
Promise.resolve(outcome).then(call.resolve, call.reject).finally(() => { this.#graphBusy = false; this.#pumpGraphQueue(); });
|
||||
}
|
||||
|
||||
compileGraph(graph) {
|
||||
return this.#graphCall(() => this.#compileGraph(graph));
|
||||
}
|
||||
|
||||
async #compileGraph(graph) {
|
||||
if (this.#disposed) throw new RendererError("DISPOSED");
|
||||
let json;
|
||||
try { json = JSON.stringify(graph); } catch (error) { throw new RendererError("GRAPH_JSON_INVALID", { message: error?.message || "GRAPH_JSON_INVALID" }); }
|
||||
if (json === undefined) throw new RendererError("GRAPH_JSON_INVALID");
|
||||
const buffer = new TextEncoder().encode(json).buffer;
|
||||
if (buffer.byteLength > 1024 * 1024) throw new RendererError("GRAPH_PAYLOAD_TOO_LARGE");
|
||||
return this.#withPayload(buffer, OP.COMPILE_GRAPH);
|
||||
}
|
||||
|
||||
dropCompiledGraph(compiledId) {
|
||||
validateCompiledId(compiledId);
|
||||
return this.#graphCall(() => this.#enqueue(OP.DROP_GRAPH, compiledId));
|
||||
}
|
||||
|
||||
switchCompiledGraph(compiledId) {
|
||||
validateCompiledId(compiledId);
|
||||
if (compiledId[0] === 0 && compiledId[1] === 0) throw new TypeError("compiledId must be nonzero");
|
||||
return this.#graphCall(() => this.#enqueue(OP.SWITCH_GRAPH, [1, ...compiledId]));
|
||||
}
|
||||
|
||||
switchToImmediate() {
|
||||
return this.#graphCall(() => this.#enqueue(OP.SWITCH_GRAPH, [0, 0, 0]));
|
||||
}
|
||||
|
||||
dispose() { this.#fail("DISPOSED"); }
|
||||
}
|
||||
|
||||
function validateCompiledId(compiledId) {
|
||||
if (!Array.isArray(compiledId) || compiledId.length !== 2 || compiledId.some(word => !Number.isInteger(word) || word < 0 || word > 0xffffffff)) throw new TypeError("compiledId must contain exactly two uint32 values");
|
||||
}
|
||||
|
||||
function floatWords(matrix) {
|
||||
if (!matrix || matrix.length !== 16) throw new TypeError("transform must contain 16 numbers");
|
||||
return [...new Int32Array(new Float32Array(matrix).buffer)];
|
||||
}
|
||||
|
||||
class Mesh {
|
||||
#setVisible; #createInstance;
|
||||
constructor(token, setVisible, createInstance) {
|
||||
if (token !== HANDLE_TOKEN) throw new TypeError("Mesh cannot be constructed directly");
|
||||
this.#setVisible = setVisible;
|
||||
this.#createInstance = createInstance;
|
||||
}
|
||||
setVisible(visible) { return this.#setVisible(visible); }
|
||||
createInstance(transform, visible = true) { return this.#createInstance(transform, visible); }
|
||||
}
|
||||
|
||||
class Instance {
|
||||
#setVisible; #setTransform; #destroy; #dead = false;
|
||||
constructor(token, setVisible, setTransform, destroy) {
|
||||
if (token !== HANDLE_TOKEN) throw new TypeError("Instance cannot be constructed directly");
|
||||
this.#setVisible = setVisible;
|
||||
this.#setTransform = setTransform;
|
||||
this.#destroy = destroy;
|
||||
}
|
||||
#live() { if (this.#dead) throw new RendererError("STALE_HANDLE"); }
|
||||
setVisible(visible) { this.#live(); return this.#setVisible(visible); }
|
||||
setTransform(transform) { this.#live(); return this.#setTransform(transform); }
|
||||
async destroy() { this.#live(); await this.#destroy(); this.#dead = true; }
|
||||
}
|
||||
Reference in New Issue
Block a user