poppygl 0.0.15 → 0.0.17

package/dist/index.d.ts

@@ -53,6 +53,12 @@ interface GLTFScene {
 }
 
 declare const DEFAULT_LIGHT_DIR: readonly [-0.4, -0.9, -0.2];
+/**
+ * Convert a hex color string to RGB array with values 0-1
+ * @param hex - Hex color string like "#ffffff" or "ffffff"
+ * @returns RGB array [r, g, b] with values 0-1, or null if invalid
+ */
+declare function hexToRgb(hex: string): [number, number, number] | null;
 interface RenderOptions {
     width: number;
     height: number;
@@ -63,7 +69,7 @@ interface RenderOptions {
     lightDir: readonly [number, number, number];
     camPos?: readonly [number, number, number] | null;
     lookAt?: readonly [number, number, number] | null;
-    backgroundColor?: readonly [number, number, number] | null;
+    backgroundColor?: readonly [number, number, number] | string | null;
     grid?: boolean | GridOptions;
 }
 type RenderOptionsInput = Partial<RenderOptions>;
@@ -156,6 +162,7 @@ declare class SoftwareRenderer {
  */
 declare function drawInfiniteGrid(software_renderer: SoftwareRenderer, params: {
     camera: Camera;
+    grid_y?: number;
     cell_size?: number;
     section_size?: number;
     fade_distance?: number;
@@ -180,4 +187,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, createInfiniteGrid, createSceneFromGLTF, createUint8Bitmap, decodeImageFromBuffer, drawInfiniteGrid, 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, hexToRgb, isJPG, isPNG, loadGLTFWithResourcesFromURL, pureImageFactory, renderDrawCalls, renderGLTFToPNGBuffer, renderGLTFToPNGBufferFromGLBBuffer, renderGLTFToPNGBufferFromURL, renderSceneFromGLTF, resolveRenderOptions };

package/dist/index.js

@@ -134,6 +134,16 @@ var createUint8Bitmap = (width, height) => ({
 
 // lib/render/getDefaultRenderOptions.ts
 var DEFAULT_LIGHT_DIR = [-0.4, -0.9, -0.2];
+function hexToRgb(hex) {
+  const cleanHex = hex.replace(/^#/, "");
+  if (!/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    return null;
+  }
+  const r = Number.parseInt(cleanHex.substring(0, 2), 16) / 255;
+  const g = Number.parseInt(cleanHex.substring(2, 4), 16) / 255;
+  const b = Number.parseInt(cleanHex.substring(4, 6), 16) / 255;
+  return [r, g, b];
+}
 var DEFAULT_RENDER_OPTIONS = {
   width: 800,
   height: 600,
@@ -630,6 +640,7 @@ function computeGridFadeAlpha(params) {
   );
 }
 function drawInfiniteGrid(software_renderer, params) {
+  const grid_y = params.grid_y ?? 0;
   const cell_size = params.cell_size ?? 1;
   const section_size = params.section_size ?? 10;
   const fade_distance = params.fade_distance ?? 100;
@@ -667,13 +678,21 @@ function drawInfiniteGrid(software_renderer, params) {
       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;
+      const t = (grid_y - 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 world_pt = vec43.fromValues(world_x, grid_y, world_z, 1);
+      const clip_pt = vec43.create();
+      vec43.transformMat4(clip_pt, world_pt, vp);
+      const ndc_z = clip_pt[2] / clip_pt[3];
+      const depth_01 = ndc_z * 0.5 + 0.5;
+      const di = y * software_renderer.width + x;
+      if (depth_01 >= software_renderer.depth[di]) continue;
       const dx = world_x - cam_pos_x;
+      const dy = grid_y - cam_pos_y;
       const dz = world_z - cam_pos_z;
-      const dist = Math.sqrt(dx * dx + dz * dz);
+      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
       const alpha = computeGridFadeAlpha({
         dist,
         fade_distance,
@@ -756,8 +775,16 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
     options.height,
     imageFactory
   );
+  let rgb = null;
   if (options.backgroundColor) {
-    const [r, g, b] = options.backgroundColor;
+    if (typeof options.backgroundColor === "string") {
+      rgb = hexToRgb(options.backgroundColor);
+    } else {
+      rgb = options.backgroundColor;
+    }
+  }
+  if (rgb) {
+    const [r, g, b] = rgb;
     renderer.clear([
       Math.round(r * 255),
       Math.round(g * 255),
@@ -824,9 +851,15 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
       }
     }
   };
+  renderGroup(opaqueDraws);
+  renderGroup(maskDraws);
   if (infiniteGridOptions) {
+    const aabb = computeWorldAABB(drawCalls);
+    const modelCenterY = (aabb.min[1] + aabb.max[1]) / 2;
+    const gridY = infiniteGridOptions.offset?.y ?? modelCenterY;
     drawInfiniteGrid(renderer, {
       camera,
+      grid_y: gridY,
       cell_size: infiniteGridOptions.cellSize,
       section_size: infiniteGridOptions.sectionSize,
       fade_distance: infiniteGridOptions.fadeDistance,
@@ -836,8 +869,6 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
       gamma_out: options.gamma
     });
   }
-  renderGroup(opaqueDraws);
-  renderGroup(maskDraws);
   renderGroup(blendDraws);
   return { bitmap: renderer.bitmap, camera, options };
 }
@@ -1590,6 +1621,7 @@ export {
   drawInfiniteGrid,
   encodePNGToBuffer,
   getDefaultRenderOptions,
+  hexToRgb,
   isJPG,
   isPNG,
   loadGLTFWithResourcesFromURL,

package/package.json

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