update background handling

Author: Ayushjhawar8

bun.lock

@@ -12,7 +12,7 @@
         "circuit-json-to-simple-3d": "^0.0.9",
         "circuit-to-svg": "^0.0.258",
         "jscad-fiber": "^0.0.85",
-        "poppygl": "^0.0.16",
+        "poppygl": "^0.0.17",
       },
       "devDependencies": {
         "@biomejs/biome": "^1.9.4",
@@ -811,7 +811,7 @@
 
     "polished": ["[email protected]", "", { "dependencies": { "@babel/runtime": "^7.17.8" } }, "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA=="],
 
-    "poppygl": ["[email protected].16", "", { "dependencies": { "gl-matrix": "^3.4.4", "pureimage": "^0.4.18", "readable-stream": "^4.7.0" }, "peerDependencies": { "typescript": "^5" } }, "sha512-A29z8dQRyupmLpBU8AurAeAdIYe0nIVuk+o/7PZlhEd4R+SZjt6eY98nnP7g85zcY8FinXtSPysKnMWoo7cz0g=="],
+    "poppygl": ["[email protected].17", "", { "dependencies": { "gl-matrix": "^3.4.4", "pureimage": "^0.4.18", "readable-stream": "^4.7.0" }, "peerDependencies": { "typescript": "^5" } }, "sha512-nEaOgH9UsR1uCETy2ybb2tCZxsXrmtfYn98MGSYxY6huMrKwYhX1WDiXaBa4RwdOaLIyIvzSKQ0LyMDfzIF0yw=="],
 
     "postcss": ["[email protected]", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
@@ -1081,6 +1081,8 @@
 
     "tscircuit/circuit-to-svg": ["[email protected]", "", { "dependencies": { "@types/node": "^22.5.5", "bun-types": "^1.1.40", "calculate-elbow": "0.0.12", "svgson": "^5.3.1", "transformation-matrix": "^2.16.1" } }, "sha512-wEvGWOb6H+4BudVjfA/lapWea9KjOFFxCWSpVZQ0xr8cO4N4kCMW1hwBwUW0EovpILi9jtilda651G15N+O/Yw=="],
 
+    "tscircuit/poppygl": ["[email protected]", "", { "dependencies": { "gl-matrix": "^3.4.4", "pureimage": "^0.4.18", "readable-stream": "^4.7.0" }, "peerDependencies": { "typescript": "^5" } }, "sha512-A29z8dQRyupmLpBU8AurAeAdIYe0nIVuk+o/7PZlhEd4R+SZjt6eY98nnP7g85zcY8FinXtSPysKnMWoo7cz0g=="],
+
     "use-mouse-matrix-transform/transformation-matrix": ["[email protected]", "", {}, "sha512-C6NlNnD6T8JqDeY4BpGznuve4d8/JlLDZLcJbnnx7gQKoyk01+uk2XYVFjBGqvNsVxJUpUwb3WZpjpdPr+05FQ=="],
 
     "winterspec/zod": ["[email protected]", "", {}, "sha512-hbP9FpSZf7pkS7hRVUrOjhwKJNyampPgtXKc3AN6DsWtoHsg2Sb4SQaS4Tcay380zSwd2VPo9G9180emBACp5g=="],

handlers/three-d-png.ts

@@ -22,6 +22,7 @@ export const threeDPngHandler = async (
       width: pngWidth,
       height: pngHeight,
       showInfiniteGrid: ctx.showInfiniteGrid,
+      backgroundColor: ctx.backgroundColor,
     })
 
     return new Response(pngBuffer as any, {

lib/getRequestContext.ts

@@ -66,6 +66,12 @@ export async function getRequestContext(
     }
   }
 
+  // Parse background_color from query parameter
+  const backgroundColorQuery = url.searchParams.get("background_color")
+  if (backgroundColorQuery != null) {
+    ctx.backgroundColor = backgroundColorQuery
+  }
+
   // Parse fsMap from query parameter
   const fsMapQueryParam = url.searchParams.get("fs_map")
   if (fsMapQueryParam) {

lib/render3dPng.ts

@@ -6,6 +6,7 @@ export interface Render3dPngOptions {
   height?: number
   zoomMultiplier?: number
   showInfiniteGrid?: boolean
+  backgroundColor?: string
 }
 
 export async function render3dPng(
@@ -70,7 +71,7 @@ export async function render3dPng(
   return await renderGLTFToPNGBufferFromGLBBuffer(glbBinary, {
     width: pngWidth,
     height: pngHeight,
-    backgroundColor: null,
+    backgroundColor: options.backgroundColor ?? null,
     camPos,
     lookAt,
     grid: options.showInfiniteGrid

package.json

@@ -37,6 +37,6 @@
     "circuit-json-to-simple-3d": "^0.0.9",
     "circuit-to-svg": "^0.0.258",
     "jscad-fiber": "^0.0.85",
-    "poppygl": "^0.0.16"
+    "poppygl": "^0.0.17"
   }
 }