@plasius/gpu-shared 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasius/gpu-shared",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Shared browser-safe demo runtime and asset helpers for the Plasius gpu-* package family.",
   "type": "module",
   "sideEffects": false,
@@ -23,12 +23,16 @@
       "require": "./dist/index.cjs"
     },
     "./assets/brigantine.gltf": "./assets/brigantine.gltf",
+    "./assets/cutter.gltf": "./assets/cutter.gltf",
+    "./assets/lighthouse.gltf": "./assets/lighthouse.gltf",
+    "./assets/harbor-dock.gltf": "./assets/harbor-dock.gltf",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsup",
     "demo": "python3 -m http.server --directory ..",
     "demo:example": "node demo/example.js",
+    "generate:assets": "node scripts/generate-showcase-assets.mjs",
     "typecheck": "node --check src/index.js && node --check src/showcase-runtime.js && node --check src/gltf-loader.js && node --check demo/main.js",
     "audit:eslint": "eslint . --max-warnings=0",
     "audit:deps": "npm ls --all --omit=optional --omit=peer > /dev/null 2>&1 || true",
@@ -60,11 +64,21 @@
     "@plasius/gpu-performance": "^0.1.6",
     "@plasius/gpu-physics": "^0.1.13"
   },
+  "peerDependencies": {
+    "@plasius/translations": "^1.0.17"
+  },
+  "peerDependenciesMeta": {
+    "@plasius/translations": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@plasius/translations": "^1.0.17",
     "c8": "^11.0.0",
     "eslint": "^10.3.0",
     "globals": "^17.6.0",
+    "react": "^19.2.6",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3"
   },

package/src/asset-url.js

