poppygl 0.0.16 → 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

@@ -53,9 +53,16 @@ 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;
+    supersampling: number;
     fov: number;
     cull: boolean;
     gamma: boolean;
@@ -63,7 +70,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>;
@@ -181,4 +188,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

@@ -132,11 +132,220 @@ 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) {
+  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,
+  supersampling: 1,
   fov: 60,
   cull: true,
   gamma: true,
@@ -151,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) {
@@ -225,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;
@@ -273,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)) {
@@ -387,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;
@@ -407,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;
@@ -593,180 +806,30 @@ 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) {
-    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),
@@ -852,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
@@ -1603,6 +1672,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.16",
+  "version": "0.0.18",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/poppygl.git"