@tinypoly/gpu-renderer 0.0.0 → 0.0.1

package/src/geometry.ts

@@ -351,6 +351,76 @@ export function packGeometry(
     triangleMaterials.push(entry.index);
   };
 
+  /** Every vertex of a plain mesh, transformed once and shared by its groups. */
+  let plain: PlainVertices | null = null;
+
+  const writePlainTriangles = (mesh: SerializedMesh, start: number, end: number, mirrored: boolean, entry: Entry) => {
+    if (plain?.mesh !== mesh) plain = plainVertices(mesh);
+
+    const { world, normal, hasNormal, uv, color, valid } = plain;
+    const index = mesh.index;
+    const stride = entry.placement.varyingStride;
+    const corners = [0, 0, 0];
+
+    for (let v = start; v + 2 < end; v += 3) {
+      const a = index ? index[v] : v, b = index ? index[v + 1] : v + 1, c = index ? index[v + 2] : v + 2;
+
+      if (!valid(a) || !valid(b) || !valid(c)) continue;
+
+      corners[0] = a;
+      corners[1] = mirrored ? c : b;
+      corners[2] = mirrored ? b : c;
+
+      // Geometry without normals is shaded flat: the three corners share the face normal.
+      const flat = !hasNormal[a] || !hasNormal[b] || !hasNormal[c]
+        ? faceNormal(
+          Array.from(world.subarray(corners[0] * 3, corners[0] * 3 + 3)),
+          Array.from(world.subarray(corners[1] * 3, corners[1] * 3 + 3)),
+          Array.from(world.subarray(corners[2] * 3, corners[2] * 3 + 3)))
+        : null;
+
+      positions.reserve(9);
+      normals.reserve(9);
+      uvs.reserve(12);
+
+      if (anyVertexColors) colors.reserve(12);
+
+      for (const corner of corners) {
+        const p = corner * 3, q = corner * 4;
+
+        positions.data[positions.length++] = world[p];
+        positions.data[positions.length++] = world[p + 1];
+        positions.data[positions.length++] = world[p + 2];
+
+        if (flat) {
+          normals.data[normals.length++] = flat[0];
+          normals.data[normals.length++] = flat[1];
+          normals.data[normals.length++] = flat[2];
+        } else {
+          normals.data[normals.length++] = normal[p];
+          normals.data[normals.length++] = normal[p + 1];
+          normals.data[normals.length++] = normal[p + 2];
+        }
+
+        uvs.data[uvs.length++] = uv[q];
+        uvs.data[uvs.length++] = uv[q + 1];
+        uvs.data[uvs.length++] = uv[q + 2];
+        uvs.data[uvs.length++] = uv[q + 3];
+
+        if (anyVertexColors) {
+          colors.data[colors.length++] = color[q];
+          colors.data[colors.length++] = color[q + 1];
+          colors.data[colors.length++] = color[q + 2];
+          colors.data[colors.length++] = color[q + 3];
+        }
+      }
+
+      if (stride > 0) varyings.pad(3 * stride);
+
+      triangleMaterials.push(entry.index);
+    }
+  };
+
   for (const mesh of meshes) {
     const groups = mesh.groups.length
       ? mesh.groups
@@ -389,6 +459,13 @@ export function packGeometry(
         // instance, reading the per-instance attributes at that instance.
         const instancing = vertexShader ? instancedAttributes(mesh) : null;
 
+        // The common case, a plain mesh, skips the general reader: each vertex is transformed once, straight into
+        // typed arrays, and each triangle is copied from them. What it writes is exactly what the reader would.
+        if (!vertexShader && !material?.maps?.displacementMap) {
+          writePlainTriangles(mesh, start, end, mirrored, entry);
+          continue;
+        }
+
         for (let instance = 0; instance < (instancing?.count ?? 1); instance++) {
           const reader = instancing ? new VertexReader(mesh, material, context, instancing.names, instance) : vertices;
 
@@ -459,6 +536,97 @@ export function packGeometry(
   };
 }
 
+/** A plain mesh's vertices in world space, read lazily: only the ones some triangle uses are transformed. */
+interface PlainVertices {
+  mesh: SerializedMesh;
+  world: Float32Array;
+  normal: Float32Array;
+  hasNormal: Uint8Array;
+  /** Four per vertex: the first UV set, then the second. */
+  uv: Float32Array;
+  /** Four per vertex, RGBA. */
+  color: Float32Array;
+  /** Whether the vertex exists and has a finite position, transforming it on first use. */
+  valid(index: number): boolean;
+}
+
+function plainVertices(mesh: SerializedMesh): PlainVertices {
+  const position = mesh.attributes.position;
+  const count = Math.floor(position.data.length / Math.max(1, position.itemSize));
+  const world = new Float32Array(count * 3);
+  const normal = new Float32Array(count * 3);
+  const hasNormal = new Uint8Array(count);
+  const uv = new Float32Array(count * 4);
+  const color = new Float32Array(count * 4);
+  // 0 not read yet, 1 usable, 2 refused.
+  const state = new Uint8Array(count);
+  const rotation = normalMatrix(mesh.matrixWorld);
+  const matrix = mesh.matrixWorld as number[];
+  const { normal: normals, uv: uv0, uv1, color: colors } = mesh.attributes;
+
+  /** Component `c` of a vertex, as the reader's `Array.from(subarray(...))[c]` would see it. */
+  const component = (attribute: SerializedMesh["attributes"][string], vertex: number, c: number): number | undefined => {
+    const at = vertex * attribute.itemSize + c;
+
+    return c < attribute.itemSize && at < attribute.data.length ? attribute.data[at] : undefined;
+  };
+
+  const read = (vertex: number): boolean => {
+    const x = component(position, vertex, 0), y = component(position, vertex, 1), z = component(position, vertex, 2);
+
+    if (x === undefined || y === undefined || z === undefined) return false;
+    if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) return false;
+
+    transformPoint(matrix, x, y, z, world, vertex * 3);
+
+    if (normals) {
+      const nx = component(normals, vertex, 0), ny = component(normals, vertex, 1), nz = component(normals, vertex, 2);
+
+      if (nx !== undefined && ny !== undefined && nz !== undefined) {
+        transformNormal(rotation, nx, ny, nz, normal, vertex * 3);
+        hasNormal[vertex] = 1;
+      }
+    }
+
+    // A missing second set falls back to the first, and a missing component to zero, as the pushed stream would.
+    const second = uv1 ?? uv0;
+
+    uv[vertex * 4] = uv0 ? component(uv0, vertex, 0) ?? 0 : 0;
+    uv[vertex * 4 + 1] = uv0 ? component(uv0, vertex, 1) ?? 0 : 0;
+    uv[vertex * 4 + 2] = second ? component(second, vertex, 0) ?? 0 : 0;
+    uv[vertex * 4 + 3] = second ? component(second, vertex, 1) ?? 0 : 0;
+
+    if (colors) {
+      const available = Math.max(0, Math.min(colors.itemSize, colors.data.length - vertex * colors.itemSize));
+
+      color[vertex * 4] = component(colors, vertex, 0) ?? 1;
+      color[vertex * 4 + 1] = component(colors, vertex, 1) ?? 1;
+      color[vertex * 4 + 2] = component(colors, vertex, 2) ?? 1;
+      color[vertex * 4 + 3] = available >= 4 ? component(colors, vertex, 3) ?? 0 : 1;
+    } else {
+      color.fill(1, vertex * 4, vertex * 4 + 4);
+    }
+
+    return true;
+  };
+
+  return {
+    mesh,
+    world,
+    normal,
+    hasNormal,
+    uv,
+    color,
+    valid(vertex: number) {
+      if (!(vertex >= 0 && vertex < count)) return false;
+
+      if (state[vertex] === 0) state[vertex] = read(vertex) ? 1 : 2;
+
+      return state[vertex] === 1;
+    },
+  };
+}
+
 interface VertexContext {
   camera?: CameraMatrices;
   width: number;

package/src/index.ts

@@ -28,6 +28,9 @@ export { packGeometry } from "./geometry.js";
 export type { PackedGeometry } from "./geometry.js";
 export { buildBvh, MAX_BVH_DEPTH } from "./bvh.js";
 export type { PackedBvh } from "./bvh.js";
+// The BVH worker: what `createBvhWorker` has to return, and the worker this package starts by default.
+export { BVH_WORKER_MIN_TRIANGLES, createDefaultBvhWorker, respondToBvhRequest } from "./bvhBuilder.js";
+export type { BvhRequest, BvhResponse, BvhWorker, BvhWorkerFactory } from "./bvhBuilder.js";
 export { sceneByteLength } from "./sceneUpload.js";
 export type { SceneByteLength } from "./sceneUpload.js";
 export { LIGHT_KIND, packLights } from "./lights.js";

package/src/renderer.ts

@@ -1,6 +1,7 @@
 import { PerspectiveCamera, type LightProbe, type Material, type Object3D, type Scene } from "three";
 import { Accumulator } from "./accumulator.js";
-import { buildBvh, type PackedBvh } from "./bvh.js";
+import { type PackedBvh } from "./bvh.js";
+import { BvhBuilder, createDefaultBvhWorker, type BvhWorkerFactory } from "./bvhBuilder.js";
 import { cameraMatrices, type CameraMatrices } from "./camera.js";
 import { requestRenderDevice, type RenderDevice } from "./device.js";
 import { loadEnvironment, type PackedEnvironment } from "./environment.js";
@@ -85,6 +86,17 @@ export interface GpuRendererOptions {
   pixelRatio?: number;
   /** How the denoiser filters, when `settings.globalIllumination.denoise` turns it on. Merged over `DEFAULT_DENOISER`. */
   denoiser?: Partial<DenoiserSettings>;
+  /**
+   * Builds the BVH of a large scene in a Web Worker, so the page keeps responding while it is split. The tree is the
+   * same either way. Defaults to true where Web Workers exist, or when `createBvhWorker` is given; false builds on the
+   * main thread. If the worker cannot start, the renderer warns once and builds on the main thread.
+   */
+  bvhWorker?: boolean;
+  /**
+   * Starts the BVH worker. Replace it when the bundler cannot follow `new URL("./bvhWorker.js", import.meta.url)`, or
+   * outside the browser, with anything shaped like a Web Worker that runs `dist/bvhWorker.js`.
+   */
+  createBvhWorker?: BvhWorkerFactory;
 }
 
 interface PendingFrame {
@@ -213,9 +225,13 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   private revision = 0;
   private frameIndex = 0;
   private disposed = false;
+  private bvh: BvhBuilder;
 
   constructor(options: GpuRendererOptions) {
     super();
+    this.bvh = new BvhBuilder(
+      options.bvhWorker ?? (options.createBvhWorker !== undefined || typeof Worker !== "undefined"),
+      options.createBvhWorker ?? createDefaultBvhWorker);
     this.width = Math.max(1, Math.floor(options.width));
     this.height = Math.max(1, Math.floor(options.height));
     this.pixelRatio = checkedPixelRatio(options.pixelRatio ?? 1);
@@ -443,6 +459,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.revision++;
     this.resume();
     this.abort("The renderer was disposed.");
+    this.bvh.dispose();
     this.buffers?.destroy();
     this.accumulator?.destroy();
     this.denoisePass?.destroy();
@@ -504,7 +521,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     const assets = await this.assets;
 
     this.check(revision);
-    this.prepare(gpu, assets, camera, width, height, environment);
+    await this.prepare(gpu, revision, assets, camera, width, height, environment);
     this.output = { width, height, data: new Uint8ClampedArray(width * height * 4) };
     this.emit("start", { width, height });
 
@@ -655,8 +672,9 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   }
 
   /** Uploads what changed and makes sure the passes point at the current buffers. */
-  private prepare(
+  private async prepare(
     gpu: RenderDevice,
+    revision: number,
     assets: SceneAssets,
     camera: CameraState,
     width: number,
@@ -674,17 +692,21 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     if (this.sceneDirty || !this.buffers || moved) {
       // Planar surfaces need their captures, from this camera, before the scene that samples them is packed.
       const planar = planarCaptures(assets.scene, camera, width, height);
-      const packed = this.packScene(gpu, planar?.scene ?? assets.scene, assets, matrices, width, height, environment);
+
+      const packed = await this.packScene(
+        gpu, revision, planar?.scene ?? assets.scene, assets, matrices, width, height, environment);
 
       this.packed = packed.packed;
       this.buffers?.destroy();
       this.buffers = packed.buffers;
       this.target = packed;
       this.sceneDirty = false;
-      this.packedView = view;
       this.planar = !!planar;
 
-      if (planar) this.renderCaptures(gpu, planar, assets, environment);
+      if (planar) await this.renderCaptures(gpu, revision, planar, assets, environment);
+
+      // Only once the captures are in: a frame replaced while they were taken has to take them again.
+      this.packedView = view;
     }
 
     const resized = !this.accumulator || this.accumulator.resize(width, height);
@@ -708,14 +730,15 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   }
 
   /** Packs and uploads one scene: its textures, geometry, hierarchy, lights and every extra word they point at. */
-  private packScene(
+  private async packScene(
     gpu: RenderDevice,
+    revision: number,
     scene: SerializedScene,
     assets: SceneAssets,
     matrices: CameraMatrices,
     width: number,
     height: number,
-    environment: PackedEnvironment | null): PackedTarget {
+    environment: PackedEnvironment | null): Promise<PackedTarget> {
     // The textures are planned first: a material refers to one by the index it lands on in that table, and to its
     // extra words by where they land after the texels. The environment rides along in the same buffer.
     const plan = planTextures(scene, environment ? [environment.texture] : []);
@@ -763,7 +786,12 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     const volumetric = packVolumetricLights(scene.lights);
     const volumetricData = append(new Uint32Array(volumetric.buffer));
     const textures = writeTextures(plan, new Uint32Array(extra));
-    const packed = { geometry, bvh: buildBvh(geometry.positions, geometry.triangleCount), textures };
+    const bvh = await this.bvh.build(geometry.positions, geometry.triangleCount);
+
+    // Nothing is on the device yet, so a frame replaced while the hierarchy was built has nothing to give back.
+    this.check(revision);
+
+    const packed = { geometry, bvh, textures };
     const buffers = uploadScene(gpu.device, geometry, packed.bvh, textures, lights, environment, cdf);
 
     if (buffers.bytes.largest > gpu.maxStorageBufferBindingSize) {
@@ -785,8 +813,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
    * the texels of its placeholder in the main scene's texture buffer. Everything is queued ahead of the frame itself,
    * which the queue then runs in order.
    */
-  private renderCaptures(
-    gpu: RenderDevice, planar: PlanarCaptures, assets: SceneAssets, environment: PackedEnvironment | null) {
+  private async renderCaptures(gpu: RenderDevice, revision: number, planar: PlanarCaptures, assets: SceneAssets,
+    environment: PackedEnvironment | null) {
     const main = this.target as PackedTarget;
     const pathTrace = this.pathTrace as PathTracePass;
     const { width, height } = planar;
@@ -801,7 +829,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
         let target = scenes.get(capture.scene);
 
         if (!target) {
-          target = this.packScene(gpu, capture.scene === "scene" ? planar.captureScene : empty, assets,
+          target = await this.packScene(gpu, revision, capture.scene === "scene" ? planar.captureScene : empty, assets,
             cameraMatrices(capture.camera, width, height), width, height, environment);
           scenes.set(capture.scene, target);
         }