poppygl 0.0.13 → 0.0.15

package/dist/index.d.ts

@@ -13,6 +13,8 @@ declare const createUint8Bitmap: ImageFactory;
 interface Material {
     baseColorFactor: [number, number, number, number];
     baseColorTexture: BitmapLike | null;
+    alphaMode?: "OPAQUE" | "MASK" | "BLEND";
+    alphaCutoff?: number;
 }
 interface DrawCall {
     positions: Float32Array;
@@ -33,6 +35,13 @@ interface GridOptions {
         y: number;
         z: number;
     }>;
+    infiniteGrid?: boolean;
+    cellSize?: number;
+    sectionSize?: number;
+    fadeDistance?: number;
+    fadeStrength?: number;
+    gridColor?: readonly [number, number, number];
+    sectionColor?: readonly [number, number, number];
 }
 interface GLTFResources {
     buffers: Uint8Array[];
@@ -78,6 +87,20 @@ declare function resolveRenderOptions(options?: RenderOptionsInput): RenderOptio
 
 declare function createGrid(options?: GridOptions): DrawCall;
 
+/**
+ * Creates an infinite grid that matches the appearance of the 3d-viewer reference.
+ * This grid uses a special rendering approach with procedural generation and fading.
+ */
+declare function createInfiniteGrid(options?: GridOptions): DrawCall & {
+    isInfiniteGrid: boolean;
+    cellSize: number;
+    sectionSize: number;
+    fadeDistance: number;
+    fadeStrength: number;
+    gridColor: readonly [number, number, number];
+    sectionColor: readonly [number, number, number];
+};
+
 type GLTF = any;
 declare function createSceneFromGLTF(gltf: GLTF, resources: GLTFResources): GLTFScene;
 
@@ -128,6 +151,20 @@ declare class SoftwareRenderer {
     drawMesh(mesh: DrawCall, camera: Camera, light: LightSettings, material: Material, cullBackFaces?: boolean, gammaOut?: boolean): void;
 }
 
+/**
+ * Draws an infinite grid with fade-out effect matching 3d-viewer appearance
+ */
+declare function drawInfiniteGrid(software_renderer: SoftwareRenderer, params: {
+    camera: Camera;
+    cell_size?: number;
+    section_size?: number;
+    fade_distance?: number;
+    fade_strength?: number;
+    grid_color?: readonly [number, number, number];
+    section_color?: readonly [number, number, number];
+    gamma_out?: boolean;
+}): void;
+
 declare const pureImageFactory: ImageFactory;
 
 declare function encodePNGToBuffer(image: BitmapLike): Promise<Buffer>;
@@ -143,4 +180,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 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 };
+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, createInfiniteGrid, createSceneFromGLTF, createUint8Bitmap, decodeImageFromBuffer, drawInfiniteGrid, encodePNGToBuffer, getDefaultRenderOptions, isJPG, isPNG, loadGLTFWithResourcesFromURL, pureImageFactory, renderDrawCalls, renderGLTFToPNGBuffer, renderGLTFToPNGBufferFromGLBBuffer, renderGLTFToPNGBufferFromURL, renderSceneFromGLTF, resolveRenderOptions };

package/dist/index.js

@@ -544,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));
@@ -553,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
           );
         }
       }
@@ -581,6 +604,142 @@ function resolveRenderOptions(options = {}) {
   };
 }
 
