Implement SVG Board Textures (#534)

[notthecloudy]

This PR implements issue #534 — SVG Board Textures for PCB meshes in the 3D viewer.

Summary

• Generates SVG from circuit JSON including traces, pads, silkscreen, vias
• Converts SVG → PNG using resvg-wasm
• Creates Three.js DataTexture and applies to PCB box faces
• Integrates into viewer with a toggle in Appearance menu (experimental)

New Dependencies

• resvg/resvg-wasm

New Files Created

File	Purpose
src/textures/resvg-converter.ts	resvg-wasm initialization & SVG→PNG conversion
src/textures/svg-from-circuit-json.ts	Generates SVG markup from circuit JSON
src/textures/create-svg-based-texture.ts	High-level API to create Three.js DataTexture from SVG
src/hooks/useSvgBoardTextures.ts	React hook managing async texture generation
src/three-components/SvgBoardTextures.tsx	Mesh planes with SVG textures on PCB faces
stories/SvgBoardTextures.stories.tsx	Storybook demo

Modified Files

• src/contexts/LayerVisibilityContext.tsx — added svgTexturesEnabled, svgTextureResolution, svgTextureTop, svgTextureBottom
• src/components/AppearanceMenu.tsx — added UI toggle with experimental badge
• src/textures/index.ts — exported texture utilities
• src/hooks/index.ts — exported useSvgBoardTextures hook
• src/index.tsx — exported main component & utilities
• src/CadViewerManifold.tsx — integrated SvgBoardTextures
• src/CadViewerJscad.tsx — integrated SvgBoardTextures

How to Use

1. Right-click in the 3D viewer
2. Go to Appearance → SVG Board Textures (toggle on/off)
3. Feature is disabled by default (marked as "experimental")

/claim #534

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
3d-viewer	Ready	Preview, Comment	Mar 30, 2026 6:51pm

[graphite-app]

Memory leak: Object URLs created with URL.createObjectURL() are never revoked, causing memory to accumulate over time. Each texture generation creates a new blob URL that remains in memory until the page is closed.

Fix: Revoke the URL after the image loads:

img.onload = () => {
  URL.revokeObjectURL(img.src);
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, width, height);
  // ... rest of the code
};

img.onerror = () => {
  URL.revokeObjectURL(img.src);
  reject(new Error("Failed to load PNG image"));
};

This leak will manifest in production when users regenerate textures multiple times (e.g., when toggling layers or updating the circuit), causing browser memory to grow unbounded.

Spotted by Graphite



Is this helpful? React 👍 or 👎 to let us know.