poppygl 0.0.17 → 0.0.18

package/README.md

@@ -50,6 +50,7 @@ const png = await renderGLTFToPNGBufferFromGLBBuffer(glb, {
 `renderGLTFToPNGBufferFromURL` accepts the same render options as the lower-level APIs:
 
 - `width`/`height` (default `512`): output resolution in pixels.
+- `supersampling`: render at `width * supersampling` / `height * supersampling`, then downsample (default `1`).
 - `fov`: vertical field of view in degrees (defaults to `35`).
 - `camPos` and `lookAt`: override the auto-framed camera position and target.
 - `lightDir`: normalized directional light vector (defaults to a top-right key light).

package/dist/index.d.ts

@@ -62,6 +62,7 @@ declare function hexToRgb(hex: string): [number, number, number] | null;
 interface RenderOptions {
     width: number;
     height: number;
+    supersampling: number;
     fov: number;
     cull: boolean;
     gamma: boolean;

package/dist/index.js

@@ -132,6 +132,204 @@ var createUint8Bitmap = (width, height) => ({
   data: new Uint8ClampedArray(width * height * 4)
 });
 
+// lib/render/downsampleBitmap.ts
+function downsampleBitmap(source, targetWidth, targetHeight, imageFactory) {
+  const target = imageFactory(targetWidth, targetHeight);
+  const scaleX = source.width / targetWidth;
+  const scaleY = source.height / targetHeight;
+  for (let y = 0; y < targetHeight; y++) {
+    const srcY0 = Math.floor(y * scaleY);
+    const srcY1 = Math.max(
+      srcY0 + 1,
+      Math.min(source.height, Math.floor((y + 1) * scaleY))
+    );
+    for (let x = 0; x < targetWidth; x++) {
+      const srcX0 = Math.floor(x * scaleX);
+      const srcX1 = Math.max(
+        srcX0 + 1,
+        Math.min(source.width, Math.floor((x + 1) * scaleX))
+      );
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      let a = 0;
+      let count = 0;
+      for (let sy = srcY0; sy < srcY1; sy++) {
+        for (let sx = srcX0; sx < srcX1; sx++) {
+          const srcIdx = (sy * source.width + sx) * 4;
+          r += source.data[srcIdx + 0];
+          g += source.data[srcIdx + 1];
+          b += source.data[srcIdx + 2];
+          a += source.data[srcIdx + 3];
+          count++;
+        }
+      }
+      const dstIdx = (y * targetWidth + x) * 4;
+      target.data[dstIdx + 0] = Math.round(r / count);
+      target.data[dstIdx + 1] = Math.round(g / count);
+      target.data[dstIdx + 2] = Math.round(b / count);
+      target.data[dstIdx + 3] = Math.round(a / count);
+    }
+  }
+  return target;
+}
+
+// lib/render/drawInfiniteGrid.ts
+import { mat4 as mat43, vec4 as vec42 } from "gl-matrix";
+
+// lib/utils/srgbEncodeLinear01.ts
+function srgbEncodeLinear01(linear) {
+  if (linear <= 31308e-7) return 12.92 * linear;
+  return 1.055 * Math.pow(linear, 1 / 2.4) - 0.055;
+}
+
+// lib/utils/clamp.ts
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+// lib/render/drawInfiniteGrid.ts
+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 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;
+  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 = mat43.create();
+  mat43.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 = mat43.create();
+  mat43.multiply(vp, proj, view);
+  const inv_vp = mat43.create();
+  mat43.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 = vec42.fromValues(ndc_x, ndc_y, -1, 1);
+      const far_point = vec42.fromValues(ndc_x, ndc_y, 1, 1);
+      vec42.transformMat4(near_point, near_point, inv_vp);
+      vec42.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 = (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 = vec42.fromValues(world_x, grid_y, world_z, 1);
+      const clip_pt = vec42.create();
+      vec42.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 + dy * dy + 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/getDefaultRenderOptions.ts
 var DEFAULT_LIGHT_DIR = [-0.4, -0.9, -0.2];
 function hexToRgb(hex) {
@@ -147,6 +345,7 @@ function hexToRgb(hex) {
 var DEFAULT_RENDER_OPTIONS = {
   width: 800,
   height: 600,
+  supersampling: 1,
   fov: 60,
   cull: true,
   gamma: true,
@@ -161,8 +360,21 @@ function getDefaultRenderOptions() {
   return { ...DEFAULT_RENDER_OPTIONS };
 }
 
+// lib/render/resolveRenderOptions.ts
+function resolveRenderOptions(options = {}) {
+  const supersampling = typeof options.supersampling === "number" && Number.isFinite(options.supersampling) ? Math.max(1, Math.floor(options.supersampling)) : DEFAULT_RENDER_OPTIONS.supersampling;
+  return {
+    ...DEFAULT_RENDER_OPTIONS,
+    ...options,
+    supersampling,
+    lightDir: options.lightDir != null ? options.lightDir : DEFAULT_RENDER_OPTIONS.lightDir,
+    camPos: options.camPos !== void 0 ? options.camPos : DEFAULT_RENDER_OPTIONS.camPos,
+    lookAt: options.lookAt !== void 0 ? options.lookAt : DEFAULT_RENDER_OPTIONS.lookAt
+  };
+}
+
 // lib/render/SoftwareRenderer.ts
-import { mat3, mat4 as mat43, vec3 as vec32, vec4 as vec42 } from "gl-matrix";
+import { mat3, mat4 as mat44, vec3 as vec32, vec4 as vec43 } from "gl-matrix";
 
 // lib/gltf/computeSmoothNormals.ts
 function computeSmoothNormals(positions, indices) {
@@ -235,15 +447,6 @@ function mulColor(a, b) {
   return [a[0] * b[0], a[1] * b[1], a[2] * b[2], a[3] * b[3]];
 }
 
-// lib/utils/srgbEncodeLinear01.ts
-function srgbEncodeLinear01(linear) {
-  if (linear <= 31308e-7) return 12.92 * linear;
-  return 1.055 * Math.pow(linear, 1 / 2.4) - 0.055;
-}
-
-// lib/utils/clamp.ts
-var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-
 // lib/render/SoftwareRenderer.ts
 var SoftwareRenderer = class {
   width;
@@ -283,21 +486,21 @@ var SoftwareRenderer = class {
     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 mvp = mat44.create();
+    mat44.multiply(mvp, proj, mat44.multiply(mat44.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(
+      const p = vec43.fromValues(
         positions[i * 3 + 0],
         positions[i * 3 + 1],
         positions[i * 3 + 2],
         1
       );
-      const c = vec42.create();
-      vec42.transformMat4(c, p, mvp);
+      const c = vec43.create();
+      vec43.transformMat4(c, p, mvp);
       const invW = 1 / c[3];
       vInvW[i] = invW;
       if (!isFinite(invW)) {
@@ -397,8 +600,8 @@ var SoftwareRenderer = class {
     const { positions, normals, uvs, indices, model, colors } = mesh;
     const view = camera.view;
     const proj = camera.proj;
-    const mvp = mat43.create();
-    mat43.multiply(mvp, proj, mat43.multiply(mat43.create(), view, model));
+    const mvp = mat44.create();
+    mat44.multiply(mvp, proj, mat44.multiply(mat44.create(), view, model));
     const normalMat = mat3.create();
     mat3.normalFromMat4(normalMat, model);
     const vertexCount = positions.length / 3 | 0;
@@ -417,14 +620,14 @@ var SoftwareRenderer = class {
     const vWorldN = new Array(vertexCount);
     const vColor = new Array(vertexCount);
     for (let i = 0; i < vertexCount; i++) {
-      const p = vec42.fromValues(
+      const p = vec43.fromValues(
         positions[i * 3 + 0],
         positions[i * 3 + 1],
         positions[i * 3 + 2],
         1
       );
-      const c = vec42.create();
-      vec42.transformMat4(c, p, mvp);
+      const c = vec43.create();
+      vec43.transformMat4(c, p, mvp);
       const invW = 1 / c[3];
       const ndcX = c[0] * invW;
       const ndcY = c[1] * invW;
@@ -603,178 +806,20 @@ function edge(a, b, p) {
   return (p[0] - a[0]) * (b[1] - a[1]) - (p[1] - a[1]) * (b[0] - a[0]);
 }
 
-// lib/render/resolveRenderOptions.ts
-function resolveRenderOptions(options = {}) {
-  return {
-    ...DEFAULT_RENDER_OPTIONS,
-    ...options,
-    lightDir: options.lightDir != null ? options.lightDir : DEFAULT_RENDER_OPTIONS.lightDir,
-    camPos: options.camPos !== void 0 ? options.camPos : DEFAULT_RENDER_OPTIONS.camPos,
-    lookAt: options.lookAt !== void 0 ? options.lookAt : DEFAULT_RENDER_OPTIONS.lookAt
-  };
-}
-
-// 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 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;
-  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 = (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 + dy * dy + 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);
+  const renderWidth = options.width * options.supersampling;
+  const renderHeight = options.height * options.supersampling;
   const camera = buildCamera(
     drawCalls,
-    options.width,
-    options.height,
+    renderWidth,
+    renderHeight,
     options.fov,
     options.camPos ?? null,
     options.lookAt ?? null
   );
-  const renderer = new SoftwareRenderer(
-    options.width,
-    options.height,
-    imageFactory
-  );
+  const renderer = new SoftwareRenderer(renderWidth, renderHeight, imageFactory);
   let rgb = null;
   if (options.backgroundColor) {
     if (typeof options.backgroundColor === "string") {
@@ -870,7 +915,13 @@ function renderDrawCalls(drawCalls, optionsInput = {}, imageFactory = createUint
     });
   }
   renderGroup(blendDraws);
-  return { bitmap: renderer.bitmap, camera, options };
+  const bitmap = options.supersampling > 1 ? downsampleBitmap(
+    renderer.bitmap,
+    options.width,
+    options.height,
+    imageFactory
+  ) : renderer.bitmap;
+  return { bitmap, camera, options };
 }
 
 // lib/gltf/createInfiniteGrid.ts

package/package.json

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