+// lib/render/drawInfiniteGrid.ts
+import { mat4 as mat44, vec4 as vec43 } from "gl-matrix";
+function computeGridLineIntensity(params) {
+  const rx = params.world_x / params.cell_size;
+  const rz = params.world_z / params.cell_size;
+  const fract_x = rx - Math.floor(rx + 0.5);
+  const fract_z = rz - Math.floor(rz + 0.5);
+  const grid_x = Math.abs(fract_x);
+  const grid_z = Math.abs(fract_z);
+  const pixel_size_in_world = params.dist / Math.min(params.screen_width, params.screen_height);
+  const fwidth_x = pixel_size_in_world / params.cell_size;
+  const fwidth_z = pixel_size_in_world / params.cell_size;
+  const line_x = grid_x / (fwidth_x + 1e-4);
+  const line_z = grid_z / (fwidth_z + 1e-4);
+  const line = Math.min(line_x, line_z);
+  return 1 - Math.min(line * params.line_thickness_multiplier, 1);
+}
+function computeGridFadeAlpha(params) {
+  const fade_start = params.fade_distance;
+  const fade_end = params.fade_distance * params.fade_strength;
+  return 1 - Math.min(
+    1,
+    Math.max(0, (params.dist - fade_start) / (fade_end - fade_start))
+  );
+}
+function drawInfiniteGrid(software_renderer, params) {
+  const cell_size = params.cell_size ?? 1;
+  const section_size = params.section_size ?? 10;
+  const fade_distance = params.fade_distance ?? 100;
+  const fade_strength = params.fade_strength ?? 1.5;
+  const grid_color = params.grid_color ?? [0.93, 0.93, 0.93];
+  const section_color = params.section_color ?? [0.8, 0.8, 1];
+  const gamma_out = params.gamma_out ?? true;
+  const camera = params.camera;
+  const view = camera.view;
+  const proj = camera.proj;
+  const inv_view = mat44.create();
+  mat44.invert(inv_view, view);
+  const cam_pos_x = inv_view[12];
+  const cam_pos_y = inv_view[13];
+  const cam_pos_z = inv_view[14];
+  const vp = mat44.create();
+  mat44.multiply(vp, proj, view);
+  const inv_vp = mat44.create();
+  mat44.invert(inv_vp, vp);
+  for (let y = 0; y < software_renderer.height; y++) {
+    for (let x = 0; x < software_renderer.width; x++) {
+      const ndc_x = x / (software_renderer.width - 1) * 2 - 1;
+      const ndc_y = 1 - y / (software_renderer.height - 1) * 2;
+      const near_point = vec43.fromValues(ndc_x, ndc_y, -1, 1);
+      const far_point = vec43.fromValues(ndc_x, ndc_y, 1, 1);
+      vec43.transformMat4(near_point, near_point, inv_vp);
+      vec43.transformMat4(far_point, far_point, inv_vp);
+      near_point[0] /= near_point[3];
+      near_point[1] /= near_point[3];
+      near_point[2] /= near_point[3];
+      far_point[0] /= far_point[3];
+      far_point[1] /= far_point[3];
+      far_point[2] /= far_point[3];
+      const ray_dir_x = far_point[0] - near_point[0];
+      const ray_dir_y = far_point[1] - near_point[1];
+      const ray_dir_z = far_point[2] - near_point[2];
+      if (Math.abs(ray_dir_y) < 1e-6) continue;
+      const t = -near_point[1] / ray_dir_y;
+      if (t < 0 || t > 1) continue;
+      const world_x = near_point[0] + t * ray_dir_x;
+      const world_z = near_point[2] + t * ray_dir_z;
+      const dx = world_x - cam_pos_x;
+      const dz = world_z - cam_pos_z;
+      const dist = Math.sqrt(dx * dx + dz * dz);
+      const alpha = computeGridFadeAlpha({
+        dist,
+        fade_distance,
+        fade_strength
+      });
+      if (alpha <= 0) continue;
+      const g1 = computeGridLineIntensity({
+        world_x,
+        world_z,
+        cell_size,
+        dist,
+        screen_width: software_renderer.width,
+        screen_height: software_renderer.height,
+        line_thickness_multiplier: 0.8
+      });
+      const g2 = computeGridLineIntensity({
+        world_x,
+        world_z,
+        cell_size: section_size,
+        dist,
+        screen_width: software_renderer.width,
+        screen_height: software_renderer.height,
+        line_thickness_multiplier: 0.5
+        // Thicker section lines
+      });
+      const grid_strength = Math.max(g1, g2);
+      if (grid_strength <= 0) continue;
+      const final_r = grid_color[0] * (1 - g2) + section_color[0] * g2;
+      const final_g = grid_color[1] * (1 - g2) + section_color[1] * g2;
+      const final_b = grid_color[2] * (1 - g2) + section_color[2] * g2;
+      const final_alpha = grid_strength * alpha;
+      if (final_alpha <= 0.01) continue;
+      let out_r = final_r;
+      let out_g = final_g;
+      let out_b = final_b;
+      if (gamma_out) {
+        out_r = srgbEncodeLinear01(clamp(out_r, 0, 1));
+        out_g = srgbEncodeLinear01(clamp(out_g, 0, 1));
+        out_b = srgbEncodeLinear01(clamp(out_b, 0, 1));
+      } else {
+        out_r = clamp(out_r, 0, 1);
+        out_g = clamp(out_g, 0, 1);
+        out_b = clamp(out_b, 0, 1);
+      }
+      const dst_idx = (y * software_renderer.width + x) * 4;
+      const dst_r = (software_renderer.buffer[dst_idx + 0] ?? 0) / 255;
+      const dst_g = (software_renderer.buffer[dst_idx + 1] ?? 0) / 255;
+      const dst_b = (software_renderer.buffer[dst_idx + 2] ?? 0) / 255;
+      const dst_a = (software_renderer.buffer[dst_idx + 3] ?? 0) / 255;
+      const one_minus_a = 1 - final_alpha;
+      const blend_r = out_r * final_alpha + dst_r * one_minus_a;
+      const blend_g = out_g * final_alpha + dst_g * one_minus_a;
+      const blend_b = out_b * final_alpha + dst_b * one_minus_a;
+      const blend_a = final_alpha + dst_a * one_minus_a;
+      software_renderer.setPixel(
+        x,
+        y,
+        clamp(blend_r, 0, 1) * 255 | 0,
+        clamp(blend_g, 0, 1) * 255 | 0,
+        clamp(blend_b, 0, 1) * 255 | 0,
+        clamp(blend_a, 0, 1) * 255 | 0
+      );
+    }
+  }
+}
+
 // lib/render/renderDrawCalls.ts
 function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint8Bitmap) {
   const options = resolveRenderOptions(optionsInput);
@@ -609,51 +768,133 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
     renderer.clear([0, 0, 0, 0]);
   }
   const allDrawCalls = [...drawCalls];