@@ -1,12 +1,23 @@
-const INLINE_BRIGANTINE_GLTF_URL =
-  "data:application/json;base64,ewogICJhc3NldCI6IHsKICAgICJ2ZXJzaW9uIjogIjIuMCIsCiAgICAiZ2VuZXJhdG9yIjogIlBsYXNpdXMgZGVtbyBhc3NldCBnZW5lcmF0b3IiCiAgfSwKICAic2NlbmUiOiAwLAogICJzY2VuZXMiOiBbCiAgICB7CiAgICAgICJub2RlcyI6IFswXQogICAgfQogIF0sCiAgIm5vZGVzIjogWwogICAgewogICAgICAibWVzaCI6IDAsCiAgICAgICJuYW1lIjogImJyaWdhbnRpbmUiLAogICAgICAiZXh0cmFzIjogewogICAgICAgICJwaHlzaWNzIjogewogICAgICAgICAgInNoYXBlIjogImJveCIsCiAgICAgICAgICAiaGFsZkV4dGVudHMiOiBbMS4zNSwgMC45NSwgMy45XSwKICAgICAgICAgICJtYXNzIjogMzIwMCwKICAgICAgICAgICJyZXN0aXR1dGlvbiI6IDAuMjIsCiAgICAgICAgICAibGluZWFyRGFtcGluZyI6IDAuMDQsCiAgICAgICAgICAiYW5ndWxhckRhbXBpbmciOiAwLjA4LAogICAgICAgICAgIndhdGVybGluZSI6IDAuNDIKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogICJtZXNoZXMiOiBbCiAgICB7CiAgICAgICJuYW1lIjogImJyaWdhbnRpbmUtaHVsbCIsCiAgICAgICJwcmltaXRpdmVzIjogWwogICAgICAgIHsKICAgICAgICAgICJhdHRyaWJ1dGVzIjogewogICAgICAgICAgICAiUE9TSVRJT04iOiAwCiAgICAgICAgICB9LAogICAgICAgICAgImluZGljZXMiOiAxLAogICAgICAgICAgIm1hdGVyaWFsIjogMAogICAgICAgIH0KICAgICAgXQogICAgfQogIF0sCiAgIm1hdGVyaWFscyI6IFsKICAgIHsKICAgICAgIm5hbWUiOiAicGFpbnRlZC1odWxsIiwKICAgICAgInBick1ldGFsbGljUm91Z2huZXNzIjogewogICAgICAgICJiYXNlQ29sb3JGYWN0b3IiOiBbMC41NiwgMC4zMywgMC4yMiwgMV0sCiAgICAgICAgIm1ldGFsbGljRmFjdG9yIjogMC4wOCwKICAgICAgICAicm91Z2huZXNzRmFjdG9yIjogMC45MgogICAgICB9CiAgICB9CiAgXSwKICAiYnVmZmVycyI6IFsKICAgIHsKICAgICAgInVyaSI6ICJkYXRhOmFwcGxpY2F0aW9uL29jdGV0LXN0cmVhbTtiYXNlNjQsbXBtWnZ3QUFBTC9OekV6QW1wbVpQd0FBQUwvTnpFekF6Y3lzdnpNenM3NHpNN08vemN5c1B6TXpzNzR6TTdPL0FBQ2d2ODNNVEwzTnpNdy9BQUNnUDgzTVRMM056TXcvQUFBQUFPeFJPTDR6TTROQUFBQUFBR1ptNWo0QUFIQkFNek56dnpNenN6NmFtUm5BTXpOelB6TXpzejZhbVJuQXpjeE12ejBLMXo3TnpFdy96Y3hNUHowSzF6N056RXcvQUFBQUFETXpjejltWm1hL0FBQUNBQU1BQUFBREFBRUFBZ0FFQUFVQUFnQUZBQU1BQkFBSEFBVUFCQUFHQUFjQUJRQUhBQVlBQUFBQkFBa0FBQUFKQUFnQUNBQUpBQXdBQWdBSUFBd0FBd0FNQUFrQUFnQU1BQW9BQXdBTEFBd0FBZ0FLQUFRQUF3QUZBQXNBQ2dBTUFBc0FBQUFJQUFJQUFRQURBQWtBQkFBS0FBWUFCUUFHQUFzQUFnQUtBQXNBQWdBTEFBTUEiLAogICAgICAiYnl0ZUxlbmd0aCI6IDI5NAogICAgfQogIF0sCiAgImJ1ZmZlclZpZXdzIjogWwogICAgewogICAgICAiYnVmZmVyIjogMCwKICAgICAgImJ5dGVPZmZzZXQiOiAwLAogICAgICAiYnl0ZUxlbmd0aCI6IDE1NiwKICAgICAgInRhcmdldCI6IDM0OTYyCiAgICB9LAogICAgewogICAgICAiYnVmZmVyIjogMCwKICAgICAgImJ5dGVPZmZzZXQiOiAxNTYsCiAgICAgICJieXRlTGVuZ3RoIjogMTM4LAogICAgICAidGFyZ2V0IjogMzQ5NjMKICAgIH0KICBdLAogICJhY2Nlc3NvcnMiOiBbCiAgICB7CiAgICAgICJidWZmZXJWaWV3IjogMCwKICAgICAgImJ5dGVPZmZzZXQiOiAwLAogICAgICAiY29tcG9uZW50VHlwZSI6IDUxMjYsCiAgICAgICJjb3VudCI6IDEzLAogICAgICAidHlwZSI6ICJWRUMzIiwKICAgICAgIm1pbiI6IFstMS4zNSwgLTAuNSwgLTMuMl0sCiAgICAgICJtYXgiOiBbMS4zNSwgMC45NSwgNC4xXQogICAgfSwKICAgIHsKICAgICAgImJ1ZmZlclZpZXciOiAxLAogICAgICAiYnl0ZU9mZnNldCI6IDAsCiAgICAgICJjb21wb25lbnRUeXBlIjogNTEyMywKICAgICAgImNvdW50IjogNjksCiAgICAgICJ0eXBlIjogIlNDQUxBUiIsCiAgICAgICJtYXgiOiBbMTJdLAogICAgICAibWluIjogWzBdCiAgICB9CiAgXQp9Cg==";
+import { INLINE_SHOWCASE_ASSET_URLS } from "./showcase-inline-assets.js";
 
