@plasius/gpu-shared 0.1.16 → 0.1.18

package/dist/index.cjs

@@ -295,6 +295,33 @@ function getTypeSize(type) {
       throw new Error(`Unsupported glTF accessor type: ${type}`);
   }
 }
+function getComponentByteSize(componentType) {
+  switch (componentType) {
+    case 5121:
+      return 1;
+    case 5123:
+      return 2;
+    case 5125:
+    case 5126:
+      return 4;
+    default:
+      throw new Error(`Unsupported glTF componentType: ${componentType}`);
+  }
+}
+function readComponentValue(view, componentType, byteOffset) {
+  switch (componentType) {
+    case 5121:
+      return view.getUint8(byteOffset);
+    case 5123:
+      return view.getUint16(byteOffset, true);
+    case 5125:
+      return view.getUint32(byteOffset, true);
+    case 5126:
+      return view.getFloat32(byteOffset, true);
+    default:
+      throw new Error(`Unsupported glTF componentType: ${componentType}`);
+  }
+}
 function readAccessor(document2, accessorIndex, buffers) {
   const accessor = document2.accessors?.[accessorIndex];
   if (!accessor) {
@@ -307,20 +334,255 @@ function readAccessor(document2, accessorIndex, buffers) {
   const buffer = buffers[bufferView.buffer];
   const componentCount = getTypeSize(accessor.type);
   const byteOffset = (bufferView.byteOffset ?? 0) + (accessor.byteOffset ?? 0);
-  const valueCount = accessor.count * componentCount;
-  const values = Array.from(
-    getComponentArray(accessor.componentType, buffer, byteOffset, valueCount)
-  );
+  const componentByteSize = getComponentByteSize(accessor.componentType);
+  const packedElementByteLength = componentCount * componentByteSize;
+  const byteStride = Math.max(bufferView.byteStride ?? packedElementByteLength, packedElementByteLength);
+  let values;
+  if (byteStride === packedElementByteLength) {
+    const valueCount = accessor.count * componentCount;
+    values = Array.from(
+      getComponentArray(accessor.componentType, buffer, byteOffset, valueCount)
+    );
+  } else {
+    const view = new DataView(buffer, byteOffset);
+    values = new Array(accessor.count * componentCount);
+    for (let index = 0; index < accessor.count; index += 1) {
+      const elementOffset = index * byteStride;
+      for (let componentIndex = 0; componentIndex < componentCount; componentIndex += 1) {
+        values[index * componentCount + componentIndex] = readComponentValue(
+          view,
+          accessor.componentType,
+          elementOffset + componentIndex * componentByteSize
+        );
+      }
+    }
+  }
   if (accessor.normalized) {
     const scale = getNormalizationScale(accessor.componentType);
     return values.map((value) => value / scale);
   }
   return values;
 }
-function getMaterialInfo(document2, primitive) {
+async function decodeImagePixels(blob, urlLabel = "glTF texture") {
+  if (typeof createImageBitmap === "function") {
+    const bitmap = await createImageBitmap(blob);
+    try {
+      const canvas = typeof OffscreenCanvas === "function" ? new OffscreenCanvas(bitmap.width, bitmap.height) : typeof document !== "undefined" ? Object.assign(document.createElement("canvas"), {
+        width: bitmap.width,
+        height: bitmap.height
+      }) : null;
+      const context = canvas?.getContext?.("2d", { willReadFrequently: true });
+      if (!context) {
+        throw new Error("Unable to create 2D context for glTF texture decode.");
+      }
+      context.drawImage(bitmap, 0, 0);
+      const imageData = context.getImageData(0, 0, bitmap.width, bitmap.height);
+      return Object.freeze({
+        width: bitmap.width,
+        height: bitmap.height,
+        data: imageData.data
+      });
+    } finally {
+      bitmap.close?.();
+    }
+  }
+  if (typeof document === "undefined") {
+    throw new Error(`Unable to decode ${urlLabel}: browser image decode APIs are unavailable.`);
+  }
+  const objectUrl = URL.createObjectURL(blob);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const element = new Image();
+      element.onload = () => resolve(element);
+      element.onerror = () => reject(new Error(`Failed to decode ${urlLabel}.`));
+      element.src = objectUrl;
+    });
+    const canvas = Object.assign(document.createElement("canvas"), {
+      width: image.naturalWidth || image.width,
+      height: image.naturalHeight || image.height
+    });
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) {
+      throw new Error("Unable to create 2D context for glTF texture decode.");
+    }
+    context.drawImage(image, 0, 0);
+    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    return Object.freeze({
+      width: canvas.width,
+      height: canvas.height,
+      data: imageData.data
+    });
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+function sliceBufferView(document2, bufferViewIndex, buffers) {
+  const bufferView = document2.bufferViews?.[bufferViewIndex];
+  if (!bufferView) {
+    throw new Error(`glTF bufferView ${bufferViewIndex} is missing.`);
+  }
+  const buffer = buffers[bufferView.buffer];
+  if (!buffer) {
+    throw new Error(`glTF buffer ${bufferView.buffer} is missing.`);
+  }
+  const start = bufferView.byteOffset ?? 0;
+  const end = start + (bufferView.byteLength ?? 0);
+  return buffer.slice(start, end);
+}
+async function loadImageResource(document2, image, index, buffers, baseUrl2) {
+  if (typeof image?.uri === "string") {
+    const response = await fetch(new URL(image.uri, baseUrl2));
+    if (!response.ok) {
+      throw new Error(`Failed to load glTF texture: ${response.status} ${response.statusText}`);
+    }
+    return decodeImagePixels(
+      await response.blob(),
+      `glTF texture ${index}${image.uri ? ` (${image.uri})` : ""}`
+    );
+  }
+  if (typeof image?.bufferView === "number") {
+    const bytes = sliceBufferView(document2, image.bufferView, buffers);
+    return decodeImagePixels(
+      new Blob([bytes], { type: image.mimeType ?? "application/octet-stream" }),
+      `glTF texture ${index}`
+    );
+  }
+  return null;
+}
+function normalizeTextureTransformPair(value, fallback) {
+  if (!Array.isArray(value) || value.length < 2) {
+    return fallback;
+  }
+  return [
+    Number.isFinite(value[0]) ? Number(value[0]) : fallback[0],
+    Number.isFinite(value[1]) ? Number(value[1]) : fallback[1]
+  ];
+}
+function readTextureTransform(textureRef) {
+  const transformExtension = textureRef?.extensions?.KHR_texture_transform ?? null;
+  return {
+    texCoord: typeof transformExtension?.texCoord === "number" ? transformExtension.texCoord : textureRef?.texCoord ?? 0,
+    offset: normalizeTextureTransformPair(transformExtension?.offset, [0, 0]),
+    scale: normalizeTextureTransformPair(transformExtension?.scale, [1, 1]),
+    rotation: Number.isFinite(transformExtension?.rotation) ? Number(transformExtension.rotation) : 0
+  };
+}
+function wrapTextureCoordinate(value) {
+  return (value % 1 + 1) % 1;
+}
+function transformTextureCoordinate(uv, transform) {
+  const scaledU = uv[0] * transform.scale[0];
+  const scaledV = uv[1] * transform.scale[1];
+  const cosine = Math.cos(transform.rotation);
+  const sine = Math.sin(transform.rotation);
+  return [
+    scaledU * cosine - scaledV * sine + transform.offset[0],
+    scaledU * sine + scaledV * cosine + transform.offset[1]
+  ];
+}
+function readTexturePixel(data, width, height, x, y) {
+  const clampedX = Math.min(width - 1, Math.max(0, x));
+  const clampedY = Math.min(height - 1, Math.max(0, y));
+  const offset = (clampedY * width + clampedX) * 4;
+  return [
+    data[offset] ?? 0,
+    data[offset + 1] ?? 0,
+    data[offset + 2] ?? 0,
+    data[offset + 3] ?? 255
+  ];
+}
+function mixChannel(a, b, weight) {
+  return a + (b - a) * weight;
+}
+function sampleTexturePixel(data, width, height, uv) {
+  const u = wrapTextureCoordinate(uv[0]);
+  const v = wrapTextureCoordinate(uv[1]);
+  const sourceX = u * Math.max(width - 1, 0);
+  const sourceY = (1 - v) * Math.max(height - 1, 0);
+  const x0 = Math.floor(sourceX);
+  const y0 = Math.floor(sourceY);
+  const x1 = Math.min(width - 1, x0 + 1);
+  const y1 = Math.min(height - 1, y0 + 1);
+  const tx = sourceX - x0;
+  const ty = sourceY - y0;
+  const topLeft = readTexturePixel(data, width, height, x0, y0);
+  const topRight = readTexturePixel(data, width, height, x1, y0);
+  const bottomLeft = readTexturePixel(data, width, height, x0, y1);
+  const bottomRight = readTexturePixel(data, width, height, x1, y1);
+  return [0, 1, 2, 3].map((channelIndex) => {
+    const top = mixChannel(topLeft[channelIndex], topRight[channelIndex], tx);
+    const bottom = mixChannel(bottomLeft[channelIndex], bottomRight[channelIndex], tx);
+    return mixChannel(top, bottom, ty);
+  });
+}
+function applyTextureTransformToPixels(pixels, transform) {
+  const isIdentityTransform = transform.offset[0] === 0 && transform.offset[1] === 0 && transform.scale[0] === 1 && transform.scale[1] === 1 && transform.rotation === 0;
+  if (isIdentityTransform) {
+    return pixels;
+  }
+  const transformedData = new Uint8ClampedArray(pixels.data.length);
+  for (let y = 0; y < pixels.height; y += 1) {
+    const outputV = pixels.height > 1 ? 1 - y / (pixels.height - 1) : 0;
+    for (let x = 0; x < pixels.width; x += 1) {
+      const outputU = pixels.width > 1 ? x / (pixels.width - 1) : 0;
+      const sourcePixel = sampleTexturePixel(
+        pixels.data,
+        pixels.width,
+        pixels.height,
+        transformTextureCoordinate([outputU, outputV], transform)
+      );
+      const offset = (y * pixels.width + x) * 4;
+      transformedData[offset] = sourcePixel[0];
+      transformedData[offset + 1] = sourcePixel[1];
+      transformedData[offset + 2] = sourcePixel[2];
+      transformedData[offset + 3] = sourcePixel[3];
+    }
+  }
+  return Object.freeze({
+    width: pixels.width,
+    height: pixels.height,
+    data: transformedData
+  });
+}
+function getMaterialTexture(document2, textureRef, imageResources) {
+  if (!textureRef || typeof textureRef.index !== "number") {
+    return null;
+  }
+  const texture = document2.textures?.[textureRef.index] ?? null;
+  const sourceIndex = texture?.source;
+  if (typeof sourceIndex !== "number") {
+    return null;
+  }
+  const pixels = imageResources.get(sourceIndex) ?? null;
+  if (!pixels) {
+    return null;
+  }
+  const transform = readTextureTransform(textureRef);
+  const transformedPixels = applyTextureTransformToPixels(pixels, transform);
+  return Object.freeze({
+    texCoord: transform.texCoord,
+    scale: textureRef.scale,
+    strength: textureRef.strength,
+    width: transformedPixels.width,
+    height: transformedPixels.height,
+    data: transformedPixels.data
+  });
+}
+function getMaterialInfo(document2, primitive, imageResources) {
   const material = document2.materials?.[primitive.material] ?? null;
-  const factor = material?.pbrMetallicRoughness?.baseColorFactor ?? [0.56, 0.33, 0.22, 1];
-  const emissive = material?.emissiveFactor ?? [0, 0, 0];
+  const pbr = material?.pbrMetallicRoughness ?? null;
+  const factor = pbr?.baseColorFactor ?? [0.56, 0.33, 0.22, 1];
+  const emissive = Array.isArray(material?.emissiveFactor) ? material.emissiveFactor : [0, 0, 0];
+  const extensions = material?.extensions ?? {};
+  const specular = extensions.KHR_materials_specular ?? null;
+  const transmission = extensions.KHR_materials_transmission ?? null;
+  const ior = extensions.KHR_materials_ior ?? null;
+  const clearcoat = extensions.KHR_materials_clearcoat ?? null;
+  const sheen = extensions.KHR_materials_sheen ?? null;
+  const volume = extensions.KHR_materials_volume ?? null;
+  const iridescence = extensions.KHR_materials_iridescence ?? null;
+  const anisotropy = extensions.KHR_materials_anisotropy ?? null;
+  const dispersion = extensions.KHR_materials_dispersion ?? null;
   return Object.freeze({
     name: material?.name ?? "default-material",
     color: Object.freeze({
@@ -329,13 +591,88 @@ function getMaterialInfo(document2, primitive) {
       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,
+    roughness: typeof pbr?.roughnessFactor === "number" ? pbr.roughnessFactor : 0.92,
+    metallic: typeof pbr?.metallicFactor === "number" ? pbr.metallicFactor : 0.08,
+    opacity: factor[3] ?? 1,
     emissive: Object.freeze({
       r: emissive[0] ?? 0,
       g: emissive[1] ?? 0,
-      b: emissive[2] ?? 0
-    })
+      b: emissive[2] ?? 0,
+      a: 1
+    }),
+    baseColorTexture: getMaterialTexture(document2, pbr?.baseColorTexture, imageResources),
+    metallicRoughnessTexture: getMaterialTexture(
+      document2,
+      pbr?.metallicRoughnessTexture,
+      imageResources
+    ),
+    normalTexture: getMaterialTexture(document2, material?.normalTexture, imageResources),
+    occlusionTexture: getMaterialTexture(document2, material?.occlusionTexture, imageResources),
+    emissiveTexture: getMaterialTexture(document2, material?.emissiveTexture, imageResources),
+    specular: typeof specular?.specularFactor === "number" ? specular.specularFactor : 1,
+    specularColor: Object.freeze(
+      Array.isArray(specular?.specularColorFactor) ? [...specular.specularColorFactor] : [1, 1, 1]
+    ),
+    specularTexture: getMaterialTexture(document2, specular?.specularTexture, imageResources),
+    specularColorTexture: getMaterialTexture(
+      document2,
+      specular?.specularColorTexture,
+      imageResources
+    ),
+    transmission: typeof transmission?.transmissionFactor === "number" ? transmission.transmissionFactor : 0,
+    transmissionTexture: getMaterialTexture(
+      document2,
+      transmission?.transmissionTexture,
+      imageResources
+    ),
+    ior: typeof ior?.ior === "number" ? ior.ior : 1.45,
+    attenuationDistance: typeof volume?.attenuationDistance === "number" ? volume.attenuationDistance : null,
+    attenuationColor: Object.freeze(
+      Array.isArray(volume?.attenuationColor) ? [...volume.attenuationColor] : [1, 1, 1]
+    ),
+    thickness: typeof volume?.thicknessFactor === "number" ? volume.thicknessFactor : 0,
+    thicknessTexture: getMaterialTexture(document2, volume?.thicknessTexture, imageResources),
+    clearcoat: typeof clearcoat?.clearcoatFactor === "number" ? clearcoat.clearcoatFactor : 0,
+    clearcoatTexture: getMaterialTexture(document2, clearcoat?.clearcoatTexture, imageResources),
+    clearcoatRoughness: typeof clearcoat?.clearcoatRoughnessFactor === "number" ? clearcoat.clearcoatRoughnessFactor : 0.08,
+    clearcoatRoughnessTexture: getMaterialTexture(
+      document2,
+      clearcoat?.clearcoatRoughnessTexture,
+      imageResources
+    ),
+    clearcoatNormalTexture: getMaterialTexture(
+      document2,
+      clearcoat?.clearcoatNormalTexture,
+      imageResources
+    ),
+    sheenColor: Object.freeze(
+      Array.isArray(sheen?.sheenColorFactor) ? [...sheen.sheenColorFactor] : [0, 0, 0]
+    ),
+    sheenColorTexture: getMaterialTexture(document2, sheen?.sheenColorTexture, imageResources),
+    sheenRoughness: typeof sheen?.sheenRoughnessFactor === "number" ? sheen.sheenRoughnessFactor : 0,
+    sheenRoughnessTexture: getMaterialTexture(
+      document2,
+      sheen?.sheenRoughnessTexture,
+      imageResources
+    ),
+    iridescence: typeof iridescence?.iridescenceFactor === "number" ? iridescence.iridescenceFactor : 0,
+    iridescenceTexture: getMaterialTexture(
+      document2,
+      iridescence?.iridescenceTexture,
+      imageResources
+    ),
+    iridescenceIor: typeof iridescence?.iridescenceIor === "number" ? iridescence.iridescenceIor : 1.3,
+    iridescenceThicknessMinimum: typeof iridescence?.iridescenceThicknessMinimum === "number" ? iridescence.iridescenceThicknessMinimum : 100,
+    iridescenceThicknessMaximum: typeof iridescence?.iridescenceThicknessMaximum === "number" ? iridescence.iridescenceThicknessMaximum : 400,
+    iridescenceThicknessTexture: getMaterialTexture(
+      document2,
+      iridescence?.iridescenceThicknessTexture,
+      imageResources
+    ),
+    anisotropy: typeof anisotropy?.anisotropyStrength === "number" ? anisotropy.anisotropyStrength : 0,
+    anisotropyRotation: typeof anisotropy?.anisotropyRotation === "number" ? anisotropy.anisotropyRotation : 0,
+    anisotropyTexture: getMaterialTexture(document2, anisotropy?.anisotropyTexture, imageResources),
+    dispersion: typeof dispersion?.dispersion === "number" ? dispersion.dispersion : 0
   });
 }
 function computeBounds(positions) {
@@ -467,7 +804,7 @@ function transformNormal(normal, matrix) {
   const length = Math.hypot(transformed[0], transformed[1], transformed[2]) || 1;
   return [transformed[0] / length, transformed[1] / length, transformed[2] / length];
 }
-function collectScenePrimitives(document2, buffers) {
+function collectScenePrimitives(document2, buffers, imageResources) {
   const scene = document2.scenes?.[document2.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.");
@@ -497,6 +834,7 @@ function collectScenePrimitives(document2, buffers) {
         const positions = readAccessor(document2, primitive.attributes.POSITION, buffers);
         const normals = typeof primitive.attributes.NORMAL === "number" ? readAccessor(document2, primitive.attributes.NORMAL, buffers) : null;
         const colors = typeof primitive.attributes.COLOR_0 === "number" ? readAccessor(document2, primitive.attributes.COLOR_0, buffers) : null;
+        const uvs = typeof primitive.attributes.TEXCOORD_0 === "number" ? readAccessor(document2, primitive.attributes.TEXCOORD_0, buffers) : null;
         const transformedPositions = [];
         const transformedNormals = [];
         for (let index = 0; index < positions.length; index += 3) {
@@ -514,7 +852,7 @@ function collectScenePrimitives(document2, buffers) {
           }
         }
         const indices = typeof primitive.indices === "number" ? readAccessor(document2, primitive.indices, buffers).map((value) => Number(value)) : Array.from({ length: transformedPositions.length / 3 }, (_, index) => index);
-        const material = getMaterialInfo(document2, primitive);
+        const material = getMaterialInfo(document2, primitive, imageResources);
         const primitiveName = `${node.name ?? mesh.name ?? "mesh"}-${primitiveIndex}`;
         results.push(
           Object.freeze({
@@ -522,6 +860,7 @@ function collectScenePrimitives(document2, buffers) {
             positions: Object.freeze(transformedPositions),
             indices: Object.freeze(indices),
             normals: transformedNormals.length > 0 ? Object.freeze(transformedNormals) : null,
+            uvs: uvs ? Object.freeze(uvs) : null,
             colors: colors ? Object.freeze(colors) : null,
             material,
             bounds: computeBounds(transformedPositions)
@@ -577,7 +916,16 @@ async function buildGltfModel(document2, baseUrl2) {
       return nested.arrayBuffer();
     })
   );
-  const scene = collectScenePrimitives(document2, buffers);
+  const imageResources = /* @__PURE__ */ new Map();
+  await Promise.all(
+    (document2.images ?? []).map(async (image, index) => {
+      const pixels = await loadImageResource(document2, image, index, buffers, baseUrl2);
+      if (pixels) {
+        imageResources.set(index, pixels);
+      }
+    })
+  );
+  const scene = collectScenePrimitives(document2, buffers, imageResources);
   const aggregatePositions = [];
   const aggregateIndices = [];
   for (const primitive of scene.primitives) {
@@ -2062,9 +2410,6 @@ __export(product_studio_runtime_exports, {
   createProductStudioMeshes: () => createProductStudioMeshes,
   mountGpuProductStudio: () => mountGpuProductStudio
 });
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
 function isFiniteVector(value) {
   return Array.isArray(value) && value.length >= 3 && Number.isFinite(value[0]) && Number.isFinite(value[1]) && Number.isFinite(value[2]);
 }
@@ -2253,18 +2598,56 @@ function createProductStudioMeshFromPrimitive(primitive, primitiveIndex, transfo
   const indices = Array.isArray(primitive.indices) && primitive.indices.length >= 3 ? [...primitive.indices] : Array.from({ length: positions.length / 3 }, (_, index) => index);
   const material = primitive.material ?? {};
   const color = readMaterialColor(material);
+  const uvs = Array.isArray(primitive.uvs) ? [...primitive.uvs] : null;
   return Object.freeze({
     id: 1e3 + primitiveIndex,
     positions: Object.freeze(positions),
     indices: Object.freeze(indices),
     normals: Array.isArray(primitive.normals) ? Object.freeze([...primitive.normals]) : null,
+    uvs: uvs ? Object.freeze(uvs) : null,
+    material: Object.freeze({ ...material }),
     color: Object.freeze(color),
     emission: Object.freeze(readEmission(material)),
     materialKind: readMaterialKind(material),
     materialRefId: 1e3 + primitiveIndex,
     roughness: Number.isFinite(material.roughness) ? material.roughness : 0.72,
     metallic: Number.isFinite(material.metallic) ? material.metallic : 0,
-    opacity: color[3]
+    opacity: color[3],
+    baseColorTexture: material.baseColorTexture ?? null,
+    metallicRoughnessTexture: material.metallicRoughnessTexture ?? null,
+    normalTexture: material.normalTexture ?? null,
+    occlusionTexture: material.occlusionTexture ?? null,
+    emissiveTexture: material.emissiveTexture ?? null,
+    specular: Number.isFinite(material.specular) ? material.specular : 1,
+    specularColor: Array.isArray(material.specularColor) ? Object.freeze([...material.specularColor]) : void 0,
+    specularTexture: material.specularTexture ?? null,
+    specularColorTexture: material.specularColorTexture ?? null,
+    transmission: Number.isFinite(material.transmission) ? material.transmission : 0,
+    transmissionTexture: material.transmissionTexture ?? null,
+    ior: Number.isFinite(material.ior) ? material.ior : void 0,
+    thickness: Number.isFinite(material.thickness) ? material.thickness : void 0,
+    thicknessTexture: material.thicknessTexture ?? null,
+    attenuationDistance: Number.isFinite(material.attenuationDistance) ? material.attenuationDistance : null,
+    attenuationColor: Array.isArray(material.attenuationColor) ? Object.freeze([...material.attenuationColor]) : void 0,
+    clearcoat: Number.isFinite(material.clearcoat) ? material.clearcoat : void 0,
+    clearcoatTexture: material.clearcoatTexture ?? null,
+    clearcoatRoughness: Number.isFinite(material.clearcoatRoughness) ? material.clearcoatRoughness : void 0,
+    clearcoatRoughnessTexture: material.clearcoatRoughnessTexture ?? null,
+    clearcoatNormalTexture: material.clearcoatNormalTexture ?? null,
+    sheenColor: Array.isArray(material.sheenColor) ? Object.freeze([...material.sheenColor]) : void 0,
+    sheenColorTexture: material.sheenColorTexture ?? null,
+    sheenRoughness: Number.isFinite(material.sheenRoughness) ? material.sheenRoughness : void 0,
+    sheenRoughnessTexture: material.sheenRoughnessTexture ?? null,
+    iridescence: Number.isFinite(material.iridescence) ? material.iridescence : void 0,
+    iridescenceTexture: material.iridescenceTexture ?? null,
+    iridescenceIor: Number.isFinite(material.iridescenceIor) ? material.iridescenceIor : void 0,
+    iridescenceThicknessMinimum: Number.isFinite(material.iridescenceThicknessMinimum) ? material.iridescenceThicknessMinimum : void 0,
+    iridescenceThicknessMaximum: Number.isFinite(material.iridescenceThicknessMaximum) ? material.iridescenceThicknessMaximum : void 0,
+    iridescenceThicknessTexture: material.iridescenceThicknessTexture ?? null,
+    anisotropy: Number.isFinite(material.anisotropy) ? material.anisotropy : void 0,
+    anisotropyRotation: Number.isFinite(material.anisotropyRotation) ? material.anisotropyRotation : void 0,
+    anisotropyTexture: material.anisotropyTexture ?? null,
+    dispersion: Number.isFinite(material.dispersion) ? material.dispersion : void 0
   });
 }
 function createProductStudioMeshes(model, options = {}) {
@@ -2322,16 +2705,10 @@ function resolveRoot(options) {
   }
   return root;
 }
-function resolveRenderSize(root, options) {
-  const rect = root.getBoundingClientRect?.() ?? { width: 1280, height: 720 };
-  const devicePixelRatio = Number.isFinite(options.devicePixelRatio) ? options.devicePixelRatio : Number.isFinite(globalThis.window?.devicePixelRatio) ? globalThis.window.devicePixelRatio : 1;
-  const cssWidth = Number.isFinite(rect.width) && rect.width > 0 ? rect.width : 1280;
-  const cssHeight = Number.isFinite(rect.height) && rect.height > 0 ? rect.height : cssWidth * (9 / 16);
-  const width = Number.isFinite(options.width) ? Math.trunc(options.width) : clamp(Math.round(cssWidth * devicePixelRatio), 640, 1920);
-  const height = Number.isFinite(options.height) ? Math.trunc(options.height) : clamp(Math.round(cssHeight * devicePixelRatio), 360, 1080);
+function resolveRenderSize(options) {
   return {
-    width,
-    height
+    width: Number.isFinite(options.width) ? Math.trunc(options.width) : DEFAULT_RENDER_WIDTH,
+    height: Number.isFinite(options.height) ? Math.trunc(options.height) : DEFAULT_RENDER_HEIGHT
   };
 }
 function installSnapshotHook(state) {
@@ -2402,13 +2779,13 @@ async function mountGpuProductStudio(options = {}, featureFlags = null) {
   if (typeof rendererModule.createWavefrontPathTracingComputeRenderer !== "function") {
     throw new Error("Product Studio renderer loader must provide createWavefrontPathTracingComputeRenderer.");
   }
-  const size = resolveRenderSize(root, options);
+  const size = resolveRenderSize(options);
   const lightingOptions = await resolveWavefrontLightingOptions(options);
   const renderer = await rendererModule.createWavefrontPathTracingComputeRenderer({
     canvas,
     width: size.width,
     height: size.height,
-    maxDepth: Number.isFinite(options.maxDepth) ? options.maxDepth : 6,
+    maxDepth: Number.isFinite(options.maxDepth) ? options.maxDepth : DEFAULT_RENDER_MAX_DEPTH,
     tileSize: Number.isFinite(options.tileSize) ? options.tileSize : 128,
     samplesPerPixel: Number.isFinite(options.samplesPerPixel) ? options.samplesPerPixel : 8,
     denoise: options.denoise !== false,
@@ -2450,7 +2827,7 @@ async function mountGpuProductStudio(options = {}, featureFlags = null) {
     }
   });
 }
-var STYLE_ID, DEFAULT_PRODUCT_ASSET_URL, DEFAULT_TARGET_CENTER, DEFAULT_TARGET_SIZE;
+var STYLE_ID, DEFAULT_PRODUCT_ASSET_URL, DEFAULT_TARGET_CENTER, DEFAULT_TARGET_SIZE, DEFAULT_RENDER_WIDTH, DEFAULT_RENDER_HEIGHT, DEFAULT_RENDER_MAX_DEPTH;
 var init_product_studio_runtime = __esm({
   "src/product-studio-runtime.js"() {
     init_gltf_loader();
@@ -2458,6 +2835,9 @@ var init_product_studio_runtime = __esm({
     DEFAULT_PRODUCT_ASSET_URL = "/data/models/eames-lounge-chair-ottoman/Eames_Lounge_Chair_Ottoman.gltf";
     DEFAULT_TARGET_CENTER = Object.freeze([0, 0.74, 0]);
     DEFAULT_TARGET_SIZE = 2.25;
+    DEFAULT_RENDER_WIDTH = 640;
+    DEFAULT_RENDER_HEIGHT = 360;
+    DEFAULT_RENDER_MAX_DEPTH = 2;
   }
 });
 
@@ -2578,17 +2958,17 @@ function createFallbackPerformanceFeatureModule() {
       let pressureLevel = "stable";
       let frameSamples = 0;
       let averageMs = 16.67;
-      const clamp3 = (next = 16.67) => Number.isFinite(next) ? Math.max(1, next) : 16.67;
+      const clamp2 = (next = 16.67) => Number.isFinite(next) ? Math.max(1, next) : 16.67;
       const target = Object.freeze({
         targetFrameTimeMs: 16.67,
-        downgradeFrameTimeMs: clamp3(adaptation?.degradeThresholdMs ?? 20),
-        upgradeFrameTimeMs: clamp3(adaptation?.upgradeThresholdMs ?? 14)
+        downgradeFrameTimeMs: clamp2(adaptation?.degradeThresholdMs ?? 20),
+        upgradeFrameTimeMs: clamp2(adaptation?.upgradeThresholdMs ?? 14)
       });
       return {
         recordFrame({ frameTimeMs = averageMs } = {}) {
           const sample = Number.isFinite(Number(frameTimeMs)) ? Number(frameTimeMs) : averageMs;
           frameSamples += 1;
-          averageMs = clamp3((averageMs * (frameSamples - 1) + sample) / frameSamples);
+          averageMs = clamp2((averageMs * (frameSamples - 1) + sample) / frameSamples);
           const fps = 1e3 / averageMs;
           pressureLevel = sample > target.downgradeFrameTimeMs ? "degrade" : pressureLevel === "degrade" && sample <= target.upgradeFrameTimeMs ? "stable" : pressureLevel;
           return {
@@ -3269,14 +3649,14 @@ function injectStyles() {
   `;
   document.head.appendChild(style);
 }
-function clamp2(value, min, max) {
+function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
 function mix(a, b, t) {
   return a + (b - a) * t;
 }
 function smoothstep(min, max, value) {
-  const t = clamp2((value - min) / Math.max(1e-4, max - min), 0, 1);
+  const t = clamp((value - min) / Math.max(1e-4, max - min), 0, 1);
   return t * t * (3 - 2 * t);
 }
 function pseudoRandom(seed) {
@@ -3360,10 +3740,10 @@ function projectPoint(point, camera, viewport) {
   };
 }
 function colorToRgba(color, alpha = 1) {
-  const r = Math.round(clamp2(color.r, 0, 1) * 255);
-  const g = Math.round(clamp2(color.g, 0, 1) * 255);
-  const b = Math.round(clamp2(color.b, 0, 1) * 255);
-  return `rgba(${r}, ${g}, ${b}, ${clamp2(alpha, 0, 1)})`;
+  const r = Math.round(clamp(color.r, 0, 1) * 255);
+  const g = Math.round(clamp(color.g, 0, 1) * 255);
+  const b = Math.round(clamp(color.b, 0, 1) * 255);
+  return `rgba(${r}, ${g}, ${b}, ${clamp(alpha, 0, 1)})`;
 }
 function mixColor(a, b, t) {
   return {
@@ -3437,12 +3817,12 @@ function projectShadowPoint(point, lightDir, planeY) {
   return addVec3(point, scaleVec3(shadowDir, distance));
 }
 function shadeColor(base, normal, lightDir, heightBias = 0, accent = 0) {
-  const diffuse = clamp2(dotVec3(normalizeVec3(normal), lightDir), 0, 1);
+  const diffuse = clamp(dotVec3(normalizeVec3(normal), lightDir), 0, 1);
   const brightness = 0.24 + diffuse * 0.72 + heightBias * 0.08 + accent;
   return {
-    r: clamp2(base.r * brightness, 0, 1),
-    g: clamp2(base.g * brightness, 0, 1),
-    b: clamp2(base.b * (brightness + 0.03), 0, 1)
+    r: clamp(base.r * brightness, 0, 1),
+    g: clamp(base.g * brightness, 0, 1),
+    b: clamp(base.b * (brightness + 0.03), 0, 1)
   };
 }
 function getMaterialSeed(materialName) {
@@ -3480,13 +3860,13 @@ function applyMaterialDetail(color, material, worldCenter, normal, surfaceType)
   const sample = worldCenter.x * 3.17 + worldCenter.y * 5.29 + worldCenter.z * 7.83 + getMaterialSeed(materialName) * 0.013;
   const grain = (pseudoRandom(sample) - 0.5) * detailStrength;
   const lowerSurface = smoothstep(7.5, -0.8, worldCenter.y);
-  const verticalSurface = 1 - clamp2(Math.abs(normal.y), 0, 1);
+  const verticalSurface = 1 - clamp(Math.abs(normal.y), 0, 1);
   const materialLowerWear = /stone|concrete|plaster|paint|wood|timber|plank|crate/.test(materialName.toLowerCase()) ? lowerSurface * verticalSurface * 0.055 : 0;
   const wetlineWear = surfaceType === "ship" && worldCenter.y < 0.72 ? smoothstep(0.72, -0.1, worldCenter.y) * 0.05 : 0;
   return {
-    r: clamp2(color.r * (1 + grain) - materialLowerWear - wetlineWear, 0, 1),
-    g: clamp2(color.g * (1 + grain * 0.82) - materialLowerWear * 0.9 - wetlineWear, 0, 1),
-    b: clamp2(color.b * (1 + grain * 0.62) - materialLowerWear * 0.68 - wetlineWear * 0.75, 0, 1)
+    r: clamp(color.r * (1 + grain) - materialLowerWear - wetlineWear, 0, 1),
+    g: clamp(color.g * (1 + grain * 0.82) - materialLowerWear * 0.9 - wetlineWear, 0, 1),
+    b: clamp(color.b * (1 + grain * 0.62) - materialLowerWear * 0.68 - wetlineWear * 0.75, 0, 1)
   };
 }
 function buildCamera(state, canvas) {
@@ -3912,7 +4292,7 @@ function resizeCanvasToDisplaySize(canvas, state) {
   const deviceScale = readPositiveNumber(globalThis.devicePixelRatio, 1);
   const requestedScale = readPositiveNumber(state.renderScale, deviceScale);
   const maxScale = state.captureMode ? 2 : 1.5;
-  let scale = clamp2(requestedScale, 1, maxScale);
+  let scale = clamp(requestedScale, 1, maxScale);
   const pixelBudget = state.captureMode ? CAPTURE_CANVAS_PIXEL_BUDGET : DEFAULT_CANVAS_WIDTH * DEFAULT_CANVAS_HEIGHT * 1.5;
   const projectedPixels = width * height * scale * scale;
   if (projectedPixels > pixelBudget) {
@@ -4097,12 +4477,12 @@ function satisfyClothConstraint(clothState, constraint) {
   }
 }
 function advanceShowcaseClothSimulationState(clothState, options = {}) {
-  const dt = clamp2(options.dt ?? 1 / 60, 1 / 240, 1 / 18);
+  const dt = clamp(options.dt ?? 1 / 60, 1 / 240, 1 / 18);
   const time = readVisualNumber(options.time, 0);
   const flagMotion = readVisualNumber(options.flagMotion, 0.92);
   const waveInfluence = readVisualNumber(options.waveInfluence, 0);
   const wrinkleLayers = Math.max(1, clothState.representation.mesh?.wrinkleLayers ?? 2);
-  const solverIterations = clamp2(
+  const solverIterations = clamp(
     Math.round(clothState.representation.mesh?.solverIterations ?? 6),
     2,
     10
@@ -4345,7 +4725,7 @@ function buildWaterMotionEffects(state) {
         impulse.z
       ),
       radius,
-      opacity: clamp2(impulse.life * 0.28, 0.08, 0.3)
+      opacity: clamp(impulse.life * 0.28, 0.08, 0.3)
     });
   });
   for (const ship of state.ships) {
@@ -4377,7 +4757,7 @@ function buildWaterMotionEffects(state) {
     }
     wakeTrails.push(
       Object.freeze({
-        opacity: clamp2(0.18 + speed * 0.09, 0.22, 0.46),
+        opacity: clamp(0.18 + speed * 0.09, 0.22, 0.46),
         points: Object.freeze(points)
       })
     );
@@ -4591,7 +4971,7 @@ function drawSkyAndShore(ctx, canvas, state, nearLighting, reflectionStrength, s
     const y = pseudoRandom(index * 7 + 5) * canvas.height * 0.42;
     const twinkle = 0.45 + Math.sin(state.time * 1.4 + index * 0.73) * 0.25;
     const radius = 0.6 + pseudoRandom(index * 11 + 2) * 1.9;
-    ctx.fillStyle = visuals.starColor.replace(/[\d.]+\)$/u, `${clamp2(twinkle, 0.16, 0.92)})`);
+    ctx.fillStyle = visuals.starColor.replace(/[\d.]+\)$/u, `${clamp(twinkle, 0.16, 0.92)})`);
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, Math.PI * 2);
     ctx.fill();
@@ -4643,7 +5023,7 @@ function drawSkyAndShore(ctx, canvas, state, nearLighting, reflectionStrength, s
   if (state.collisionFlash > 0.01) {
     ctx.fillStyle = visuals.collisionFlash.replace(
       /[\d.]+\)$/u,
-      `${clamp2(state.collisionFlash * 0.22, 0, 0.26)})`
+      `${clamp(state.collisionFlash * 0.22, 0, 0.26)})`
     );
     ctx.fillRect(0, 0, canvas.width, canvas.height);
   }
@@ -4662,7 +5042,7 @@ function resolveLocalLightContribution(triangle, lightSources) {
       continue;
     }
     const lightDir = normalizeVec3(delta);
-    const facing = clamp2(dotVec3(normal, lightDir), 0, 1);
+    const facing = clamp(dotVec3(normal, lightDir), 0, 1);
     const response = attenuation * (0.18 + facing * 0.82);
     const glowColor = source.glowColor ?? source.coreColor ?? { r: 1, g: 0.72, b: 0.4 };
     contribution.r += glowColor.r * response * 0.32;
@@ -4684,31 +5064,31 @@ function drawTriangles(ctx, triangles, lightDir, reflectionStrength, camera, sha
       triangle.baseColor,
       surfaceNormal,
       lightDir,
-      clamp2((triangle.worldCenter.y + 3) / 10, 0, 1),
+      clamp((triangle.worldCenter.y + 3) / 10, 0, 1),
       triangle.accent
     );
     const reflection = reflectionStrength * (triangle.reflection ?? 0);
     const viewDir = normalizeVec3(subVec3(camera.eye, triangle.worldCenter));
     const reflectedLight = reflectVec3(scaleVec3(lightDir, -1), surfaceNormal);
-    const gloss = mix(0.78, 0.14, clamp2(material.roughness ?? 0.88, 0, 1)) + (material.metallic ?? 0) * 0.18;
-    const specularPower = mix(26, 7, clamp2(material.roughness ?? 0.88, 0, 1));
-    const specular = Math.pow(clamp2(dotVec3(reflectedLight, viewDir), 0, 1), specularPower) * gloss;
+    const gloss = mix(0.78, 0.14, clamp(material.roughness ?? 0.88, 0, 1)) + (material.metallic ?? 0) * 0.18;
+    const specularPower = mix(26, 7, clamp(material.roughness ?? 0.88, 0, 1));
+    const specular = Math.pow(clamp(dotVec3(reflectedLight, viewDir), 0, 1), specularPower) * gloss;
     const emissive = material.emissive ?? { r: 0, g: 0, b: 0 };
     const localLight = resolveLocalLightContribution(triangle, localLights);
     const occlusion = triangle.surfaceType === "water" ? shadowStrength * 0.018 : shadowStrength * 0.04;
     const detailed = applyMaterialDetail(
       {
-        r: clamp2(
+        r: clamp(
           shaded.r + reflection * 0.08 + specular * 0.16 + emissive.r * 0.42 + localLight.r - occlusion,
           0,
           1
         ),
-        g: clamp2(
+        g: clamp(
           shaded.g + reflection * 0.08 + specular * 0.16 + emissive.g * 0.42 + localLight.g - occlusion,
           0,
           1
         ),
-        b: clamp2(
+        b: clamp(
           shaded.b + reflection * 0.16 + specular * 0.22 + emissive.b * 0.46 + localLight.b - occlusion * 0.5,
           0,
           1
@@ -4740,7 +5120,7 @@ function renderProjectedShadow(ctx, worldPoints, camera, viewport, lightDir, opt
   }
   ctx.save();
   ctx.globalCompositeOperation = "multiply";
-  ctx.fillStyle = options.color ?? `rgba(12, 24, 36, ${clamp2(options.alpha ?? 0.16, 0, 0.5)})`;
+  ctx.fillStyle = options.color ?? `rgba(12, 24, 36, ${clamp(options.alpha ?? 0.16, 0, 0.5)})`;
   ctx.shadowColor = options.color ?? "rgba(12, 24, 36, 0.22)";
   ctx.shadowBlur = options.blur ?? 18;
   ctx.beginPath();
@@ -4977,7 +5357,7 @@ function resolveShipRoute(ship, state, radius) {
   const crossCurrent = Math.cos(state.time * 0.31 + readVisualNumber(ship.wanderPhase, 0));
   const laneCenter = ship.id === "northwind" ? 10.2 + wander * 2.1 + crossCurrent * 0.6 : 7 + wander * 3.3 - crossCurrent * 1.1;
   const targetX = ship.routeDirection > 0 ? HARBOR_BOUNDS.maxX - radius * 1.7 : HARBOR_BOUNDS.minX + radius * 1.7;
-  return vec3(targetX, 0, clamp2(laneCenter, HARBOR_BOUNDS.minZ + 1.8, HARBOR_BOUNDS.maxZ - 1.8));
+  return vec3(targetX, 0, clamp(laneCenter, HARBOR_BOUNDS.minZ + 1.8, HARBOR_BOUNDS.maxZ - 1.8));
 }
 function updateShipMotion(state, ship, dt, shipModel) {
   const physics = shipModel.physics;
@@ -5090,7 +5470,7 @@ function resolveShipCollision(state, a, b, shipModelA, shipModelB) {
     a.velocity = subVec3(a.velocity, scaleVec3(impulse, invMassA));
     b.velocity = addVec3(b.velocity, scaleVec3(impulse, invMassB));
     const tangentSpeed = dotVec3(relativeVelocity, tangent);
-    const frictionMagnitude = clamp2(
+    const frictionMagnitude = clamp(
       -tangentSpeed / Math.max(1e-4, invMassSum),
       -impulseMagnitude * 0.16,
       impulseMagnitude * 0.16
@@ -5111,14 +5491,14 @@ function resolveShipCollision(state, a, b, shipModelA, shipModelB) {
       state.waveImpulses.push({
         x: contactPoint.x,
         z: contactPoint.z,
-        strength: clamp2(0.24 + impactSpeed * 0.46 + penetration * 0.9, 0.2, 1.7),
+        strength: clamp(0.24 + impactSpeed * 0.46 + penetration * 0.9, 0.2, 1.7),
         radius: 0.9 + penetration * 1.4,
         life: 1
       });
       state.collisionCount += 1;
       state.collisionFlash = Math.max(
         state.collisionFlash,
-        clamp2(impactSpeed * 0.55 + penetration * 1.8, 0.16, 1)
+        clamp(impactSpeed * 0.55 + penetration * 1.8, 0.16, 1)
       );
       a.collisionCooldown = 0.2;
       b.collisionCooldown = 0.2;
@@ -5234,8 +5614,8 @@ function renderSprays(ctx, sprays, camera, viewport) {
     if (!projected) {
       continue;
     }
-    const radius = clamp2(1 / projected.depth * 260, 1.5, 7.5);
-    ctx.fillStyle = `rgba(225, 243, 250, ${clamp2(spray.life / 1.6, 0, 0.9)})`;
+    const radius = clamp(1 / projected.depth * 260, 1.5, 7.5);
+    ctx.fillStyle = `rgba(225, 243, 250, ${clamp(spray.life / 1.6, 0, 0.9)})`;
     ctx.beginPath();
     ctx.arc(projected.x, projected.y, radius, 0, Math.PI * 2);
     ctx.fill();
@@ -5345,7 +5725,7 @@ function renderDirectLightGlow(ctx, source, camera, viewport) {
   if (!projected) {
     return;
   }
-  const radius = clamp2(1 / projected.depth * 420 * source.glowScale, 4, 34);
+  const radius = clamp(1 / projected.depth * 420 * source.glowScale, 4, 34);
   const halo = ctx.createRadialGradient(projected.x, projected.y, radius * 0.12, projected.x, projected.y, radius);
   halo.addColorStop(0, colorToRgba(source.coreColor, 0.98));
   halo.addColorStop(0.5, colorToRgba(source.glowColor, 0.42));
@@ -5367,7 +5747,7 @@ function renderWaterLightReflection(ctx, source, state, camera, viewport) {
   if (!projected) {
     return;
   }
-  const radius = clamp2(1 / projected.depth * 420 * source.glowScale, 4, 34);
+  const radius = clamp(1 / projected.depth * 420 * source.glowScale, 4, 34);
   const waterline = sampleWave(state, source.point.x, source.point.z, state.time) * 0.22;
   const reflectedPoint = vec3(
     source.point.x,
@@ -5456,14 +5836,14 @@ function renderLighthouseBeam(ctx, state, camera, viewport, visuals) {
     2,
     projectedSource.x,
     projectedSource.y,
-    clamp2(beamLength * 0.22, 18, 80)
+    clamp(beamLength * 0.22, 18, 80)
   );
   core.addColorStop(0, colorToRgba(visuals.torchCore, 0.58));
   core.addColorStop(0.5, colorToRgba(visuals.torchGlow, 0.18));
   core.addColorStop(1, colorToRgba(visuals.torchGlow, 0));
   ctx.fillStyle = core;
   ctx.beginPath();
-  ctx.arc(projectedSource.x, projectedSource.y, clamp2(beamLength * 0.18, 14, 64), 0, Math.PI * 2);
+  ctx.arc(projectedSource.x, projectedSource.y, clamp(beamLength * 0.18, 14, 64), 0, Math.PI * 2);
   ctx.fill();
   ctx.restore();
 }
@@ -5513,7 +5893,7 @@ function renderWaterMotionEffects(ctx, effects, camera, viewport) {
     }
     const averageDepth = projected.reduce((total, entry) => total + entry.projected.depth, 0) / projected.length;
     const averageWidth = projected.reduce((total, entry) => total + entry.width, 0) / projected.length;
-    const baseWidth = clamp2(averageWidth / Math.max(0.25, averageDepth) * 180, 1.6, 5.4);
+    const baseWidth = clamp(averageWidth / Math.max(0.25, averageDepth) * 180, 1.6, 5.4);
     ctx.strokeStyle = `rgba(146, 194, 236, ${wake.opacity * 0.52})`;
     ctx.lineWidth = baseWidth * 1.9;
     ctx.lineCap = "round";
@@ -5559,7 +5939,7 @@ function renderWaterMotionEffects(ctx, effects, camera, viewport) {
     const radiusX = Math.hypot(xAxis.x - center.x, xAxis.y - center.y);
     const radiusY = Math.hypot(zAxis.x - center.x, zAxis.y - center.y);
     ctx.strokeStyle = `rgba(216, 235, 255, ${ring.opacity})`;
-    ctx.lineWidth = clamp2((radiusX + radiusY) * 0.02, 1, 3.1);
+    ctx.lineWidth = clamp((radiusX + radiusY) * 0.02, 1, 3.1);
     ctx.beginPath();
     ctx.ellipse(center.x, center.y, radiusX, radiusY, 0, 0, Math.PI * 2);
     ctx.stroke();