+  let infiniteGridOptions = null;
   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));
-  }
-  for (const dc of allDrawCalls) {
-    if (dc.mode === 1) {
-      renderer.drawLines(dc, camera, options.gamma);
+    if (userGridOptions.infiniteGrid) {
+      infiniteGridOptions = userGridOptions;
     } else {
-      renderer.drawMesh(
-        dc,
-        camera,
-        { dir: options.lightDir, ambient: options.ambient },
-        dc.material,
-        options.cull,
-        options.gamma
-      );
+      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
+        );
+      }
+    }
+  };
+  if (infiniteGridOptions) {
+    drawInfiniteGrid(renderer, {
+      camera,
+      cell_size: infiniteGridOptions.cellSize,
+      section_size: infiniteGridOptions.sectionSize,
+      fade_distance: infiniteGridOptions.fadeDistance,
+      fade_strength: infiniteGridOptions.fadeStrength,
+      grid_color: infiniteGridOptions.gridColor,
+      section_color: infiniteGridOptions.sectionColor,
+      gamma_out: options.gamma
+    });
+  }
+  renderGroup(opaqueDraws);
+  renderGroup(maskDraws);
+  renderGroup(blendDraws);
   return { bitmap: renderer.bitmap, camera, options };
 }
 
+// lib/gltf/createInfiniteGrid.ts
+import { mat4 as mat45 } from "gl-matrix";
+function createInfiniteGrid(options = {}) {
+  const cellSize = options.cellSize ?? 1;
+  const sectionSize = options.sectionSize ?? 10;
+  const fadeDistance = options.fadeDistance ?? 100;
+  const fadeStrength = options.fadeStrength ?? 1.5;
+  const gridColor = options.gridColor ?? [0.93, 0.93, 0.93];
+  const sectionColor = options.sectionColor ?? [0.8, 0.8, 1];
+  const size = 1e3;
+  const positions = new Float32Array([
+    -size,
+    0,
+    -size,
+    size,
+    0,
+    -size,
+    size,
+    0,
+    size,
+    -size,
+    0,
+    size
+  ]);
+  const indices = new Uint32Array([0, 1, 2, 0, 2, 3]);
+  const model = mat45.create();
+  const offset = options.offset ?? {};
+  mat45.fromTranslation(model, [offset.x ?? 0, offset.y ?? 0, offset.z ?? 0]);
+  return {
+    positions,
+    indices,
+    normals: null,
+    uvs: null,
+    model,
+    material: {
+      baseColorFactor: [1, 1, 1, 1],
+      baseColorTexture: null,
+      alphaMode: "BLEND"
+    },
+    mode: 4,
+    // triangles
+    isInfiniteGrid: true,
+    cellSize,
+    sectionSize,
+    fadeDistance,
+    fadeStrength,
+    gridColor,
+    sectionColor
+  };
+}
+
 // lib/gltf/createSceneFromGLTF.ts
-import { mat4 as mat44 } from "gl-matrix";
+import { mat4 as mat46 } from "gl-matrix";
 var COMPONENT_INFO = {
   5120: {
     name: "BYTE",
@@ -851,17 +1092,17 @@ function readIndices(ctx, accessorIndex) {
 }
 function nodeLocalMatrix(node) {
   if (node.matrix) {
-    const m2 = mat44.create();
+    const m2 = mat46.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 = mat44.create();
-  const tmp = mat44.create();
-  mat44.fromRotationTranslationScale(tmp, rotation, translation, scale);
-  mat44.copy(m, tmp);
+  const m = mat46.create();
+  const tmp = mat46.create();
+  mat46.fromRotationTranslationScale(tmp, rotation, translation, scale);
+  mat46.copy(m, tmp);
   return m;
 }
 function getMaterial(gltf, textures, images, materialIndex) {
@@ -877,7 +1118,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 };
@@ -892,8 +1140,8 @@ function createSceneFromGLTF(gltf, resources) {
     const node = nodes[nodeIndex];
     if (!node) return;
     const local = nodeLocalMatrix(node);
-    const world = mat44.create();
-    mat44.multiply(world, parentMatrix, local);
+    const world = mat46.create();
+    mat46.multiply(world, parentMatrix, local);
     if (Number.isInteger(node.mesh)) {
       const mesh = meshes[node.mesh];
       if (mesh) {
@@ -931,7 +1179,7 @@ function createSceneFromGLTF(gltf, resources) {
       traverse(childIndex, world);
     }
   }
-  const identity = mat44.create();
+  const identity = mat46.create();
   for (const rootIndex of scene.nodes || []) {
     traverse(rootIndex, identity);
   }
@@ -1335,9 +1583,11 @@ export {
   computeSmoothNormals,
   computeWorldAABB,
   createGrid,
+  createInfiniteGrid,
   createSceneFromGLTF,
   createUint8Bitmap,
   decodeImageFromBuffer,
+  drawInfiniteGrid,
   encodePNGToBuffer,
   getDefaultRenderOptions,
   isJPG,

package/package.json

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