-function createInlineShowcaseAssetUrl() {
-  return new URL(INLINE_BRIGANTINE_GLTF_URL);
+const SHOWCASE_ASSET_FILES = Object.freeze({
+  brigantine: "brigantine.gltf",
+  cutter: "cutter.gltf",
+  lighthouse: "lighthouse.gltf",
+  "harbor-dock": "harbor-dock.gltf",
+});
+
+function createInlineShowcaseAssetUrl(assetName) {
+  const inlineUrl = INLINE_SHOWCASE_ASSET_URLS[assetName];
+  return inlineUrl ? new URL(inlineUrl) : null;
 }
 
 function getBrowserBaseUrl() {
-  if (typeof document !== "undefined" && typeof document.baseURI === "string" && document.baseURI.length > 0) {
+  if (
+    typeof document !== "undefined" &&
+    typeof document.baseURI === "string" &&
+    document.baseURI.length > 0
+  ) {
     return document.baseURI;
   }
   if (
@@ -19,19 +30,59 @@ function getBrowserBaseUrl() {
   return null;
 }
 
-export function resolveShowcaseAssetUrl(baseUrl = import.meta.url) {
+function normalizeAssetName(assetName) {
+  return typeof assetName === "string" && assetName in SHOWCASE_ASSET_FILES
+    ? assetName
+    : "brigantine";
+}
+
+function parseResolveArgs(baseUrlOrAssetName, assetName) {
+  if (
+    typeof baseUrlOrAssetName === "string" &&
+    baseUrlOrAssetName in SHOWCASE_ASSET_FILES &&
+    typeof assetName === "undefined"
+  ) {
+    return {
+      baseUrl: import.meta.url,
+      assetName: baseUrlOrAssetName,
+    };
+  }
+
+  return {
+    baseUrl: baseUrlOrAssetName ?? import.meta.url,
+    assetName: normalizeAssetName(assetName),
+  };
+}
+
+export function resolveShowcaseAssetUrl(baseUrlOrAssetName, assetName) {
+  const resolved = parseResolveArgs(baseUrlOrAssetName, assetName);
+  const fileName = SHOWCASE_ASSET_FILES[resolved.assetName];
+
   try {
-    return new URL("../assets/brigantine.gltf", baseUrl);
+    return new URL(`../assets/${fileName}`, resolved.baseUrl);
   } catch {
     const browserBaseUrl = getBrowserBaseUrl();
     if (browserBaseUrl) {
       try {
-        const normalizedBaseUrl = new URL(baseUrl, browserBaseUrl);
-        return new URL("../assets/brigantine.gltf", normalizedBaseUrl);
+        const normalizedBaseUrl = new URL(resolved.baseUrl, browserBaseUrl);
+        return new URL(`../assets/${fileName}`, normalizedBaseUrl);
       } catch {
-        return createInlineShowcaseAssetUrl();
+        const inlineAsset = createInlineShowcaseAssetUrl(resolved.assetName);
+        if (inlineAsset) {
+          return inlineAsset;
+        }
       }
     }
-    return createInlineShowcaseAssetUrl();
+
+    try {
+      return new URL(`../assets/${fileName}`, import.meta.url);
+    } catch {
+      return new URL(`assets/${fileName}`, "file:///");
+    }
   }
 }
+
+export function shouldUseInlineShowcaseFallback(url) {
+  const href = url instanceof URL ? url.href : String(url ?? "");
+  return href.includes("/assets/");
+}

package/src/feature-flags.js

@@ -0,0 +1 @@
+export const GPU_SHOWCASE_REALISTIC_MODELS_FEATURE = "gpu_showcase_realistic_models_v1";

package/src/gltf-loader.js

@@ -1,3 +1,5 @@
+import { shouldUseInlineShowcaseFallback } from "./asset-url.js";
+
 function decodeDataUri(uri) {
   const match = /^data:.*?;base64,(.+)$/i.exec(uri);
   if (!match) {
@@ -14,6 +16,8 @@ function decodeDataUri(uri) {
 
 function getComponentArray(componentType, buffer, byteOffset, count) {
   switch (componentType) {
+    case 5121:
+      return new Uint8Array(buffer, byteOffset, count);
     case 5123:
       return new Uint16Array(buffer, byteOffset, count);
     case 5125:
@@ -25,6 +29,17 @@ function getComponentArray(componentType, buffer, byteOffset, count) {
   }
 }
 
+function getNormalizationScale(componentType) {
+  switch (componentType) {
+    case 5121:
+      return 255;
+    case 5123:
+      return 65535;
+    default:
+      return 1;
+  }
+}
+
 function getTypeSize(type) {
   switch (type) {
     case "SCALAR":
@@ -41,30 +56,74 @@ function getTypeSize(type) {
 }
 
 function readAccessor(document, accessorIndex, buffers) {
-  const accessor = document.accessors[accessorIndex];
-  const bufferView = document.bufferViews[accessor.bufferView];
+  const accessor = document.accessors?.[accessorIndex];
+  if (!accessor) {
+    throw new Error(`glTF accessor ${accessorIndex} is missing.`);
+  }
+
+  const bufferView = document.bufferViews?.[accessor.bufferView];
+  if (!bufferView) {
+    throw new Error(`glTF bufferView ${accessor.bufferView} is missing.`);
+  }
+
   const buffer = buffers[bufferView.buffer];
   const componentCount = getTypeSize(accessor.type);
   const byteOffset = (bufferView.byteOffset ?? 0) + (accessor.byteOffset ?? 0);
   const valueCount = accessor.count * componentCount;
-  return getComponentArray(accessor.componentType, buffer, byteOffset, valueCount);
+  const values = Array.from(
+    getComponentArray(accessor.componentType, buffer, byteOffset, valueCount)
+  );
+
+  if (accessor.normalized) {
+    const scale = getNormalizationScale(accessor.componentType);
+    return values.map((value) => value / scale);
+  }
+
+  return values;
 }
 
-function getMaterialColor(document, primitive) {
+function getMaterialInfo(document, primitive) {
   const material = document.materials?.[primitive.material] ?? null;
   const factor =
     material?.pbrMetallicRoughness?.baseColorFactor ?? [0.56, 0.33, 0.22, 1];
-  return {
-    r: factor[0],
-    g: factor[1],
-    b: factor[2],
-    a: factor[3] ?? 1,
-  };
+  const emissive = material?.emissiveFactor ?? [0, 0, 0];
+
+  return Object.freeze({
+    name: material?.name ?? "default-material",
+    color: Object.freeze({
+      r: factor[0],
+      g: factor[1],
+      b: factor[2],
+      a: factor[3] ?? 1,
+    }),
+    roughness:
+      typeof material?.pbrMetallicRoughness?.roughnessFactor === "number"
+        ? material.pbrMetallicRoughness.roughnessFactor
+        : 0.92,
+    metallic:
+      typeof material?.pbrMetallicRoughness?.metallicFactor === "number"
+        ? material.pbrMetallicRoughness.metallicFactor
+        : 0.08,
+    emissive: Object.freeze({
+      r: emissive[0] ?? 0,
+      g: emissive[1] ?? 0,
+      b: emissive[2] ?? 0,
+    }),
+  });
 }
 
 function computeBounds(positions) {
-  const min = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY];
-  const max = [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
+  const min = [
+    Number.POSITIVE_INFINITY,
+    Number.POSITIVE_INFINITY,
+    Number.POSITIVE_INFINITY,
+  ];
+  const max = [
+    Number.NEGATIVE_INFINITY,
+    Number.NEGATIVE_INFINITY,
+    Number.NEGATIVE_INFINITY,
+  ];
+
   for (let index = 0; index < positions.length; index += 3) {
     min[0] = Math.min(min[0], positions[index]);
     min[1] = Math.min(min[1], positions[index + 1]);
@@ -73,11 +132,19 @@ function computeBounds(positions) {
     max[1] = Math.max(max[1], positions[index + 1]);
     max[2] = Math.max(max[2], positions[index + 2]);
   }
-  return { min, max };
+
+  return Object.freeze({
+    min: Object.freeze([min[0], min[1], min[2]]),
+    max: Object.freeze([max[0], max[1], max[2]]),
+  });
 }
 
 function resolveBrowserRequestBaseUrl() {
-  if (typeof document !== "undefined" && typeof document.baseURI === "string" && document.baseURI.length > 0) {
+  if (
+    typeof document !== "undefined" &&
+    typeof document.baseURI === "string" &&
+    document.baseURI.length > 0
+  ) {
     return document.baseURI;
   }
   if (
@@ -106,18 +173,217 @@ function resolveFetchBaseUrl(requestUrl, responseUrl) {
     if (browserBaseUrl) {
       return new URL(requestUrl, browserBaseUrl);
     }
-    throw new Error(`Unable to resolve a stable base URL for glTF asset loading: ${String(requestUrl)}`);
+    throw new Error(
+      `Unable to resolve a stable base URL for glTF asset loading: ${String(requestUrl)}`
+    );
   }
 }
 
-export async function loadGltfModel(url) {
+function createIdentityMatrix() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+
+function multiplyMatrices(a, b) {
+  const out = new Array(16).fill(0);
+  for (let column = 0; column < 4; column += 1) {
+    for (let row = 0; row < 4; row += 1) {
+      out[column * 4 + row] =
+        a[0 * 4 + row] * b[column * 4 + 0] +
+        a[1 * 4 + row] * b[column * 4 + 1] +
+        a[2 * 4 + row] * b[column * 4 + 2] +
+        a[3 * 4 + row] * b[column * 4 + 3];
+    }
+  }
+  return out;
+}
+
+function composeNodeMatrix(node) {
+  if (Array.isArray(node.matrix) && node.matrix.length === 16) {
+    return [...node.matrix];
+  }
+
+  const translation = Array.isArray(node.translation) ? node.translation : [0, 0, 0];
+  const rotation = Array.isArray(node.rotation) ? node.rotation : [0, 0, 0, 1];
+  const scale = Array.isArray(node.scale) ? node.scale : [1, 1, 1];
+  const [x, y, z, w] = rotation;
+  const x2 = x + x;
+  const y2 = y + y;
+  const z2 = z + z;
+  const xx = x * x2;
+  const xy = x * y2;
+  const xz = x * z2;
+  const yy = y * y2;
+  const yz = y * z2;
+  const zz = z * z2;
+  const wx = w * x2;
+  const wy = w * y2;
+  const wz = w * z2;
+
+  return [
+    (1 - (yy + zz)) * scale[0],
+    (xy + wz) * scale[0],
+    (xz - wy) * scale[0],
+    0,
+    (xy - wz) * scale[1],
+    (1 - (xx + zz)) * scale[1],
+    (yz + wx) * scale[1],
+    0,
+    (xz + wy) * scale[2],
+    (yz - wx) * scale[2],
+    (1 - (xx + yy)) * scale[2],
+    0,
+    translation[0],
+    translation[1],
+    translation[2],
+    1,
+  ];
+}
+
+function transformPosition(position, matrix) {
+  return [
+    matrix[0] * position[0] + matrix[4] * position[1] + matrix[8] * position[2] + matrix[12],
+    matrix[1] * position[0] + matrix[5] * position[1] + matrix[9] * position[2] + matrix[13],
+    matrix[2] * position[0] + matrix[6] * position[1] + matrix[10] * position[2] + matrix[14],
+  ];
+}
+
+function transformNormal(normal, matrix) {
+  const transformed = [
+    matrix[0] * normal[0] + matrix[4] * normal[1] + matrix[8] * normal[2],
+    matrix[1] * normal[0] + matrix[5] * normal[1] + matrix[9] * normal[2],
+    matrix[2] * normal[0] + matrix[6] * normal[1] + matrix[10] * normal[2],
+  ];
+  const length = Math.hypot(transformed[0], transformed[1], transformed[2]) || 1;
+  return [transformed[0] / length, transformed[1] / length, transformed[2] / length];
+}
+
+function collectScenePrimitives(document, buffers) {
+  const scene = document.scenes?.[document.scene ?? 0];
+  if (!scene || !Array.isArray(scene.nodes) || scene.nodes.length === 0) {
+    throw new Error("glTF demo asset must expose a default scene with at least one node.");
+  }
+
+  const results = [];
+  let modelName = null;
+  let physics = null;
+
+  function visit(nodeIndex, parentMatrix) {
+    const node = document.nodes?.[nodeIndex];
+    if (!node) {
+      throw new Error(`glTF node ${nodeIndex} is missing.`);
+    }
+
+    const localMatrix = composeNodeMatrix(node);
+    const worldMatrix = multiplyMatrices(parentMatrix, localMatrix);
+
+    if (!modelName && typeof node.name === "string" && node.name.length > 0) {
+      modelName = node.name;
+    }
+
+    if (!physics && node.extras?.physics && typeof node.extras.physics === "object") {
+      physics = Object.freeze({ ...node.extras.physics });
+    }
+
+    if (typeof node.mesh === "number") {
+      const mesh = document.meshes?.[node.mesh];
+      if (!mesh || !Array.isArray(mesh.primitives)) {
+        throw new Error(`glTF mesh ${node.mesh} is missing primitives.`);
+      }
+
+      mesh.primitives.forEach((primitive, primitiveIndex) => {
+        const positions = readAccessor(document, primitive.attributes.POSITION, buffers);
+        const normals =
+          typeof primitive.attributes.NORMAL === "number"
+            ? readAccessor(document, primitive.attributes.NORMAL, buffers)
+            : null;
+        const colors =
+          typeof primitive.attributes.COLOR_0 === "number"
+            ? readAccessor(document, primitive.attributes.COLOR_0, buffers)
+            : null;
+        const transformedPositions = [];
+        const transformedNormals = [];
+
+        for (let index = 0; index < positions.length; index += 3) {
+          const point = transformPosition(
+            [positions[index], positions[index + 1], positions[index + 2]],
+            worldMatrix
+          );
+          transformedPositions.push(point[0], point[1], point[2]);
+
+          if (normals) {
+            const normal = transformNormal(
+              [normals[index], normals[index + 1], normals[index + 2]],
+              worldMatrix
+            );
+            transformedNormals.push(normal[0], normal[1], normal[2]);
+          }
+        }
+
+        const indices =
+          typeof primitive.indices === "number"
+            ? readAccessor(document, primitive.indices, buffers).map((value) => Number(value))
+            : Array.from({ length: transformedPositions.length / 3 }, (_, index) => index);
+        const material = getMaterialInfo(document, primitive);
+        const primitiveName =
+          `${node.name ?? mesh.name ?? "mesh"}-${primitiveIndex}`;
+
+        results.push(
+          Object.freeze({
+            name: primitiveName,
+            positions: Object.freeze(transformedPositions),
+            indices: Object.freeze(indices),
+            normals:
+              transformedNormals.length > 0
+                ? Object.freeze(transformedNormals)
+                : null,
+            colors: colors ? Object.freeze(colors) : null,
+            material,
+            bounds: computeBounds(transformedPositions),
+          })
+        );
+      });
+    }
+
+    if (Array.isArray(node.children)) {
+      for (const childIndex of node.children) {
+        visit(childIndex, worldMatrix);
+      }
+    }
+  }
+
+  for (const rootNodeIndex of scene.nodes) {
+    visit(rootNodeIndex, createIdentityMatrix());
+  }
+
+  if (results.length === 0) {
+    throw new Error("glTF demo asset must contain at least one mesh primitive.");
+  }
+
+  return {
+    name: modelName ?? "gltf-model",
+    physics: physics ?? Object.freeze({}),
+    primitives: results,
+  };
+}
+
+async function loadGltfDocument(url) {
   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`Failed to load glTF asset: ${response.status} ${response.statusText}`);
   }
 
-  const document = await response.json();
-  const baseUrl = resolveFetchBaseUrl(url, response.url);
+  return {
+    document: await response.json(),
+    baseUrl: resolveFetchBaseUrl(url, response.url),
+  };
+}
+
+async function loadInlineShowcaseDocument() {
+  const module = await import("./showcase-inline-assets.js");
+  return loadGltfDocument(new URL(module.INLINE_SHOWCASE_ASSET_URLS.brigantine));
+}
+
+async function buildGltfModel(document, baseUrl) {
   const buffers = await Promise.all(
     (document.buffers ?? []).map(async (buffer) => {
       if (typeof buffer.uri !== "string") {
@@ -134,23 +400,47 @@ export async function loadGltfModel(url) {
     })
   );
 
-  const scene = document.scenes?.[document.scene ?? 0];
-  if (!scene || !Array.isArray(scene.nodes) || scene.nodes.length === 0) {
-    throw new Error("glTF demo asset must expose a default scene with at least one node.");
+  const scene = collectScenePrimitives(document, buffers);
+  const aggregatePositions = [];
+  const aggregateIndices = [];
+
+  for (const primitive of scene.primitives) {
+    const vertexOffset = aggregatePositions.length / 3;
+    aggregatePositions.push(...primitive.positions);
+    aggregateIndices.push(...primitive.indices.map((index) => index + vertexOffset));
   }
 
-  const node = document.nodes[scene.nodes[0]];
-  const mesh = document.meshes[node.mesh];
-  const primitive = mesh.primitives[0];
-  const positions = Array.from(readAccessor(document, primitive.attributes.POSITION, buffers));
-  const indices = Array.from(readAccessor(document, primitive.indices, buffers));
+  const color = scene.primitives[0]?.material?.color ?? { r: 0.56, g: 0.33, b: 0.22, a: 1 };
 
   return Object.freeze({
-    name: node.name ?? mesh.name ?? "gltf-model",
-    positions,
-    indices,
-    bounds: computeBounds(positions),
-    color: getMaterialColor(document, primitive),
-    physics: Object.freeze({ ...(node.extras?.physics ?? {}) }),
+    name: scene.name,
+    positions: Object.freeze(aggregatePositions),
+    indices: Object.freeze(aggregateIndices),
+    bounds: computeBounds(aggregatePositions),
+    color: Object.freeze({ ...color }),
+    physics: scene.physics,
+    primitives: Object.freeze(scene.primitives),
   });
 }
+
+function shouldRetryWithInlineShowcaseFallback(url, error) {
+  if (!shouldUseInlineShowcaseFallback(url)) {
+    return false;
+  }
+
+  return error instanceof TypeError || /^Failed to load glTF asset:/u.test(error.message);
+}
+
+export async function loadGltfModel(url) {
+  try {
+    const { document, baseUrl } = await loadGltfDocument(url);
+    return buildGltfModel(document, baseUrl);
+  } catch (error) {
+    if (!shouldRetryWithInlineShowcaseFallback(url, error)) {
+      throw error;
+    }
+
+    const { document, baseUrl } = await loadInlineShowcaseDocument();
+    return buildGltfModel(document, baseUrl);
+  }
+}

package/src/i18n.js

@@ -0,0 +1,71 @@
+import { gpuSharedEnGbTranslations } from "./translations/en-GB.js";
+
+export const gpuSharedTranslationKeys = Object.freeze({
+  showcaseTitle: "gpuShared.showcase.title",
+  showcaseSubtitle: "gpuShared.showcase.subtitle",
+  statusBooting: "gpuShared.showcase.status.booting",
+  statusLive: "gpuShared.showcase.status.live",
+  detailsBooting: "gpuShared.showcase.details.booting",
+  detailsPhysics: "gpuShared.showcase.details.physics",
+  detailsRealistic: "gpuShared.showcase.details.realistic",
+  detailsLegacy: "gpuShared.showcase.details.legacy",
+  pause: "gpuShared.showcase.action.pause",
+  resume: "gpuShared.showcase.action.resume",
+  stressMode: "gpuShared.showcase.control.stressMode",
+  focus: "gpuShared.showcase.control.focus",
+  focusIntegrated: "gpuShared.showcase.focus.integrated",
+  focusLighting: "gpuShared.showcase.focus.lighting",
+  focusCloth: "gpuShared.showcase.focus.cloth",
+  focusFluid: "gpuShared.showcase.focus.fluid",
+  focusPhysics: "gpuShared.showcase.focus.physics",
+  focusPerformance: "gpuShared.showcase.focus.performance",
+  focusDebug: "gpuShared.showcase.focus.debug",
+  legendTitle: "gpuShared.showcase.legend.title",
+  legendShipMetadata: "gpuShared.showcase.legend.shipMetadata",
+  legendLighting: "gpuShared.showcase.legend.lighting",
+  legendCollisions: "gpuShared.showcase.legend.collisions",
+  sceneState: "gpuShared.showcase.section.sceneState",
+  qualityBudgets: "gpuShared.showcase.section.qualityBudgets",
+  debugTelemetry: "gpuShared.showcase.section.debugTelemetry",
+  notes: "gpuShared.showcase.section.notes",
+  noteAssetLoading: "gpuShared.showcase.note.assetLoading",
+  noteMoonlight: "gpuShared.showcase.note.moonlight",
+  noteContinuity: "gpuShared.showcase.note.continuity",
+  notePerformance: "gpuShared.showcase.note.performance",
+  notePhysicsSnapshots: "gpuShared.showcase.note.physicsSnapshots",
+  notePhysicsCollisions: "gpuShared.showcase.note.physicsCollisions",
+  notePhysicsLighting: "gpuShared.showcase.note.physicsLighting",
+  debugAdapterShowcase: "gpuShared.debug.adapter.showcase",
+  debugMainColorBuffer: "gpuShared.debug.allocation.mainColorBuffer",
+  debugShadowImpressionAtlas: "gpuShared.debug.allocation.shadowImpressionAtlas",
+});
+
+export const gpuSharedTranslations = Object.freeze({
+  "en-GB": gpuSharedEnGbTranslations,
+});
+
+function formatTranslation(template, args = {}) {
+  return template.replace(/\{([A-Za-z0-9_]+)\}/g, (match, name) => {
+    if (!Object.prototype.hasOwnProperty.call(args, name)) {
+      return match;
+    }
+
+    const value = args[name];
+    return value == null ? "" : String(value);
+  });
+}
+
+export function translateGpuSharedText(key, args, translate) {
+  const translated = translate?.(key, args);
+  if (translated && translated !== key) {
+    return translated;
+  }
+
+  const fallback = gpuSharedEnGbTranslations[key];
+  return fallback ? formatTranslation(fallback, args) : key;
+}
+
+export function createGpuSharedTranslator(translate) {
+  return (key, args) => translateGpuSharedText(key, args, translate);
+}
+