poppygl 0.0.30 → 0.0.31

package/README.md

@@ -2,11 +2,20 @@
 
 Render GLTF files to PNG images in completely native JavaScript without WebGL/OpenGL.
 
-<img width="996" height="732" alt="image" src="https://github.com/user-attachments/assets/5cda4566-2637-440e-8956-dff87aedbc26" />
+![NEMA17: regular PoppyGL, realistic PoppyGL, and Blender Cycles reference](docs/images/nema17-comparison.png)
+
+Left to right: regular PoppyGL, PoppyGL with `realistic: true`, and a Blender
+Cycles reference. All three views use the same model, camera, and materials.
+
+## Install
+
+```sh
+npm install poppygl
+```
 
 ## Quick start
 
-Give poppygl a `.gltf` or `.glb` URL and it will fetch every referenced buffer/texture, rasterize the scene, and hand back a PNG buffer.
+Give poppygl a `.gltf` or `.glb` URL and it will fetch every referenced buffer/texture, rasterize the scene, and return the PNG as a `Uint8Array`.
 
 ```ts
 import { renderGLTFToPNGFromURL } from "poppygl"
@@ -28,7 +37,7 @@ await writeFile("DamagedHelmet.png", png)
 
 ## Render from an in-memory GLB buffer
 
-Already have the `.glb` bytes (for example, uploaded by a user or read from disk)? Send the buffer straight to `renderGLTFToPNGFromGLB` and receive the PNG output.
+Already have the `.glb` bytes (for example, uploaded by a user or read from disk)? Send the buffer straight to `renderGLTFToPNGFromGLB` and receive the PNG as a `Uint8Array`.
 
 ```ts
 import { readFile } from "node:fs/promises"
@@ -40,18 +49,75 @@ const png = await renderGLTFToPNGFromGLB(glb, {
   height: 768,
 })
 
