@plasius/gpu-renderer 0.2.46 → 0.2.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasius/gpu-renderer",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "description": "Framework-agnostic WebGPU renderer runtime for Plasius projects.",
   "type": "module",
   "sideEffects": false,
@@ -53,6 +53,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@plasius/gpu-camera": "^0.1.18",
+    "@plasius/gpu-model-core": "^0.4.4",
     "@plasius/gpu-shared": "^1.1.1",
     "@plasius/gpu-xr": "^0.1.17",
     "@types/webxr": "^0.5.24"
@@ -88,7 +89,7 @@
     }
   ],
   "overrides": {
-    "brace-expansion": "5.0.9",
+    "brace-expansion": "5.0.12",
     "esbuild": "^0.28.1",
     "minimatch": "^10.2.1"
   },

package/src/canonical-wavefront-meshes.js

@@ -0,0 +1,226 @@
+const STANDARD_TEXTURE_BINDINGS = Object.freeze([
+  ["baseColor", "baseColorTexture"],
+  ["metallicRoughness", "metallicRoughnessTexture"],
+  ["normal", "normalTexture"],
+  ["occlusion", "occlusionTexture"],
+  ["emissive", "emissiveTexture"],
+]);
+
+const EXTENSION_TEXTURE_BINDINGS = Object.freeze([
+  ["clearcoat", "clearcoat", "clearcoatTexture"],
+  ["clearcoatRoughness", "clearcoat", "clearcoatRoughnessTexture"],
+  ["clearcoatNormal", "clearcoat", "clearcoatNormalTexture"],
+  ["transmission", "transmission", "transmissionTexture"],
+  ["sheenColor", "sheen", "sheenColorTexture"],
+  ["sheenRoughness", "sheen", "sheenRoughnessTexture"],
+]);
+
+function requireArray(value, label) {
+  if (!Array.isArray(value)) {
+    throw new TypeError(`${label} must be an array.`);
+  }
+  return value;
+}
+
+function requireMap(value, label) {
+  if (!value || typeof value !== "object" || typeof value.get !== "function") {
+    throw new TypeError(`${label} must provide a ReadonlyMap-compatible get method.`);
+  }
+  return value;
+}
+
+function textureSample(binding, textures, label, extra = {}) {
+  if (binding === undefined || binding === null) {
+    return undefined;
+  }
+
+  const sample = textures.get(binding.textureId);
+  if (!sample) {
+    throw new Error(`Missing decoded texture sample ${binding.textureId} for ${label}.`);
+  }
+  const width = Number(sample.width);
+  const height = Number(sample.height);
+  const data = sample.data;
+  const dataLength = data && typeof data.length === "number" ? data.length : -1;
+  if (!Number.isInteger(width) || !Number.isInteger(height) || width < 1 || height < 1) {
+    throw new TypeError(`Decoded texture sample ${binding.textureId} has invalid dimensions.`);
+  }
+  if (width > 4_096 || height > 4_096 || width * height > 4_096 * 4_096) {
+    throw new RangeError(`Decoded texture sample ${binding.textureId} exceeds the 4096-pixel resource limit.`);
+  }
+  if (!(Array.isArray(data) || ArrayBuffer.isView(data)) || dataLength < width * height * 4) {
+    throw new TypeError(`Decoded texture sample ${binding.textureId} must contain width × height × 4 RGBA values.`);
+  }
+
+  return Object.freeze({
+    ...sample,
+    ...(binding.texCoordSet === undefined ? {} : { texCoord: binding.texCoordSet }),
+    ...extra,
+  });
+}
+
+function cloneMaterialExtensions(material, textures) {
+  const extensions = { ...(material.extensions ?? {}) };
+  if (material.workflow === "unlit") {
+    const unlitKey = "KHR_materials_unlit";
+    const unlitValue = extensions[unlitKey] ?? extensions.unlit ?? {};
+    if (typeof unlitValue !== "object" || unlitValue === null || Array.isArray(unlitValue)) {
+      throw new TypeError(`Canonical material extension ${unlitKey} must be an object.`);
+    }
+    extensions[unlitKey] = { ...unlitValue, enabled: true };
+  }
+  for (const [bindingName, extensionName, textureKey] of EXTENSION_TEXTURE_BINDINGS) {
+    const binding = material.textures?.[bindingName];
+    if (!binding) {
+      continue;
+    }
+
+    const extensionKey = `KHR_materials_${extensionName}`;
+    const extensionValue = extensions[extensionKey] ?? extensions[extensionName] ?? {};
+    if (typeof extensionValue !== "object" || extensionValue === null || Array.isArray(extensionValue)) {
+      throw new TypeError(`Canonical material extension ${extensionKey} must be an object.`);
+    }
+    extensions[extensionKey] = {
+      ...extensionValue,
+      [textureKey]: textureSample(binding, textures, `${extensionKey}.${textureKey}`),
+    };
+  }
+  return extensions;
+}
+
+function mapMaterial(material, materialRefId, textures) {
+  if (!material) {
+    return { materialRefId };
+  }
+  if (material.alphaMode === "mask") {
+    throw new Error("Canonical alphaMode mask is unsupported by WavefrontMeshInput.");
+  }
+  if (material.workflow !== "metallic-roughness" && material.workflow !== "unlit") {
+    throw new Error(`Unsupported canonical material workflow: ${material.workflow}.`);
+  }
+
+  const mapped = {
+    materialRefId,
+    ...(material.alphaMode === "blend" ? { materialKind: "transparent" } : {}),
+    baseColor: material.baseColorFactor,
+    emission: material.emissiveFactor
+      ? [...material.emissiveFactor, 1]
+      : [0, 0, 0, 1],
+    roughness: material.roughnessFactor,
+    metallic: material.metallicFactor,
+    opacity: material.alphaMode === "opaque" ? 1 : material.baseColorFactor?.[3],
+    clearcoat: material.clearcoatFactor,
+    clearcoatRoughness: material.clearcoatRoughnessFactor,
+    transmission: material.transmissionFactor,
+    sheenColor: material.sheenColorFactor,
+    extensions: cloneMaterialExtensions(material, textures),
+  };
+
+  for (const [bindingName, inputName] of STANDARD_TEXTURE_BINDINGS) {
+    const binding = material.textures?.[bindingName];
+    if (!binding) {
+      continue;
+    }
+    const extra = bindingName === "normal" && material.normalScale !== undefined
+      ? { scale: material.normalScale }
+      : bindingName === "occlusion" && material.occlusionStrength !== undefined
+        ? { strength: material.occlusionStrength }
+        : {};
+    mapped[inputName] = textureSample(binding, textures, inputName, extra);
+  }
+
+  return mapped;
+}
+
+/**
+ * Maps decoded canonical mesh primitives into the renderer's existing Wavefront
+ * input contract. Geometry and image decoding remain upstream responsibilities.
+ */
+export function createCanonicalWavefrontMeshInputs({ document, geometry, textures = new Map() } = {}) {
+  if (!document || typeof document !== "object") {
+    throw new TypeError("Canonical model document is required.");
+  }
+  const meshes = requireArray(document.meshes, "Canonical model meshes");
+  const materials = requireArray(document.materials, "Canonical model materials");
+  const geometryInputs = requireArray(geometry, "Renderer-ready geometry");
+  const textureSamples = requireMap(textures, "Decoded texture samples");
+
+  const geometryByPrimitiveId = new Map();
+  for (const entry of geometryInputs) {
+    if (!entry || typeof entry.primitiveId !== "string" || entry.primitiveId.length === 0) {
+      throw new TypeError("Renderer-ready geometry requires a non-empty primitiveId.");
+    }
+    if (geometryByPrimitiveId.has(entry.primitiveId)) {
+      throw new Error(`Duplicate renderer-ready geometry for primitive ${entry.primitiveId}.`);
+    }
+    geometryByPrimitiveId.set(entry.primitiveId, entry);
+  }
+
+  const materialsById = new Map();
+  const materialRefIds = new Map();
+  materials.forEach((material, index) => {
+    if (!material || typeof material.id !== "string" || material.id.length === 0) {
+      throw new TypeError("Canonical materials require a non-empty id.");
+    }
+    if (materialsById.has(material.id)) {
+      throw new Error(`Duplicate canonical material ${material.id}.`);
+    }
+    materialsById.set(material.id, material);
+    materialRefIds.set(material.id, index + 1);
+  });
+
+  const output = [];
+  const consumedPrimitiveIds = new Set();
+  const canonicalPrimitiveIds = new Set();
+  for (const mesh of meshes) {
+    if (!mesh || typeof mesh.id !== "string") {
+      throw new TypeError("Canonical meshes require a string id.");
+    }
+    for (const primitive of requireArray(mesh.primitives, `Primitives for mesh ${mesh.id}`)) {
+      if (!primitive || typeof primitive.id !== "string" || primitive.id.length === 0) {
+        throw new TypeError(`Canonical mesh ${mesh.id} contains a primitive without an id.`);
+      }
+      if (canonicalPrimitiveIds.has(primitive.id)) {
+        throw new Error(`Duplicate canonical primitive ${primitive.id}.`);
+      }
+      canonicalPrimitiveIds.add(primitive.id);
+      if (primitive.topology !== "triangles") {
+        throw new Error(`Unsupported canonical primitive topology: ${primitive.topology}.`);
+      }
+      const source = geometryByPrimitiveId.get(primitive.id);
+      if (!source) {
+        throw new Error(`Missing renderer-ready geometry for primitive ${primitive.id}.`);
+      }
+      consumedPrimitiveIds.add(primitive.id);
+
+      let material = null;
+      let materialRefId = 0;
+      if (primitive.materialId !== undefined) {
+        material = materialsById.get(primitive.materialId);
+        if (!material) {
+          throw new Error(`Missing canonical material ${primitive.materialId} for primitive ${primitive.id}.`);
+        }
+        materialRefId = materialRefIds.get(primitive.materialId);
+      }
+
+      output.push(Object.freeze({
+        id: output.length + 1,
+        positions: source.positions,
+        ...(source.indices === undefined ? {} : { indices: source.indices }),
+        ...(source.normals === undefined ? {} : { normals: source.normals }),
+        ...((source.texcoords ?? source.uvs) === undefined
+          ? {}
+          : { uvs: source.texcoords ?? source.uvs }),
+        ...mapMaterial(material, materialRefId, textureSamples),
+      }));
+    }
+  }
+
+  for (const primitiveId of geometryByPrimitiveId.keys()) {
+    if (!consumedPrimitiveIds.has(primitiveId)) {
+      throw new Error(`Renderer-ready geometry references unknown primitive ${primitiveId}.`);
+    }
+  }
+
+  return Object.freeze(output);
+}

