poppygl 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -10,26 +10,11 @@ interface BitmapLike {
 type ImageFactory = (width: number, height: number) => BitmapLike;
 declare const createUint8Bitmap: ImageFactory;
 
-declare const DEFAULT_LIGHT_DIR: readonly [-0.4, -0.9, -0.2];
-interface RenderOptions {
-    width: number;
-    height: number;
-    fov: number;
-    cull: boolean;
-    gamma: boolean;
-    ambient: number;
-    lightDir: readonly [number, number, number];
-    camPos?: readonly [number, number, number] | null;
-    lookAt?: readonly [number, number, number] | null;
-    backgroundColor?: readonly [number, number, number] | null;
-}
-type RenderOptionsInput = Partial<RenderOptions>;
-declare const DEFAULT_RENDER_OPTIONS: RenderOptions;
-declare function getDefaultRenderOptions(): RenderOptions;
-
 interface Material {
     baseColorFactor: [number, number, number, number];
     baseColorTexture: BitmapLike | null;
+    alphaMode?: "OPAQUE" | "MASK" | "BLEND";
+    alphaCutoff?: number;
 }
 interface DrawCall {
     positions: Float32Array;
@@ -39,6 +24,17 @@ interface DrawCall {
     model: mat4;
     material: Material;
     colors?: Float32Array | null;
+    mode?: number;
+}
+interface GridOptions {
+    size?: number | readonly [number, number, number];
+    divisions?: number;
+    color?: readonly [number, number, number];
+    offset?: Partial<{
+        x: number;
+        y: number;
+        z: number;
+    }>;
 }
 interface GLTFResources {
     buffers: Uint8Array[];
@@ -49,6 +45,24 @@ interface GLTFScene {
     gltf: any;
 }
 
+declare const DEFAULT_LIGHT_DIR: readonly [-0.4, -0.9, -0.2];
+interface RenderOptions {
+    width: number;
+    height: number;
+    fov: number;
+    cull: boolean;
+    gamma: boolean;
+    ambient: number;
+    lightDir: readonly [number, number, number];
+    camPos?: readonly [number, number, number] | null;
+    lookAt?: readonly [number, number, number] | null;
+    backgroundColor?: readonly [number, number, number] | null;
+    grid?: boolean | GridOptions;
+}
+type RenderOptionsInput = Partial<RenderOptions>;
+declare const DEFAULT_RENDER_OPTIONS: RenderOptions;
+declare function getDefaultRenderOptions(): RenderOptions;
+
 interface Camera {
     view: mat4;
     proj: mat4;
@@ -64,6 +78,8 @@ declare function renderDrawCalls(drawCalls: DrawCall[], optionsInput?: RenderOpt
 
 declare function resolveRenderOptions(options?: RenderOptionsInput): RenderOptions;
 
+declare function createGrid(options?: GridOptions): DrawCall;
+
 type GLTF = any;
 declare function createSceneFromGLTF(gltf: GLTF, resources: GLTFResources): GLTFScene;
 
@@ -108,6 +124,7 @@ declare class SoftwareRenderer {
     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;
+    drawLines(mesh: DrawCall, camera: Camera, gammaOut?: boolean): 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;
@@ -128,4 +145,4 @@ declare function renderGLTFToPNGBuffer(gltfPathOrString: string, options?: Rende
 
 declare function renderSceneFromGLTF(scene: GLTFScene, options?: RenderOptionsInput, imageFactory?: ImageFactory): RenderResult;
 
-export { type BitmapLike, type Camera, DEFAULT_LIGHT_DIR, DEFAULT_RENDER_OPTIONS, type DrawCall, type FetchLike, type GLTFResources, type GLTFScene, type ImageFactory, type LightSettings, type LoadGLTFWithResourcesFromURLOptions, type Material, type MutableRGBA, type RGBA, type RenderGLTFToPNGBufferFromGLBBufferOptions, type RenderGLTFToPNGBufferFromURLOptions, type RenderOptions, type RenderOptionsInput, type RenderResult, SoftwareRenderer, bufferFromDataURI, buildCamera, computeSmoothNormals, computeWorldAABB, createSceneFromGLTF, createUint8Bitmap, decodeImageFromBuffer, encodePNGToBuffer, getDefaultRenderOptions, isJPG, isPNG, loadGLTFWithResourcesFromURL, pureImageFactory, renderDrawCalls, renderGLTFToPNGBuffer, renderGLTFToPNGBufferFromGLBBuffer, renderGLTFToPNGBufferFromURL, renderSceneFromGLTF, resolveRenderOptions };
+export { type BitmapLike, type Camera, DEFAULT_LIGHT_DIR, DEFAULT_RENDER_OPTIONS, type DrawCall, type FetchLike, type GLTFResources, type GLTFScene, type GridOptions, type ImageFactory, type LightSettings, type LoadGLTFWithResourcesFromURLOptions, type Material, type MutableRGBA, type RGBA, type RenderGLTFToPNGBufferFromGLBBufferOptions, type RenderGLTFToPNGBufferFromURLOptions, type RenderOptions, type RenderOptionsInput, type RenderResult, SoftwareRenderer, bufferFromDataURI, buildCamera, computeSmoothNormals, computeWorldAABB, createGrid, createSceneFromGLTF, createUint8Bitmap, decodeImageFromBuffer, encodePNGToBuffer, getDefaultRenderOptions, isJPG, isPNG, loadGLTFWithResourcesFromURL, pureImageFactory, renderDrawCalls, renderGLTFToPNGBuffer, renderGLTFToPNGBufferFromGLBBuffer, renderGLTFToPNGBufferFromURL, renderSceneFromGLTF, resolveRenderOptions };

package/dist/index.js

@@ -23,6 +23,12 @@ function computeWorldAABB(drawCalls) {
       max[2] = Math.max(max[2], z);
     }
   }
+  if (!isFinite(min[0])) {
+    return {
+      min: [-1, -1, -1],
+      max: [1, 1, 1]
+    };
+  }
   return { min, max };
 }
 
@@ -76,6 +82,49 @@ function buildCamera(drawCalls, width, height, fovDeg, camPos, lookAt) {
   return { view, proj };
 }
 
+// lib/gltf/createGrid.ts
+import { mat4 as mat42 } from "gl-matrix";
+function createGrid(options = {}) {
+  const size = options.size ?? 10;
+  const sizeX = typeof size === "number" ? size : size[0];
+  const sizeZ = typeof size === "number" ? size : size[2];
+  const divisions = options.divisions ?? 10;
+  const color = options.color ?? [0.5, 0.5, 0.5];
+  const offset = { x: 0, y: 0, z: 0, ...options.offset };
+  const positions = [];
+  const indices = [];
+  let vertexIndex = 0;
+  const halfSizeX = sizeX / 2;
+  const halfSizeZ = sizeZ / 2;
+  const stepX = sizeX / divisions;
+  const stepZ = sizeZ / divisions;
+  for (let i = 0; i <= divisions; i++) {
+    const pX = -halfSizeX + i * stepX;
+    const pZ = -halfSizeZ + i * stepZ;
+    positions.push(pX, 0, -halfSizeZ);
+    positions.push(pX, 0, halfSizeZ);
+    indices.push(vertexIndex++, vertexIndex++);
+    positions.push(-halfSizeX, 0, pZ);
+    positions.push(halfSizeX, 0, pZ);
+    indices.push(vertexIndex++, vertexIndex++);
+  }
+  const model = mat42.create();
+  mat42.fromTranslation(model, [offset.x, offset.y, offset.z]);
+  return {
+    positions: new Float32Array(positions),
+    indices: new Uint32Array(indices),
+    normals: null,
+    uvs: null,
+    model,
+    material: {
+      baseColorFactor: [...color, 1],
+      baseColorTexture: null
+    },
+    mode: 1
+    // 1 = LINES
+  };
+}
+
 // lib/image/createUint8Bitmap.ts
 var createUint8Bitmap = (width, height) => ({
   width,
@@ -95,14 +144,15 @@ var DEFAULT_RENDER_OPTIONS = {
   lightDir: DEFAULT_LIGHT_DIR,
   camPos: null,
   lookAt: null,
-  backgroundColor: null
+  backgroundColor: null,
+  grid: false
 };
 function getDefaultRenderOptions() {
   return { ...DEFAULT_RENDER_OPTIONS };
 }
 
 // lib/render/SoftwareRenderer.ts
-import { mat3, mat4 as mat42, vec3 as vec32, vec4 as vec42 } from "gl-matrix";
+import { mat3, mat4 as mat43, vec3 as vec32, vec4 as vec42 } from "gl-matrix";
 
 // lib/gltf/computeSmoothNormals.ts
 function computeSmoothNormals(positions, indices) {
@@ -218,6 +268,96 @@ var SoftwareRenderer = class {
     this.buffer[idx + 2] = b;
     this.buffer[idx + 3] = a;
   }
+  drawLines(mesh, camera, gammaOut = true) {
+    const { positions, indices, model, material } = mesh;
+    if (!indices) return;
+    const view = camera.view;
+    const proj = camera.proj;
+    const mvp = mat43.create();
+    mat43.multiply(mvp, proj, mat43.multiply(mat43.create(), view, model));
+    const vertexCount = positions.length / 3 | 0;
+    const vScreen = new Array(vertexCount);
+    const vInvW = new Float32Array(vertexCount);
+    const vNDCz = new Float32Array(vertexCount);
+    for (let i = 0; i < vertexCount; i++) {
+      const p = vec42.fromValues(
+        positions[i * 3 + 0],
+        positions[i * 3 + 1],
+        positions[i * 3 + 2],
+        1
+      );
+      const c = vec42.create();
+      vec42.transformMat4(c, p, mvp);
+      const invW = 1 / c[3];
+      vInvW[i] = invW;
+      if (!isFinite(invW)) {
+        vScreen[i] = [NaN, NaN];
+        vNDCz[i] = NaN;
+        continue;
+      }
+      const ndcX = c[0] * invW;
+      const ndcY = c[1] * invW;
+      const ndcZ = c[2] * invW;
+      const sx = (ndcX * 0.5 + 0.5) * (this.width - 1);
+      const sy = (1 - (ndcY * 0.5 + 0.5)) * (this.height - 1);
+      vScreen[i] = [sx, sy];
+      vNDCz[i] = ndcZ;
+    }
+    let [r, g, b, a] = material.baseColorFactor;
+    if (gammaOut) {
+      r = srgbEncodeLinear01(clamp(r, 0, 1));
+      g = srgbEncodeLinear01(clamp(g, 0, 1));
+      b = srgbEncodeLinear01(clamp(b, 0, 1));
+    } else {
+      r = clamp(r, 0, 1);
+      g = clamp(g, 0, 1);
+      b = clamp(b, 0, 1);
+    }
+    const r255 = r * 255 | 0;
+    const g255 = g * 255 | 0;
+    const b255 = b * 255 | 0;
+    const a255 = clamp(a, 0, 1) * 255 | 0;
+    for (let i = 0; i < indices.length; i += 2) {
+      const i0 = indices[i + 0];
+      const i1 = indices[i + 1];
+      const v0s = vScreen[i0];
+      const v1s = vScreen[i1];
+      const z0_ndc = vNDCz[i0];
+      const z1_ndc = vNDCz[i1];
+      if (isNaN(v0s[0]) || isNaN(v1s[0])) continue;
+      const z0_01 = z0_ndc * 0.5 + 0.5;
+      const z1_01 = z1_ndc * 0.5 + 0.5;
+      if (z0_01 < 0 && z1_01 < 0 || z0_01 > 1 && z1_01 > 1) continue;
+      const x0 = Math.round(v0s[0]);
+      const y0 = Math.round(v0s[1]);
+      const x1 = Math.round(v1s[0]);
+      const y1 = Math.round(v1s[1]);
+      const dx = x1 - x0;
+      const dy = y1 - y0;
+      const steps = Math.max(Math.abs(dx), Math.abs(dy));
+      if (steps === 0) continue;
+      const xinc = dx / steps;
+      const yinc = dy / steps;
+      const zinc = (z1_01 - z0_01) / steps;
+      let x = x0;
+      let y = y0;
+      let z = z0_01;
+      for (let k = 0; k <= steps; k++) {
+        const xi = Math.round(x);
+        const yi = Math.round(y);
+        if (xi >= 0 && xi < this.width && yi >= 0 && yi < this.height && z >= 0 && z <= 1) {
+          const di = yi * this.width + xi;
+          if (z < this.depth[di]) {
+            this.depth[di] = z;
+            this.setPixel(xi, yi, r255, g255, b255, a255);
+          }
+        }
+        x += xinc;
+        y += yinc;
+        z += zinc;
+      }
+    }
+  }
   sampleTextureNearest(img, u, v) {
     if (!img) return [1, 1, 1, 1];
     const x = clamp(Math.floor(u * (img.width - 1)), 0, img.width - 1);
@@ -247,8 +387,8 @@ var SoftwareRenderer = class {
     const { positions, normals, uvs, indices, model, colors } = mesh;
     const view = camera.view;
     const proj = camera.proj;
-    const mvp = mat42.create();
-    mat42.multiply(mvp, proj, mat42.multiply(mat42.create(), view, model));
+    const mvp = mat43.create();
+    mat43.multiply(mvp, proj, mat43.multiply(mat43.create(), view, model));
     const normalMat = mat3.create();
     mat3.normalFromMat4(normalMat, model);
     const vertexCount = positions.length / 3 | 0;
@@ -404,6 +544,13 @@ var SoftwareRenderer = class {
           let g = baseColor[1] * lit;
           let b = baseColor[2] * lit;
           let a = baseColor[3];
+          const alphaMode = material.alphaMode ?? "OPAQUE";
+          const alphaCutoff = material.alphaCutoff ?? 0.5;
+          if (alphaMode === "MASK" && a < alphaCutoff) continue;
+          const shouldWriteDepth = alphaMode !== "BLEND";
+          if (shouldWriteDepth) {
+            depth[di] = z01;
+          }
           if (gammaOut) {
             r = srgbEncodeLinear01(clamp(r, 0, 1));
             g = srgbEncodeLinear01(clamp(g, 0, 1));
@@ -413,13 +560,29 @@ var SoftwareRenderer = class {
             g = clamp(g, 0, 1);
             b = clamp(b, 0, 1);
           }
+          const dstIdx = (y * this.width + x) * 4;
+          const dstR = (this.buffer[dstIdx + 0] ?? 0) / 255;
+          const dstG = (this.buffer[dstIdx + 1] ?? 0) / 255;
+          const dstB = (this.buffer[dstIdx + 2] ?? 0) / 255;
+          const dstA = (this.buffer[dstIdx + 3] ?? 0) / 255;
+          let outR = r;
+          let outG = g;
+          let outB = b;
+          let outA = a;
+          if (alphaMode === "BLEND" && a < 1) {
+            const oneMinusA = 1 - a;
+            outR = r * a + dstR * oneMinusA;
+            outG = g * a + dstG * oneMinusA;
+            outB = b * a + dstB * oneMinusA;
+            outA = a + dstA * oneMinusA;
+          }
           this.setPixel(
             x,
             y,
-            r * 255 | 0,
-            g * 255 | 0,
-            b * 255 | 0,
-            clamp(a, 0, 1) * 255 | 0
+            clamp(outR, 0, 1) * 255 | 0,
+            clamp(outG, 0, 1) * 255 | 0,
+            clamp(outB, 0, 1) * 255 | 0,
+            clamp(outA, 0, 1) * 255 | 0
           );
         }
       }
@@ -468,21 +631,66 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
   } else {
     renderer.clear([0, 0, 0, 0]);
   }
-  for (const dc of drawCalls) {
-    renderer.drawMesh(
-      dc,
-      camera,
-      { dir: options.lightDir, ambient: options.ambient },
-      dc.material,
-      options.cull,
-      options.gamma
-    );
+  const allDrawCalls = [...drawCalls];
+  if (options.grid) {
+    const userGridOptions = typeof options.grid === "boolean" ? {} : options.grid;
+    const aabb = computeWorldAABB(drawCalls);
+    const sizeX = aabb.max[0] - aabb.min[0];
+    const sizeZ = aabb.max[2] - aabb.min[2];
+    const maxSize = Math.max(sizeX, sizeZ);
+    const defaultSize = Math.ceil(maxSize * 1.2 / 2) * 2;
+    const defaultOffset = {
+      x: (aabb.min[0] + aabb.max[0]) / 2,
+      y: aabb.min[1],
+      z: (aabb.min[2] + aabb.max[2]) / 2
+    };
+    const defaultGridOptions = {
+      size: defaultSize > 0 ? defaultSize : 10,
+      offset: defaultOffset
+    };
+    const finalGridOptions = {
+      ...defaultGridOptions,
+      ...userGridOptions,
+      offset: {
+        ...defaultGridOptions.offset,
+        ...userGridOptions.offset
+      }
+    };
+    allDrawCalls.push(createGrid(finalGridOptions));
   }
+  const opaqueDraws = allDrawCalls.filter(
+    (dc) => (dc.material.alphaMode ?? "OPAQUE") === "OPAQUE"
+  );
+  const maskDraws = allDrawCalls.filter(
+    (dc) => (dc.material.alphaMode ?? "OPAQUE") === "MASK"
+  );
+  const blendDraws = allDrawCalls.filter(
+    (dc) => (dc.material.alphaMode ?? "OPAQUE") === "BLEND"
+  );
+  const renderGroup = (dcs) => {
+    for (const dc of dcs) {
+      if (dc.mode === 1) {
+        renderer.drawLines(dc, camera, options.gamma);
+      } else {
+        renderer.drawMesh(
+          dc,
+          camera,
+          { dir: options.lightDir, ambient: options.ambient },
+          dc.material,
+          options.cull,
+          options.gamma
+        );
+      }
+    }
+  };
+  renderGroup(opaqueDraws);
+  renderGroup(maskDraws);
+  renderGroup(blendDraws);
   return { bitmap: renderer.bitmap, camera, options };
 }
 
 // lib/gltf/createSceneFromGLTF.ts
-import { mat4 as mat43 } from "gl-matrix";
+import { mat4 as mat44 } from "gl-matrix";
 var COMPONENT_INFO = {
   5120: {
     name: "BYTE",
@@ -680,17 +888,17 @@ function readIndices(ctx, accessorIndex) {
 }
 function nodeLocalMatrix(node) {
   if (node.matrix) {
-    const m2 = mat43.create();
+    const m2 = mat44.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 = mat43.create();
-  const tmp = mat43.create();
-  mat43.fromRotationTranslationScale(tmp, rotation, translation, scale);
-  mat43.copy(m, tmp);
+  const m = mat44.create();
+  const tmp = mat44.create();
+  mat44.fromRotationTranslationScale(tmp, rotation, translation, scale);
+  mat44.copy(m, tmp);
   return m;
 }
 function getMaterial(gltf, textures, images, materialIndex) {
@@ -706,7 +914,14 @@ function getMaterial(gltf, textures, images, materialIndex) {
       texImg = images[imageIndex] || null;
     }
   }
-  return { baseColorFactor: factor, baseColorTexture: texImg };
+  const alphaMode = typeof material.alphaMode === "string" ? material.alphaMode : "OPAQUE";
+  const alphaCutoff = typeof material.alphaCutoff === "number" ? material.alphaCutoff : 0.5;
+  return {
+    baseColorFactor: factor,
+    baseColorTexture: texImg,
+    alphaMode,
+    alphaCutoff
+  };
 }
 function createSceneFromGLTF(gltf, resources) {
   const ctx = { gltf, buffers: resources.buffers };
@@ -721,8 +936,8 @@ function createSceneFromGLTF(gltf, resources) {
     const node = nodes[nodeIndex];
     if (!node) return;
     const local = nodeLocalMatrix(node);
-    const world = mat43.create();
-    mat43.multiply(world, parentMatrix, local);
+    const world = mat44.create();
+    mat44.multiply(world, parentMatrix, local);
     if (Number.isInteger(node.mesh)) {
       const mesh = meshes[node.mesh];
       if (mesh) {
@@ -760,7 +975,7 @@ function createSceneFromGLTF(gltf, resources) {
       traverse(childIndex, world);
     }
   }
-  const identity = mat43.create();
+  const identity = mat44.create();
   for (const rootIndex of scene.nodes || []) {
     traverse(rootIndex, identity);
   }
@@ -1163,6 +1378,7 @@ export {
   buildCamera,
   computeSmoothNormals,
   computeWorldAABB,
+  createGrid,
   createSceneFromGLTF,
   createUint8Bitmap,
   decodeImageFromBuffer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poppygl",
   "main": "dist/index.js",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/poppygl.git"