-// write or return the PNG buffer
+await writeFile("DamagedHelmet.png", png)
 ```
 
 > This helper expects every referenced buffer/image to be embedded in the GLB (the usual single-file package). If the asset links out to external resources, load it with `renderGLTFToPNGFromURL` instead so poppygl can fetch the extras.
 
 ## Render options
 
+### Realistic studio rendering
+
+Pass `realistic: true` for studio lighting, metal reflections, and soft shadows.
+The default is `false`, which uses the faster diffuse renderer.
+
+```ts
+import { readFile, writeFile } from "node:fs/promises"
+import { renderGLTFToPNGFromGLB } from "poppygl"
+
+const glb = await readFile("motor.glb")
+const png = await renderGLTFToPNGFromGLB(glb, {
+  realistic: true,
+  width: 900,
+  height: 900,
+  supersampling: 2,
+})
+
+await writeFile("motor.png", png)
+```
+
+The same flag works with `renderGLTFToPNGFromURL`, `renderDrawCalls`, and
+`renderSceneFromGLTF`. Realistic mode uses a fixed studio lighting preset;
+`ambient` and `lightDir` apply to regular rendering. Camera, background, and
+output settings work in both modes. A floor must be included in your model
+if you want it to receive shadows.
+
+Realistic mode supports base-color textures and scalar glTF metallic/roughness
+values. Normal maps, metallic/roughness textures, and custom HDR environments
+are not yet supported. Transparent and alpha-cutout surfaces do not cast shadows.
+
+Use realistic mode for saved images. At 600×600 with 2× supersampling, example
+models took 21–39 seconds to render, compared with 0.6–1.6 seconds in regular
+mode on the same machine. Reduce resolution or supersampling for faster output;
+render times vary with model complexity and hardware.
+
+### Camera and background
+
+The camera automatically frames the model unless you specify `camPos` and
+`lookAt`. Set `up` to match your model's coordinate system:
+
+```ts
+const png = await renderGLTFToPNGFromGLB(glb, {
+  realistic: true,
+  width: 800,
+  height: 600,
+  camPos: [80, 60, 80],
+  lookAt: [0, 0, 0],
+  up: "y+",
+  fov: 45,
+  backgroundColor: "#e5e7eb",
+  grid: false,
+})
+```
+
+### Options
+
 `renderGLTFToPNGFromURL` accepts the same render options as the lower-level APIs:
 
-- `width`/`height` (default `512`): output resolution in pixels.
+- `realistic`: enable studio lighting, reflections, and soft shadows (default `false`).
+- `width`/`height`: output resolution in pixels (defaults `800`/`600`).
 - `supersampling`: render at `width * supersampling` / `height * supersampling`, then downsample (default `1`).
-- `fov`: vertical field of view in degrees (defaults to `35`).
+- `fov`: vertical field of view in degrees (default `60`).
 - `camPos` and `lookAt`: override the auto-framed camera position and target.
 - `up`: choose the world-up axis for the camera with `"y+" | "y-" | "x+" | "x-" | "z+" | "z-"`.
 - `cameraRotation`: apply Euler degrees `{ x, y, z }` to define camera orientation directly. When set, it takes precedence over `lookAt`.
@@ -59,10 +125,12 @@ const png = await renderGLTFToPNGFromGLB(glb, {
 - `debugFontSize`: optional pixel size for `debugPoints` labels; when omitted the renderer derives a size from the image dimensions.
 - `debugPointColor`: optional RGB tuple for debug point markers.
 - `debugLabelColor`: optional RGB tuple for debug point labels.
-- `lightDir`: normalized directional light vector (defaults to a top-right key light).
-- `ambient`: ambient lighting contribution (0–1, defaults to `0.2`).
-- `gamma`: gamma correction applied to the output (defaults to `2.2`).
-- `cull`: back-face culling mode (`"back"`, `"front"`, or `"none"`).
+- `lightDir`: directional light vector for regular mode (default `[-0.4, -0.9, -0.2]`).
+- `ambient`: ambient lighting contribution from 0 to 1 (default `0.15`; regular mode only).
+- `gamma`: enable gamma correction (default `true`).
+- `cull`: enable back-face culling (default `true`).
+- `backgroundColor`: a hex string such as `"#e5e7eb"`, or an RGB tuple with values from 0 to 1.
+- `grid`: show a ground grid (default `false`), or provide grid options.
 - `fetchImpl`: optional override for resource loading (must match the `fetch` signature).
 
 You can inspect the defaults via `getDefaultRenderOptions()` or reuse the internal merge logic with `resolveRenderOptions()`.

package/dist/index.d.ts

@@ -13,6 +13,8 @@ declare const createUint8Bitmap: ImageFactory;
 interface Material {
     baseColorFactor: [number, number, number, number];
     baseColorTexture: BitmapLike | null;
+    metallicFactor?: number;
+    roughnessFactor?: number;
     alphaMode?: "OPAQUE" | "MASK" | "BLEND";
     alphaCutoff?: number;
 }
@@ -75,6 +77,8 @@ interface CameraRotation {
  */
 declare function hexToRgb(hex: string): [number, number, number] | null;
 interface RenderOptions {
+    /** Opt into metallic/roughness studio lighting and geometry-based soft shadows. */
+    realistic: boolean;
     width: number;
     height: number;
     supersampling: number;
@@ -167,6 +171,17 @@ declare function isPNG(filenameOrUri: string): boolean;
 declare function isJPG(filenameOrUri: string): boolean;
 declare function decodeImageFromBuffer(buf: Uint8Array, mimeType?: string | null): Promise<BitmapLike>;
 
+type V3 = [number, number, number];
+declare class StudioLighting {
+    private tables;
+    private occlusion;
+    private eye;
+    private shadowDirections;
+    constructor(drawCalls: DrawCall[], camera: Camera);
+    private bounceRadiance;
+    shade(position: V3, n: V3, base: V3, material: Material, sampleIndex?: number): V3;
+}
+
 interface LightSettings {
     dir: readonly [number, number, number];
     ambient: number;
@@ -184,14 +199,16 @@ declare class SoftwareRenderer {
     readonly height: number;
     readonly bitmap: BitmapLike;
     readonly depth: Float32Array;
-    constructor(width: number, height: number, imageFactory?: ImageFactory);
+    private readonly denoiser;
+    constructor(width: number, height: number, imageFactory?: ImageFactory, denoise?: boolean);
     get buffer(): Uint8Array<ArrayBufferLike> | Uint8ClampedArray<ArrayBufferLike>;
     clear(colorRGBA?: [number, number, number, number]): void;
-    setPixel(x: number, y: number, r: number, g: number, b: number, a: number): void;
+    setPixel(x: number, y: number, r: number, g: number, b: number, a: number, keepGuide?: boolean): void;
+    denoise(gammaOut?: boolean): void;
     drawLines(mesh: DrawCall, camera: Camera, gammaOut?: boolean, options?: LineRenderOptions): void;
     sampleTextureNearest(img: BitmapLike | null, u: number, v: number): MutableRGBA;
     perspInterp(attrs: number[][], invWs: number[], lambdas: number[]): number[];
-    drawMesh(mesh: DrawCall, camera: Camera, light: LightSettings, material: Material, cullBackFaces?: boolean, gammaOut?: boolean): void;
+    drawMesh(mesh: DrawCall, camera: Camera, light: LightSettings, material: Material, cullBackFaces?: boolean, gammaOut?: boolean, studio?: StudioLighting): void;
 }
 
 /**

package/dist/index.js

@@ -140,13 +140,16 @@ function getAABBCornerDistances(aabb, eye) {
   const xs = [aabb.min[0], aabb.max[0]];
   const ys = [aabb.min[1], aabb.max[1]];
   const zs = [aabb.min[2], aabb.max[2]];
-  let nearest = Infinity;
+  const nearest = Math.hypot(
+    ...[0, 1, 2].map(
+      (axis) => Math.max(aabb.min[axis] - eye[axis], 0, eye[axis] - aabb.max[axis])
+    )
+  );
   let farthest = 0;
   for (const x of xs) {
     for (const y of ys) {
       for (const z of zs) {
         const distance = vec3.distance(eye, vec3.fromValues(x, y, z));
-        nearest = Math.min(nearest, distance);
         farthest = Math.max(farthest, distance);
       }
     }
@@ -287,8 +290,8 @@ function hasCrease(normals, minimumDot) {
     for (let j = i + 1; j < normals.length; j++) {
       const a = normals[i];
       const b = normals[j];
-      const dot = a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
-      if (dot < minimumDot) return true;
+      const dot2 = a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+      if (dot2 < minimumDot) return true;
     }
   }
   return false;
@@ -469,6 +472,7 @@ function hexToRgb(hex) {
   return [r, g, b];
 }
 var DEFAULT_RENDER_OPTIONS = {
+  realistic: false,
   width: 800,
   height: 600,
   supersampling: 1,
@@ -583,22 +587,97 @@ function clipMeshToNearPlane(mesh, mvp) {
   };
 }
 
+// lib/render/GeometryDenoiser.ts
+var GeometryDenoiser = class {
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    const count = width * height;
+    this.ids = new Int32Array(count);
+    this.normals = new Float32Array(count * 3);
+    this.albedo = new Float32Array(count * 3);
+    this.radiance = new Float32Array(count * 3);
+    this.distance = new Float32Array(count);
+  }
+  ids;
+  normals;
+  albedo;
+  radiance;
+  distance;
+  materials = /* @__PURE__ */ new WeakMap();
+  nextId = 1;
+  materialId(material) {
+    let id = this.materials.get(material);
+    if (!id) {
+      id = this.nextId++;
+      this.materials.set(material, id);
+    }
+    return id;
+  }
+  record(index, id, n, albedo, radiance, distance) {
+    this.ids[index] = id;
+    this.normals.set(n, index * 3);
+    this.albedo.set(albedo, index * 3);
+    this.radiance.set(radiance, index * 3);
+    this.distance[index] = distance;
+  }
+  apply(output, gamma) {
+    const kernel = [1, 4, 6, 4, 1];
+    for (let y = 0; y < this.height; y++)
+      for (let x = 0; x < this.width; x++) {
+        const index = y * this.width + x, id = this.ids[index];
+        if (id === 0) continue;
+        const k = index * 3, n = this.normals, a = this.albedo;
+        let r = 0, g = 0, b = 0, total = 0;
+        for (let dy = -2; dy <= 2; dy++)
+          for (let dx = -2; dx <= 2; dx++) {
+            const px = x + dx, py = y + dy;
+            if (px < 0 || py < 0 || px >= this.width || py >= this.height)
+              continue;
+            const neighbor = py * this.width + px, p = neighbor * 3;
+            if (this.ids[neighbor] !== id) continue;
+            if (Math.abs(this.distance[index] - this.distance[neighbor]) > this.distance[index] * 0.02)
+              continue;
+            if (n[k] * n[p] + n[k + 1] * n[p + 1] + n[k + 2] * n[p + 2] < 0.98)
+              continue;
+            if (Math.abs(a[k] - a[p]) + Math.abs(a[k + 1] - a[p + 1]) + Math.abs(a[k + 2] - a[p + 2]) > 0.03)
+              continue;
+            const weight = kernel[dy + 2] * kernel[dx + 2];
+            total += weight;
+            r += this.radiance[p] * weight;
+            g += this.radiance[p + 1] * weight;
+            b += this.radiance[p + 2] * weight;
+          }
+        if (!total) continue;
+        const encode2 = (value) => Math.floor(
+          255 * (gamma ? srgbEncodeLinear01(Math.max(0, Math.min(1, value / total))) : Math.max(0, Math.min(1, value / total)))
+        );
+        output[index * 4] = encode2(r);
+        output[index * 4 + 1] = encode2(g);
+        output[index * 4 + 2] = encode2(b);
+      }
+  }
+};
+
 // lib/render/SoftwareRenderer.ts
 var SoftwareRenderer = class {
   width;
   height;
   bitmap;
   depth;
-  constructor(width, height, imageFactory = createUint8Bitmap) {
+  denoiser;
+  constructor(width, height, imageFactory = createUint8Bitmap, denoise = false) {
     this.width = width;
     this.height = height;
     this.bitmap = imageFactory(width, height);
     this.depth = new Float32Array(width * height);
+    this.denoiser = denoise ? new GeometryDenoiser(width, height) : null;
   }
   get buffer() {
     return this.bitmap.data;
   }
   clear(colorRGBA = [0, 0, 0, 255]) {
+    this.denoiser?.ids.fill(0);
     const [r, g, b, a] = colorRGBA;
     for (let i = 0; i < this.width * this.height; i++) {
       const j = i * 4;
@@ -609,14 +688,18 @@ var SoftwareRenderer = class {
       this.depth[i] = Infinity;
     }
   }
-  setPixel(x, y, r, g, b, a) {
+  setPixel(x, y, r, g, b, a, keepGuide = false) {
     if (x < 0 || y < 0 || x >= this.width || y >= this.height) return;
     const idx = (y * this.width + x) * 4;
+    if (this.denoiser && !keepGuide) this.denoiser.ids[y * this.width + x] = 0;
     this.buffer[idx + 0] = r;
     this.buffer[idx + 1] = g;
     this.buffer[idx + 2] = b;
     this.buffer[idx + 3] = a;
   }
+  denoise(gammaOut = true) {
+    this.denoiser?.apply(this.buffer, gammaOut);
+  }
   drawLines(mesh, camera, gammaOut = true, options = {}) {
     const { positions, indices, model, material } = mesh;
     if (!indices) return;
@@ -752,8 +835,9 @@ var SoftwareRenderer = class {
     }
     return out;
   }
-  drawMesh(mesh, camera, light, material, cullBackFaces = true, gammaOut = true) {
+  drawMesh(mesh, camera, light, material, cullBackFaces = true, gammaOut = true, studio) {
     let { positions, normals, uvs, indices, model, colors } = mesh;
+    const materialId = this.denoiser?.materialId(material) ?? 0;
     const view = camera.view;
     const proj = camera.proj;
     const mvp = mat43.create();
@@ -784,6 +868,7 @@ var SoftwareRenderer = class {
     const vInvW = new Float32Array(vertexCount);
     const vNDCz = new Float32Array(vertexCount);
     const vWorldN = new Array(vertexCount);
+    const vWorldP = studio ? new Array(vertexCount) : null;
     const vColor = new Array(vertexCount);
     for (let i = 0; i < vertexCount; i++) {
       const p = vec42.fromValues(
@@ -794,6 +879,10 @@ var SoftwareRenderer = class {
       );
       const c = vec42.create();
       vec42.transformMat4(c, p, mvp);
+      if (vWorldP) {
+        const world = vec42.transformMat4(vec42.create(), p, model);
+        vWorldP[i] = [world[0], world[1], world[2]];
+      }
       const invW = 1 / c[3];
       const ndcX = c[0] * invW;
       const ndcY = c[1] * invW;
@@ -854,6 +943,7 @@ var SoftwareRenderer = class {
         vWorldN[i1],
         vWorldN[i2]
       ];
+      const worldPositions = vWorldP ? [vWorldP[i0], vWorldP[i1], vWorldP[i2]] : null;
       const uv = uvs ? [
         [uvs[i0 * 2 + 0], uvs[i0 * 2 + 1]],
         [uvs[i1 * 2 + 0], uvs[i1 * 2 + 1]],
@@ -934,7 +1024,22 @@ var SoftwareRenderer = class {
           let r = baseColor[0] * lit;
           let g = baseColor[1] * lit;
           let b = baseColor[2] * lit;
+          if (studio && worldPositions) {
+            const position = this.perspInterp(worldPositions, invW, [
+              l0,
+              l1,
+              l2
+            ]);
+            [r, g, b] = studio.shade(
+              position,
+              nrm,
+              [baseColor[0], baseColor[1], baseColor[2]],
+              material,
+              di
+            );
+          }
           let a = baseColor[3];
+          const linearR = r, linearG = g, linearB = b;
           const alphaMode = material.alphaMode ?? "OPAQUE";
           const alphaCutoff = material.alphaCutoff ?? 0.5;
           if (alphaMode === "MASK" && a < alphaCutoff) continue;
@@ -976,8 +1081,22 @@ var SoftwareRenderer = class {
             clamp(outR, 0, 1) * 255 | 0,
             clamp(outG, 0, 1) * 255 | 0,
             clamp(outB, 0, 1) * 255 | 0,
-            clamp(outA, 0, 1) * 255 | 0
+            clamp(outA, 0, 1) * 255 | 0,
+            true
           );
+          if (this.denoiser) {
+            if (alphaMode !== "BLEND") {
+              const distance = 1 / (l0 * invW[0] + l1 * invW[1] + l2 * invW[2]);
+              this.denoiser.record(
+                di,
+                materialId,
+                nrm,
+                [baseColor[0], baseColor[1], baseColor[2]],
+                [linearR, linearG, linearB],
+                distance
+              );
+            } else this.denoiser.ids[di] = 0;
+          }
         }
       }
     }
@@ -1331,6 +1450,493 @@ function resolveRenderOptions(options = {}) {
   };
 }
 
+// lib/render/StudioLighting.ts
+import { mat4 as mat46 } from "gl-matrix";
+
+// lib/render/studio-environment.json
+var studio_environment_default = {
+  ambient: [0.055, 0.065, 0.085],
+  lobes: [
+    { direction: [-0.45, 0.8, 0.4], sharpness: 18, color: [5, 4.8, 4.4] },
+    { direction: [0.8, 0.3, 0.3], sharpness: 30, color: [2.6, 3.1, 4] },
+    { direction: [-0.2, 0.3, -0.95], sharpness: 50, color: [4, 4.3, 5] }
+  ]
+};
+
+// lib/render/RayOcclusion.ts
+import { vec3 as vec33 } from "gl-matrix";
+var RayOcclusion = class {
+  root;
+  bias;
+  constructor(drawCalls) {
+    const triangles = [];
+    for (const dc of drawCalls) {
+      if ((dc.mode ?? 4) !== 4 || dc.material.alphaMode === "BLEND") continue;
+      if (dc.material.alphaMode === "MASK") continue;
+      const count = dc.indices?.length ?? dc.positions.length / 3;
+      const vertex = (index) => {
+        const i = (dc.indices?.[index] ?? index) * 3;
+        const p = vec33.transformMat4(
+          vec33.create(),
+          [dc.positions[i], dc.positions[i + 1], dc.positions[i + 2]],
+          dc.model
+        );
+        return [p[0], p[1], p[2]];
+      };
+      for (let i = 0; i < count; i += 3) {
+        const p = vertex(i), q = vertex(i + 1), r = vertex(i + 2);
+        const min = [0, 1, 2].map(
+          (a) => Math.min(p[a], q[a], r[a])
+        );
+        const max = [0, 1, 2].map(
+          (a) => Math.max(p[a], q[a], r[a])
+        );
+        triangles.push({
+          p,
+          e1: q.map((v, a) => v - p[a]),
+          e2: r.map((v, a) => v - p[a]),
+          min,
+          max,
+          center: min.map((v, a) => (v + max[a]) / 2),
+          material: dc.material
+        });
+      }
+    }
+    this.root = triangles.length ? this.build(triangles) : null;
+    const extent = this.root ? Math.hypot(...this.root.max.map((v, a) => v - this.root.min[a])) : 1;
+    this.bias = Math.max(1e-7, extent * 1e-5);
+  }
+  build(triangles) {
+    const min = [Infinity, Infinity, Infinity], max = [-Infinity, -Infinity, -Infinity];
+    for (const t of triangles)
+      for (let a = 0; a < 3; a++) {
+        min[a] = Math.min(min[a], t.min[a]);
+        max[a] = Math.max(max[a], t.max[a]);
+      }
+    if (triangles.length <= 8) return { min, max, triangles };
+    const area = (lo, hi) => {
+      const x = hi[0] - lo[0], y = hi[1] - lo[1], z = hi[2] - lo[2];
+      return 2 * (x * y + y * z + z * x);
+    };
+    let bestCost = Infinity, middle = triangles.length >> 1, best = triangles;
+    for (let axis = 0; axis < 3; axis++) {
+      const sorted = triangles.slice().sort((a, b) => a.center[axis] - b.center[axis]);
+      const suffix = new Float64Array(sorted.length);
+      let lo = [Infinity, Infinity, Infinity], hi = [-Infinity, -Infinity, -Infinity];
+      for (let i = sorted.length - 1; i >= 0; i--) {
+        for (let a = 0; a < 3; a++) {
+          lo[a] = Math.min(lo[a], sorted[i].min[a]);
+          hi[a] = Math.max(hi[a], sorted[i].max[a]);
+        }
+        suffix[i] = area(lo, hi);
+      }
+      lo = [Infinity, Infinity, Infinity];
+      hi = [-Infinity, -Infinity, -Infinity];
+      for (let i = 1; i < sorted.length; i++) {
+        const triangle = sorted[i - 1];
+        for (let a = 0; a < 3; a++) {
+          lo[a] = Math.min(lo[a], triangle.min[a]);
+          hi[a] = Math.max(hi[a], triangle.max[a]);
+        }
+        if (triangle.center[axis] === sorted[i].center[axis]) continue;
+        const cost = area(lo, hi) * i + suffix[i] * (sorted.length - i);
+        if (cost < bestCost) {
+          bestCost = cost;
+          middle = i;
+          best = sorted;
+        }
+      }
+    }
+    return {
+      min,
+      max,
+      left: this.build(best.slice(0, middle)),
+      right: this.build(best.slice(middle))
+    };
+  }
+  occluded(origin, direction, maxDistance = Infinity) {
+    return this.root ? this.intersect(this.root, origin, direction, maxDistance) : false;
+  }
+  /** Closest opaque triangle for one-bounce reflections and diffuse fill. */
+  trace(origin, direction, maxDistance = Infinity) {
+    const state = {
+      hit: null,
+      limit: maxDistance
+    };
+    if (this.root)
+      this.intersect(this.root, origin, direction, maxDistance, state);
+    return state.hit;
+  }
+  intersect(node, o, d, limit, state) {
+    if (state) limit = state.limit;
+    let near = 0, far = limit;
+    for (let a = 0; a < 3; a++) {
+      if (Math.abs(d[a]) < 1e-12) {
+        if (o[a] < node.min[a] || o[a] > node.max[a]) return false;
+        continue;
+      }
+      const t0 = (node.min[a] - o[a]) / d[a], t1 = (node.max[a] - o[a]) / d[a];
+      near = Math.max(near, Math.min(t0, t1));
+      far = Math.min(far, Math.max(t0, t1));
+      if (far < near) return false;
+    }
+    if (node.triangles) {
+      for (const { p, e1, e2, material } of node.triangles) {
+        const px = d[1] * e2[2] - d[2] * e2[1], py = d[2] * e2[0] - d[0] * e2[2], pz = d[0] * e2[1] - d[1] * e2[0];
+        const det = e1[0] * px + e1[1] * py + e1[2] * pz;
+        if (Math.abs(det) < 1e-12) continue;
+        const inv = 1 / det, tx = o[0] - p[0], ty = o[1] - p[1], tz = o[2] - p[2];
+        const u = (tx * px + ty * py + tz * pz) * inv;
+        if (u < 0 || u > 1) continue;
+        const qx = ty * e1[2] - tz * e1[1], qy = tz * e1[0] - tx * e1[2], qz = tx * e1[1] - ty * e1[0];
+        const v = (d[0] * qx + d[1] * qy + d[2] * qz) * inv;
+        if (v < 0 || u + v > 1) continue;
+        const distance = (e2[0] * qx + e2[1] * qy + e2[2] * qz) * inv;
+        if (distance > this.bias * 0.25 && distance < limit) {
+          if (!state) return true;
+          const normal = [
+            e1[1] * e2[2] - e1[2] * e2[1],
+            e1[2] * e2[0] - e1[0] * e2[2],
+            e1[0] * e2[1] - e1[1] * e2[0]
+          ];
+          const length = Math.hypot(...normal) || 1;
+          for (let a = 0; a < 3; a++) normal[a] /= length;
+          if (normal[0] * d[0] + normal[1] * d[1] + normal[2] * d[2] > 0)
+            for (let a = 0; a < 3; a++) normal[a] *= -1;
+          state.hit = {
+            position: [
+              o[0] + d[0] * distance,
+              o[1] + d[1] * distance,
+              o[2] + d[2] * distance
+            ],
+            normal,
+            material,
+            distance
+          };
+          state.limit = limit = distance;
+        }
+      }
+      return false;
+    }
+    if (state) {
+      this.intersect(node.left, o, d, limit, state);
+      this.intersect(node.right, o, d, state.limit, state);
+      return state.hit !== null;
+    }
+    return this.intersect(node.left, o, d, limit) || this.intersect(node.right, o, d, limit);
+  }
+};
+
+// lib/render/StudioLighting.ts
+var dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+var normalize = (v) => {
+  const l = Math.hypot(...v) || 1;
+  return [v[0] / l, v[1] / l, v[2] / l];
+};
+var W = 96;
+var H = 48;
+var SAMPLES = 128;
+var ROUGHNESSES = [0.04, 0.1, 0.18, 0.28, 0.4, 0.55, 0.7, 0.85, 1];
+var lobes = studio_environment_default.lobes.map((l) => ({
+  ...l,
+  direction: normalize(l.direction),
+  color: l.color
+}));
+function radicalInverse(value) {
+  let result = 0, factor = 0.5;
+  while (value) {
+    result += (value & 1) * factor;
+    value >>>= 1;
+    factor *= 0.5;
+  }
+  return result;
+}
+function basis(n) {
+  const t = normalize(Math.abs(n[1]) < 0.999 ? [n[2], 0, -n[0]] : [1, 0, 0]);
+  return [
+    t,
+    [
+      n[1] * t[2] - n[2] * t[1],
+      n[2] * t[0] - n[0] * t[2],
+      n[0] * t[1] - n[1] * t[0]
+    ]
+  ];
+}
+function orient(x, y, z, n, t, b) {
+  return [
+    t[0] * x + b[0] * y + n[0] * z,
+    t[1] * x + b[1] * y + n[1] * z,
+    t[2] * x + b[2] * y + n[2] * z
+  ];
+}
+function sampleTable(table, n) {
+  const x = (Math.atan2(n[2], n[0]) / (2 * Math.PI) + 0.5) * W - 0.5;
+  const y = Math.max(
+    0,
+    Math.min(
+      H - 1,
+      Math.acos(Math.max(-1, Math.min(1, n[1]))) / Math.PI * H - 0.5
+    )
+  );
+  const ix = Math.floor(x), iy = Math.floor(y), fx = x - ix, fy = y - iy;
+  const a = (ix % W + W) % W, b = (a + 1) % W, c = Math.min(H - 1, iy + 1);
+  return (table[iy * W + a] * (1 - fx) + table[iy * W + b] * fx) * (1 - fy) + (table[c * W + a] * (1 - fx) + table[c * W + b] * fx) * fy;
+}
+var cachedTables;
+function getTables() {
+  if (cachedTables) return cachedTables;
+  const diffuse = lobes.map(() => new Float32Array(W * H));
+  const specular = ROUGHNESSES.map(
+    () => lobes.map(() => new Float32Array(W * H))
+  );
+  const diffuseSamples = Array.from({ length: SAMPLES }, (_, i) => {
+    const phi = 2 * Math.PI * radicalInverse(i), r = Math.sqrt((i + 0.5) / SAMPLES);
+    return [r * Math.cos(phi), r * Math.sin(phi), Math.sqrt(1 - r * r)];
+  });
+  const halfSamples = ROUGHNESSES.map(
+    (rough) => Array.from({ length: SAMPLES }, (_, i) => {
+      const phi = 2 * Math.PI * radicalInverse(i), u = (i + 0.5) / SAMPLES, a = rough * rough;
+      const cos = Math.sqrt((1 - u) / (1 + (a * a - 1) * u)), sin = Math.sqrt(1 - cos * cos);
+      return [sin * Math.cos(phi), sin * Math.sin(phi), cos];
+    })
+  );
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const theta = (y + 0.5) / H * Math.PI, phi = ((x + 0.5) / W - 0.5) * 2 * Math.PI;
+      const n = [
+        Math.sin(theta) * Math.cos(phi),
+        Math.cos(theta),
+        Math.sin(theta) * Math.sin(phi)
+      ];
+      const [t, b] = basis(n), index = y * W + x;
+      for (const s of diffuseSamples) {
+        const l = orient(...s, n, t, b);
+        for (let j = 0; j < lobes.length; j++)
+          diffuse[j][index] += Math.exp(lobes[j].sharpness * (dot(l, lobes[j].direction) - 1)) / SAMPLES;
+      }
+      for (let r = 0; r < ROUGHNESSES.length; r++) {
+        let weight = 0;
+        for (const s of halfSamples[r]) {
+          const h = orient(...s, n, t, b), nh = dot(n, h);
+          const l = [
+            2 * nh * h[0] - n[0],
+            2 * nh * h[1] - n[1],
+            2 * nh * h[2] - n[2]
+          ];
+          const nl = Math.max(0, dot(n, l));
+          weight += nl;
+          for (let j = 0; j < lobes.length; j++)
+            specular[r][j][index] += Math.exp(
+              lobes[j].sharpness * (dot(l, lobes[j].direction) - 1)
+            ) * nl;
+        }
+        for (let j = 0; j < lobes.length; j++)
+          specular[r][j][index] /= Math.max(weight, 1e-8);
+      }
+    }
+  const brdf = new Float32Array(64 * 64 * 2);
+  for (let y = 0; y < 64; y++)
+    for (let x = 0; x < 64; x++) {
+      const rough = (y + 0.5) / 64, nv = (x + 0.5) / 64, a = rough * rough, a2 = a * a;
+      const v = [Math.sqrt(1 - nv * nv), 0, nv];
+      let A = 0, B = 0;
+      for (let i = 0; i < SAMPLES; i++) {
+        const u = (i + 0.5) / SAMPLES, phi = 2 * Math.PI * radicalInverse(i);
+        const nh = Math.sqrt((1 - u) / (1 + (a2 - 1) * u)), sin = Math.sqrt(1 - nh * nh);
+        const h = [sin * Math.cos(phi), sin * Math.sin(phi), nh], vh = Math.max(0, dot(v, h));
+        const nl = 2 * vh * nh - nv;
+        if (nl <= 0) continue;
+        const gv = 2 * nv / (nv + Math.sqrt(a2 + (1 - a2) * nv * nv));
+        const gl = 2 * nl / (nl + Math.sqrt(a2 + (1 - a2) * nl * nl));
+        const vis = gv * gl * vh / Math.max(nh * nv, 1e-8), f = (1 - vh) ** 5;
+        A += (1 - f) * vis;
+        B += f * vis;
+      }
+      const index = (y * 64 + x) * 2;
+      brdf[index] = A / SAMPLES;
+      brdf[index + 1] = B / SAMPLES;
+    }
+  cachedTables = { diffuse, specular, brdf };
+  return cachedTables;
+}
+var StudioLighting = class {
+  tables = getTables();
+  occlusion;
+  eye;
+  shadowDirections;
+  constructor(drawCalls, camera) {
+    this.occlusion = new RayOcclusion(drawCalls);
+    const world = mat46.invert(mat46.create(), camera.view);
+    if (!world)
+      throw new Error("Realistic rendering requires an invertible camera view.");
+    this.eye = [world[12], world[13], world[14]];
+    this.shadowDirections = lobes.map((l) => {
+      const [t, b] = basis(l.direction);
+      return Array.from({ length: 8 }, (_, i) => {
+        const u = (i + 0.5) / 8, cos = 1 + Math.log(1 - u) / l.sharpness, sin = Math.sqrt(Math.max(0, 1 - cos * cos)), phi = 2 * Math.PI * radicalInverse(i);
+        return orient(
+          sin * Math.cos(phi),
+          sin * Math.sin(phi),
+          cos,
+          l.direction,
+          t,
+          b
+        );
+      });
+    });
+  }
+  bounceRadiance(hit, incoming) {
+    const metal = Math.max(0, Math.min(1, hit.material.metallicFactor ?? 1));
+    const irradiance = [...studio_environment_default.ambient];
+    for (let j = 0; j < lobes.length; j++) {
+      const value = sampleTable(this.tables.diffuse[j], hit.normal);
+      for (let k = 0; k < 3; k++) irradiance[k] += value * lobes[j].color[k];
+    }
+    const base = hit.material.baseColorFactor;
+    const rough = Math.max(0.04, Math.min(1, hit.material.roughnessFactor ?? 1));
+    const nv = Math.max(1e-3, -dot(hit.normal, incoming));
+    const reflected = [
+      2 * nv * hit.normal[0] + incoming[0],
+      2 * nv * hit.normal[1] + incoming[1],
+      2 * nv * hit.normal[2] + incoming[2]
+    ];
+    let level = 0;
+    while (level < ROUGHNESSES.length - 2 && ROUGHNESSES[level + 1] < rough)
+      level++;
+    const blend = (rough - ROUGHNESSES[level]) / (ROUGHNESSES[level + 1] - ROUGHNESSES[level]);
+    const index = (Math.min(63, Math.floor(rough * 64)) * 64 + Math.min(63, Math.floor(nv * 64))) * 2;
+    const A = this.tables.brdf[index], B = this.tables.brdf[index + 1];
+    const radiance = irradiance.map(
+      (c, k) => c * base[k] * (1 - metal) * 0.96
+    );
+    const pref = [...studio_environment_default.ambient];
+    for (let j = 0; j < lobes.length; j++) {
+      const value = sampleTable(this.tables.specular[level][j], reflected) * (1 - blend) + sampleTable(this.tables.specular[level + 1][j], reflected) * blend;
+      for (let k = 0; k < 3; k++) pref[k] += value * lobes[j].color[k];
+    }
+    for (let k = 0; k < 3; k++)
+      radiance[k] += pref[k] * ((0.04 * (1 - metal) + base[k] * metal) * A + B);
+    return radiance;
+  }
+  shade(position, n, base, material, sampleIndex = 0) {
+    const v = normalize([
+      this.eye[0] - position[0],
+      this.eye[1] - position[1],
+      this.eye[2] - position[2]
+    ]);
+    const nv = Math.max(1e-3, dot(n, v));
+    const reflected = [
+      2 * nv * n[0] - v[0],
+      2 * nv * n[1] - v[1],
+      2 * nv * n[2] - v[2]
+    ];
+    const origin = [
+      position[0] + n[0] * this.occlusion.bias,
+      position[1] + n[1] * this.occlusion.bias,
+      position[2] + n[2] * this.occlusion.bias
+    ];
+    const metal = Math.max(0, Math.min(1, material.metallicFactor ?? 1));
+    const rough = Math.max(0.04, Math.min(1, material.roughnessFactor ?? 1));
+    let level = 0;
+    while (level < ROUGHNESSES.length - 2 && ROUGHNESSES[level + 1] < rough)
+      level++;
+    const blend = (rough - ROUGHNESSES[level]) / (ROUGHNESSES[level + 1] - ROUGHNESSES[level]);
+    const bx = Math.min(63, Math.floor(nv * 64)), by = Math.min(63, Math.floor(rough * 64)), bi = (by * 64 + bx) * 2;
+    const A = this.tables.brdf[bi], B = this.tables.brdf[bi + 1];
+    const f0 = base.map((c) => 0.04 * (1 - metal) + c * metal);
+    const color = base.map(
+      (c, j) => studio_environment_default.ambient[j] * c * (1 - metal) * 0.96
+    );
+    const specColor = f0.map(
+      (c, j) => studio_environment_default.ambient[j] * (c * A + B)
+    );
+    let bits = sampleIndex + 1;
+    bits = Math.imul(bits ^ bits >>> 16, 2146121005);
+    bits = Math.imul(bits ^ bits >>> 15, 2221713035);
+    const hash = ((bits ^ bits >>> 16) >>> 0) / 4294967296;
+    const phase = hash * 2 * Math.PI, cosPhase = Math.cos(phase), sinPhase = Math.sin(phase);
+    for (let j = 0; j < lobes.length; j++) {
+      const dirs = this.shadowDirections[j];
+      let visible = 0, total = 0;
+      const axis = lobes[j].direction;
+      for (const direction of dirs) {
+        const parallel = dot(direction, axis);
+        const cross = [
+          axis[1] * direction[2] - axis[2] * direction[1],
+          axis[2] * direction[0] - axis[0] * direction[2],
+          axis[0] * direction[1] - axis[1] * direction[0]
+        ];
+        const l = direction.map(
+          (value, k) => axis[k] * parallel + (value - axis[k] * parallel) * cosPhase + cross[k] * sinPhase
+        );
+        const weight = Math.max(0, dot(n, l));
+        total += weight;
+        if (weight > 0 && !this.occlusion.occluded(origin, l)) visible += weight;
+      }
+      const visibility = total > 0 ? visible / total : 1;
+      const diffuse = sampleTable(this.tables.diffuse[j], n) * visibility;
+      const specular = (sampleTable(this.tables.specular[level][j], reflected) * (1 - blend) + sampleTable(this.tables.specular[level + 1][j], reflected) * blend) * visibility;
+      for (let k = 0; k < 3; k++) {
+        color[k] += lobes[j].color[k] * base[k] * (1 - metal) * 0.96 * diffuse;
+        specColor[k] += lobes[j].color[k] * (f0[k] * A + B) * specular;
+      }
+    }
+    const [t, b] = basis(n);
+    let blocked = 0;
+    for (let i = 0; i < 4; i++) {
+      const phi = i * Math.PI / 2 + phase, l = orient(
+        0.7 * Math.cos(phi),
+        0.7 * Math.sin(phi),
+        Math.sqrt(0.51),
+        n,
+        t,
+        b
+      );
+      const hit = this.occlusion.trace(origin, l);
+      if (hit) {
+        blocked++;
+        const bounce2 = this.bounceRadiance(hit, l);
+        for (let k = 0; k < 3; k++)
+          color[k] += bounce2[k] * base[k] * (1 - metal) * 0.96 / 4;
+      }
+    }
+    const ao = 1 - blocked / 4;
+    for (let k = 0; k < 3; k++)
+      color[k] -= studio_environment_default.ambient[k] * (1 - ao) * base[k] * (1 - metal) * 0.96;
+    const [rt, rb] = basis(reflected), bounce = [0, 0, 0];
+    let hitWeight = 0, totalWeight = 0;
+    for (let i = 0; i < 8; i++) {
+      const u = (i + 0.5) / 8, phi = 2 * Math.PI * radicalInverse(i) + phase, a = rough * rough;
+      const nh = Math.sqrt((1 - u) / (1 + (a * a - 1) * u)), sin = Math.sqrt(1 - nh * nh);
+      const h = orient(
+        sin * Math.cos(phi),
+        sin * Math.sin(phi),
+        nh,
+        reflected,
+        rt,
+        rb
+      );
+      const l = [
+        2 * nh * h[0] - reflected[0],
+        2 * nh * h[1] - reflected[1],
+        2 * nh * h[2] - reflected[2]
+      ];
+      const weight = Math.max(0, dot(reflected, l));
+      totalWeight += weight;
+      if (weight === 0 || dot(n, l) <= 0) continue;
+      const hit = this.occlusion.trace(origin, l);
+      if (hit) {
+        hitWeight += weight;
+        const radiance = this.bounceRadiance(hit, l);
+        for (let k = 0; k < 3; k++) bounce[k] += radiance[k] * weight;
+      }
+    }
+    for (let k = 0; k < 3; k++)
+      color[k] += specColor[k] * (1 - hitWeight / Math.max(totalWeight, 1e-8)) + bounce[k] / Math.max(totalWeight, 1e-8) * (f0[k] * A + B);
+    return color;
+  }
+};
+
 // lib/render/renderDrawCalls.ts
 function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint8Bitmap) {
   const options = resolveRenderOptions(optionsInput);
@@ -1346,7 +1952,12 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
     options.up,
     options.cameraRotation ?? null
   );
-  const renderer = new SoftwareRenderer(renderWidth, renderHeight, imageFactory);
+  const renderer = new SoftwareRenderer(
+    renderWidth,
+    renderHeight,
+    imageFactory,
+    options.realistic
+  );
   let rgb = null;
   if (options.backgroundColor) {
     if (typeof options.backgroundColor === "string") {
@@ -1407,6 +2018,7 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
   const blendDraws = allDrawCalls.filter(
     (dc) => (dc.material.alphaMode ?? "OPAQUE") === "BLEND"
   );
+  const studio = options.realistic ? new StudioLighting(allDrawCalls, camera) : void 0;
   const renderGroup = (dcs) => {
     for (const dc of dcs) {
       if (dc.mode === 1) {
@@ -1418,7 +2030,8 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
           { dir: options.lightDir, ambient: options.ambient },
           dc.material,
           options.cull,
-          options.gamma
+          options.gamma,
+          studio
         );
       }
     }
@@ -1442,6 +2055,7 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
     });
   }
   renderGroup(blendDraws);
+  renderer.denoise(options.gamma);
   for (const dc of drawCalls) {
     if (!dc.showHiddenEdges) continue;
     const edgeDrawCall = createEdgeDrawCall(dc);
@@ -1480,7 +2094,7 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
 }
 
 // lib/gltf/createInfiniteGrid.ts
-import { mat4 as mat46 } from "gl-matrix";
+import { mat4 as mat47 } from "gl-matrix";
 function createInfiniteGrid(options = {}) {
   const cellSize = options.cellSize ?? 1;
   const sectionSize = options.sectionSize ?? 10;
@@ -1504,9 +2118,9 @@ function createInfiniteGrid(options = {}) {
     size
   ]);
   const indices = new Uint32Array([0, 1, 2, 0, 2, 3]);
-  const model = mat46.create();
+  const model = mat47.create();
   const offset = options.offset ?? {};
-  mat46.fromTranslation(model, [offset.x ?? 0, offset.y ?? 0, offset.z ?? 0]);
+  mat47.fromTranslation(model, [offset.x ?? 0, offset.y ?? 0, offset.z ?? 0]);
   return {
     positions,
     indices,
@@ -1531,7 +2145,7 @@ function createInfiniteGrid(options = {}) {
 }
 
 // lib/gltf/createSceneFromGLTF.ts
-import { mat4 as mat47 } from "gl-matrix";
+import { mat4 as mat48 } from "gl-matrix";
 var COMPONENT_INFO = {
   5120: {
     name: "BYTE",
@@ -1738,17 +2352,17 @@ function readIndices(ctx, accessorIndex) {
 }
 function nodeLocalMatrix(node) {
   if (node.matrix) {
-    const m2 = mat47.create();
+    const m2 = mat48.create();
     for (let i = 0; i < 16; i++) m2[i] = node.matrix[i];
     return m2;
   }
   const translation = node.translation || [0, 0, 0];
   const rotation = node.rotation || [0, 0, 0, 1];
   const scale = node.scale || [1, 1, 1];
-  const m = mat47.create();
-  const tmp = mat47.create();
-  mat47.fromRotationTranslationScale(tmp, rotation, translation, scale);
-  mat47.copy(m, tmp);
+  const m = mat48.create();
+  const tmp = mat48.create();
+  mat48.fromRotationTranslationScale(tmp, rotation, translation, scale);
+  mat48.copy(m, tmp);
   return m;
 }
 function getMaterial(gltf, textures, images, materialIndex) {
@@ -1769,6 +2383,8 @@ function getMaterial(gltf, textures, images, materialIndex) {
   return {
     baseColorFactor: factor,
     baseColorTexture: texImg,
+    metallicFactor: pbr.metallicFactor ?? 1,
+    roughnessFactor: pbr.roughnessFactor ?? 1,
     alphaMode,
     alphaCutoff
   };
@@ -1786,8 +2402,8 @@ function createSceneFromGLTF(gltf, resources) {
     const node = nodes[nodeIndex];
     if (!node) return;
     const local = nodeLocalMatrix(node);
-    const world = mat47.create();
-    mat47.multiply(world, parentMatrix, local);
+    const world = mat48.create();
+    mat48.multiply(world, parentMatrix, local);
     if (Number.isInteger(node.mesh)) {
       const mesh = meshes[node.mesh];
       if (mesh) {
@@ -1826,7 +2442,7 @@ function createSceneFromGLTF(gltf, resources) {
       traverse(childIndex, world);
     }
   }
-  const identity = mat47.create();
+  const identity = mat48.create();
   for (const rootIndex of scene.nodes || []) {
     traverse(rootIndex, identity);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poppygl",
   "main": "dist/index.js",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/poppygl.git"
@@ -12,7 +12,7 @@
   "scripts": {
     "start": "cosmos",
     "build:site": "cosmos-export",
-    "build": "tsup-node ./lib/index.ts --format esm --dts",
+    "build": "tsup-node ./lib/index.ts --format esm --dts --external @jscad/modeling",
     "format": "biome format --write .",
     "format:check": "biome format .",
     "test": "bun test",
@@ -21,10 +21,12 @@
   "type": "module",
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
+    "@jscad/modeling": "2.13.0",
     "@playwright/test": "^1.60.0",
     "@tscircuit/alphabet": "0.0.23",
     "@types/bun": "^1.2.23",
     "@types/readable-stream": "^4.0.21",
+    "jscad-electronics": "0.0.187",
     "looks-same": "^10.0.1",
     "react": "^19.1.1",
     "react-cosmos": "^7.0.0",