package/src/index.d.ts

@@ -13,6 +13,7 @@ import type {
   FeedbackGameDiagnosticViewportBucket,
 } from "@plasius/gpu-shared/feedback-diagnostics";
 import type { XrStoreState } from "@plasius/gpu-xr";
+import type { GpuModelDocument } from "@plasius/gpu-model-core";
 
 export interface CreateFeedbackGameDiagnosticSnapshotInput {
   readonly featureEnabled: boolean;
@@ -332,6 +333,30 @@ export interface WavefrontTextureSampleInput {
   readonly data: Uint8ClampedArray | Uint8Array | readonly number[];
 }
 
+export interface CanonicalRendererGeometryInput {
+  /** Canonical primitive id whose geometry has already been decoded and validated. */
+  readonly primitiveId: string;
+  readonly positions: readonly number[] | Float32Array;
+  readonly indices?: readonly number[] | Uint16Array | Uint32Array;
+  readonly normals?: readonly number[] | Float32Array | null;
+  readonly texcoords?: readonly number[] | Float32Array | null;
+  readonly uvs?: readonly number[] | Float32Array | null;
+}
+
+export interface CreateCanonicalWavefrontMeshInputsOptions {
+  /** Canonical model metadata. Parsing, resource resolution, and image decoding are upstream responsibilities. */
+  readonly document: Pick<GpuModelDocument, "meshes" | "materials">;
+  /** Renderer-ready, decoded geometry indexed by canonical primitive id. */
+  readonly geometry: readonly CanonicalRendererGeometryInput[];
+  /** Decoded image samples indexed by canonical texture id. */
+  readonly textures?: ReadonlyMap<string, WavefrontTextureSampleInput>;
+}
+
+/** Maps canonical primitives and materials to the renderer's existing Wavefront input shape. */
+export function createCanonicalWavefrontMeshInputs(
+  options: CreateCanonicalWavefrontMeshInputsOptions,
+): readonly WavefrontMeshInput[];
+
 export interface WavefrontMediumInput {
   readonly id?: number;
   readonly mediumId?: number;
@@ -1582,9 +1607,34 @@ export interface RendererSnapshot {
   xrActive: boolean;
 }
 
+/** Decoded RGBA8 image, matching gpu-shared glTF material textures. */
+export interface NativeSurfaceImage {
+  width: number;
+  height: number;
+  data: Uint8Array | Uint8ClampedArray;
+}
+export interface NativeSurfaceMaterial {
+  /** sRGB colour; RGB is multiplied by each vertex's linear base-colour factor. */
+  baseColor?: NativeSurfaceImage;
+  /** Linear, OpenGL-style tangent-space normal map. */
+  normal?: NativeSurfaceImage;
+  /** Linear R occlusion, G roughness, B metalness. */
+  orm?: NativeSurfaceImage;
+  normalScale?: number;
+  /** Independent dielectric coating strength, 0–1; defaults to 0 (off). */
+  clearcoat?: number;
+  /** Coating roughness, 0–1; independent of the base map; defaults to 0. */
+  clearcoatRoughness?: number;
+  /** Linear RGBA8: R multiplies clearcoat, G multiplies clearcoatRoughness; B/A ignored. White when omitted. */
+  clearcoatMap?: NativeSurfaceImage;
+}
 /** Interleaved world-space triangles: position, normal, linear colour, roughness/metalness/detail. */
 export interface NativeSceneFrame {
   vertices: Float32Array;
+  /** Two UV components per vertex. Required when surfaces are supplied. */
+  texcoords?: Float32Array;
+  /** Contiguous triangle ranges covering all vertices, using zero-based materials. */
+  surfaces?: { firstVertex: number; vertexCount: number; materialIndex: number }[];
   camera: { eye: [number, number, number]; target: [number, number, number]; fov?: number };
   time?: number;
   water?: boolean;
@@ -1605,6 +1655,8 @@ export function createNativeSceneRenderer(options: {
   canvas: HTMLCanvasElement;
   navigator?: Navigator | { gpu?: GPU };
   maxVertices?: number;
+  /** At most 16 materials, 64 MiB decoded RGBA8 total; maps are power-of-two, up to 2048. */
+  materials?: NativeSurfaceMaterial[];
   onUnavailable?: (message: string) => void;
 }): Promise<{
   render(frame: NativeSceneFrame): NativeSceneSnapshot;
@@ -2028,3 +2080,6 @@ export const rendererWorkerProfiles: Readonly<
 export const rendererWorkerManifests: Readonly<
   Record<RendererWorkerProfileName, RendererWorkerManifest>
 >;
+
+/** Validate native materials and bounded decoded maps without GPU allocation. */
+export declare function validateNativeSurfaceMaterials(materials: NativeSurfaceMaterial[]): void;

package/src/index.js

@@ -1,4 +1,5 @@
 export { createNativeSceneRenderer } from "./native-scene-renderer.js";
+export { createCanonicalWavefrontMeshInputs } from "./canonical-wavefront-meshes.js";
 export {
   createAnimatedSceneRenderer,
 } from "./animated-scene-renderer.js";
@@ -88,3 +89,5 @@ export {
   defaultRendererClearColor,
   supportsWebGpu,
 } from "./renderer-webgpu-runtime.js";
+
+export { validateNativeMaterials as validateNativeSurfaceMaterials } from './native-surface-materials.js';

package/src/native-scene-renderer.js

@@ -1,5 +1,9 @@
 import { createGpuRenderer } from "./renderer-webgpu-runtime.js";
 import { nativeSceneShader } from "./native-scene-shader.js";
+import {
+  validateNativeMaterials,
+  createNativeMaterialTextures,
+} from "./native-surface-materials.js";
 
 const STRIDE = 12;
 const UNIFORM_BYTES = 256;
@@ -17,7 +21,7 @@ const unit = (a) => {
 const finiteVector = (a) =>
   Array.isArray(a) && a.length === 3 && a.every(Number.isFinite);
 
-function validateFrame(frame, maxVertices) {
+function validateFrame(frame, maxVertices, materialCount) {
   const { vertices, camera, time = 0 } = frame ?? {};
   if (
     !(vertices instanceof Float32Array) ||
@@ -56,6 +60,48 @@ function validateFrame(frame, maxVertices) {
       "wakes must contain at most four finite [x, z, heading] entries.",
     );
   }
+  const count = vertices.length / STRIDE;
+  if (
+    frame.texcoords !== undefined &&
+    (!(frame.texcoords instanceof Float32Array) ||
+      frame.texcoords.length !== count * 2 ||
+      !frame.texcoords.every(Number.isFinite))
+  ) {
+    throw new Error(
+      "texcoords must contain two finite coordinates per vertex.",
+    );
+  }
+  if (frame.surfaces !== undefined) {
+    if (
+      !Array.isArray(frame.surfaces) ||
+      frame.surfaces.length > 256 ||
+      !frame.texcoords
+    ) {
+      throw new Error(
+        "surfaces require texcoords and at most 256 contiguous draw ranges.",
+      );
+    }
+    let end = 0;
+    for (const range of frame.surfaces) {
+      if (
+        !range ||
+        range.firstVertex !== end ||
+        !Number.isInteger(range.vertexCount) ||
+        range.vertexCount <= 0 ||
+        range.vertexCount % 3 !== 0 ||
+        !Number.isInteger(range.materialIndex) ||
+        range.materialIndex < 0 ||
+        range.materialIndex >= materialCount
+      ) {
+        throw new Error(
+          "surface ranges must cover triangles in order and reference a valid material.",
+        );
+      }
+      end += range.vertexCount;
+    }
+    if (end !== count)
+      throw new Error("surface ranges must cover every vertex exactly once.");
+  }
   return { ...frame, time };
 }
 
@@ -106,6 +152,9 @@ function frameUniforms(frame, width, height, reflected = false) {
 /** Native raster surfaces. The caller owns simulation, animation and scheduling. */
 export async function createNativeSceneRenderer(options = {}) {
   const maxVertices = options.maxVertices ?? 300_000;
+  const materials = options.materials ?? [];
+  validateNativeMaterials(materials);
+  const materialCount = materials.length;
   if (
     !Number.isInteger(maxVertices) ||
     maxVertices < 3 ||
@@ -118,6 +167,7 @@ export async function createNativeSceneRenderer(options = {}) {
   let available = true;
   let targets = null;
   let vertexBuffer = null;
+  let uvBuffer = null;
   let vertexCapacity = 0;
   let pendingFrame = null;
   let submittedFrames = 0;
@@ -186,6 +236,63 @@ export async function createNativeSceneRenderer(options = {}) {
         { binding: 1, visibility: 2, sampler: { type: "filtering" } },
       ],
     });
+    const materialLayout = device.createBindGroupLayout({
+      entries: [
+        ...[0, 1, 2, 5].map((binding) => ({
+          binding,
+          visibility: 2,
+          texture: { sampleType: "float" },
+        })),
+        { binding: 3, visibility: 2, sampler: { type: "filtering" } },
+        {
+          binding: 4,
+          visibility: 2,
+          buffer: { type: "uniform", minBindingSize: 16 },
+        },
+      ],
+    });
+    const materialSampler = device.createSampler({
+      addressModeU: "repeat",
+      addressModeV: "repeat",
+      minFilter: "linear",
+      magFilter: "linear",
+      mipmapFilter: "linear",
+      maxAnisotropy: 4,
+    });
+    const materialGroups = createNativeMaterialTextures(
+      device,
+      materials,
+      own,
+    ).map((material) => {
+      const params = own(
+        device.createBuffer({
+          size: 16,
+          usage: 0x48,
+          label: "native.material-parameters",
+        }),
+      );
+      device.queue.writeBuffer(
+        params,
+        0,
+        new Float32Array([
+          material.normalScale,
+          material.authored ? 1 : 0,
+          material.clearcoat,
+          material.clearcoatRoughness,
+        ]),
+      );
+      return device.createBindGroup({
+        layout: materialLayout,
+        entries: [
+          { binding: 0, resource: material.baseColor },
+          { binding: 1, resource: material.normal },
+          { binding: 2, resource: material.orm },
+          { binding: 3, resource: materialSampler },
+          { binding: 4, resource: { buffer: params } },
+          { binding: 5, resource: material.clearcoatMap },
+        ],
+      });
+    });
     const uniformBuffer = own(
       device.createBuffer({
         label: "native.frame",
@@ -267,6 +374,20 @@ export async function createNativeSceneRenderer(options = {}) {
                         ? attributes.slice(0, 1)
                         : attributes,
                   },
+                  ...(vertex === "shadowVertex"
+                    ? []
+                    : [
+                        {
+                          arrayStride: 8,
+                          attributes: [
+                            {
+                              shaderLocation: 4,
+                              offset: 0,
+                              format: "float32x2",
+                            },
+                          ],
+                        },
+                      ]),
                 ],
               }
             : {}),
@@ -303,7 +424,7 @@ export async function createNativeSceneRenderer(options = {}) {
       "surfaceFragment",
       format,
       4,
-      [uniformLayout, shadowLayout],
+      [uniformLayout, shadowLayout, materialLayout],
       true,
     );
     const skyPipeline = await pipeline(
@@ -320,7 +441,7 @@ export async function createNativeSceneRenderer(options = {}) {
       "waterFragment",
       format,
       4,
-      [uniformLayout, shadowLayout, reflectionLayout],
+      [uniformLayout, shadowLayout, materialLayout, reflectionLayout],
     );
     const reflectedSurfacePipeline = await pipeline(
       "reflection-surface",
@@ -328,7 +449,7 @@ export async function createNativeSceneRenderer(options = {}) {
       "reflectionSurface",
       "rgba16float",
       1,
-      [uniformLayout, shadowLayout],
+      [uniformLayout, shadowLayout, materialLayout],
       true,
     );
     const reflectedSkyPipeline = await pipeline(
@@ -434,7 +555,20 @@ export async function createNativeSceneRenderer(options = {}) {
         if (p !== shadowPipeline) pass.setBindGroup(1, shadowGroup);
         if (vertexCount > 0) {
           pass.setVertexBuffer(0, vertexBuffer);
-          pass.draw(vertexCount);
+          if (p === shadowPipeline) {
+            pass.draw(vertexCount);
+          } else {
+            pass.setVertexBuffer(1, uvBuffer);
+            if (pendingFrame.surfaces) {
+              for (const range of pendingFrame.surfaces) {
+                pass.setBindGroup(2, materialGroups[range.materialIndex + 1]);
+                pass.draw(range.vertexCount, 1, range.firstVertex);
+              }
+            } else {
+              pass.setBindGroup(2, materialGroups[0]);
+              pass.draw(vertexCount);
+            }
+          }
         }
       };
       const shadowPass = encoder.beginRenderPass({
@@ -480,7 +614,8 @@ export async function createNativeSceneRenderer(options = {}) {
       if (pendingFrame.water !== false) {
         pass.setPipeline(waterPipeline);
         pass.setBindGroup(1, shadowGroup);
-        pass.setBindGroup(2, targets.reflectionGroup);
+        pass.setBindGroup(2, materialGroups[0]);
+        pass.setBindGroup(3, targets.reflectionGroup);
         pass.draw(3);
       }
       drawGeometry(pass, surfacePipeline, mainGroup);
@@ -491,15 +626,23 @@ export async function createNativeSceneRenderer(options = {}) {
       render(input) {
         if (destroyed) throw new Error("Native scene renderer was destroyed.");
         if (!available) throw new Error("WebGPU device was lost.");
-        pendingFrame = validateFrame(input, maxVertices);
+        pendingFrame = validateFrame(input, maxVertices, materialCount);
         const data = pendingFrame.vertices;
         ensureTargets();
         if (data.byteLength > vertexCapacity) {
           if (vertexBuffer) release(vertexBuffer);
+          if (uvBuffer) release(uvBuffer);
           vertexCapacity = Math.min(
             maxVertices * STRIDE * 4,
             Math.max(4096, 2 ** Math.ceil(Math.log2(data.byteLength))),
           );
+          uvBuffer = own(
+            device.createBuffer({
+              label: "native.surface-uvs",
+              size: Math.ceil(vertexCapacity / (STRIDE * 4)) * 8,
+              usage: 0x28,
+            }),
+          );
           vertexBuffer = own(
             device.createBuffer({
               label: "native.surface-vertices",
@@ -508,6 +651,8 @@ export async function createNativeSceneRenderer(options = {}) {
             }),
           );
         }
+        if (pendingFrame.texcoords?.byteLength)
+          device.queue.writeBuffer(uvBuffer, 0, pendingFrame.texcoords);
         vertexCount = data.length / STRIDE;
         if (data.byteLength) device.queue.writeBuffer(vertexBuffer, 0, data);
         device.queue.writeBuffer(