Merge pull request #588 from Ayushjhawar8/fixGridColor

Update grid and section colors in render3dPng

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,14 +71,14 @@ export async function render3dPng(
   return await renderGLTFToPNGBufferFromGLBBuffer(glbBinary, {
     width: pngWidth,
     height: pngHeight,
-    backgroundColor: null,
+    backgroundColor: options.backgroundColor ?? null,
     camPos,
     lookAt,
     grid: options.showInfiniteGrid
       ? {
           infiniteGrid: true,
-          gridColor: [0.8, 0.8, 0.8],
-          sectionColor: [0.7, 0.7, 0.7],
+          gridColor: [0.9, 0.9, 0.9],
+          sectionColor: [0.7, 0.7, 0.9],
           offset: { y: 0 },
         }
       : false,

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"
   }
 }

tests/3d-infinite-grid-test.test.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import { getCompressedBase64SnippetString } from "@tscircuit/create-snippet-url"
+import { getTestServer } from "./fixtures/get-test-server"
+
+const pngSignature = [137, 80, 78, 71, 13, 10, 26, 10]
+
+const simpleGridSnippet = `
+export default () => (
+  <board width="10mm" height="10mm" />
+)
+`
+
+test(
+  "renders 3d infinite grid on white background",
+  async () => {
+    const { serverUrl } = await getTestServer()
+    const encodedCode = encodeURIComponent(
+      getCompressedBase64SnippetString(simpleGridSnippet),
+    )
+
+    const colorResponse = await fetch(
+      `${serverUrl}?svg_type=3d&format=png&background_color=%23ffffff&show_infinite_grid=true&code=${encodedCode}`,
+    )
+
+    expect(colorResponse.status).toBe(200)
+    expect(colorResponse.headers.get("content-type")).toContain("image/png")
+
+    const buffer = new Uint8Array(await colorResponse.arrayBuffer())
+    expect(Array.from(buffer.slice(0, pngSignature.length))).toEqual(
+      pngSignature,
+    )
+    expect(buffer.byteLength).toBeGreaterThan(1000)
+
+    await expect(Buffer.from(buffer)).toMatchPngSnapshot(import.meta.path)
+  },
+  { timeout: 30000 },
+)

tests/3d-infinite-grid-with-model.test.ts

@@ -57,7 +57,7 @@ test(
     )
 
     const response = await fetch(
-      `${serverUrl}?svg_type=3d&format=png&show_infinite_grid=true&code=${encodedSnippet}`,
+      `${serverUrl}?svg_type=3d&format=png&background_color=%23ffffff&show_infinite_grid=true&code=${encodedSnippet}`,
     )
 
     expect(response.status).toBe(200)

tests/3d-infinite-grid.test.ts

@@ -24,7 +24,7 @@ test(
     )
 
     const response = await fetch(
-      `${serverUrl}?svg_type=3d&format=png&show_infinite_grid=true&code=${encodedSnippet}`,
+      `${serverUrl}?svg_type=3d&format=png&background_color=%23ffffff&show_infinite_grid=true&code=${encodedSnippet}`,
     )
 
     expect(response.status).toBe(200)