Bump Map for board

src/CadViewerJscad.tsx

@@ -15,6 +15,7 @@ import { VisibleSTLModel } from "./three-components/VisibleSTLModel"
 import { ThreeErrorBoundary } from "./three-components/ThreeErrorBoundary"
 import { JscadBoardTextures } from "./three-components/JscadBoardTextures"
 import { addFauxBoardIfNeeded } from "./utils/preprocess-circuit-json"
+import type { TextureResolutionOptions } from "./utils/layer-texture-resolution"
 
 interface Props {
   /**
@@ -28,6 +29,8 @@ interface Props {
   onUserInteraction?: () => void
   onCameraControllerReady?: (controller: CameraController | null) => void
   resolveStaticAsset?: (modelUrl: string) => string
+  textureResolution?: number
+  textureResolutionOptions?: TextureResolutionOptions
 }
 
 export const CadViewerJscad = forwardRef<
@@ -43,6 +46,8 @@ export const CadViewerJscad = forwardRef<
       onUserInteraction,
       onCameraControllerReady,
       resolveStaticAsset,
+      textureResolution,
+      textureResolutionOptions,
     },
     ref,
   ) => {
@@ -148,6 +153,8 @@ export const CadViewerJscad = forwardRef<
           circuitJson={internalCircuitJson}
           pcbThickness={pcbThickness}
           isFaux={isFauxBoard}
+          textureResolution={textureResolution}
+          textureResolutionOptions={textureResolutionOptions}
         />
         {cad_components.map((cad_component) => (
           <ThreeErrorBoundary

src/CadViewerManifold.tsx

@@ -17,6 +17,7 @@ import { Error3d } from "./three-components/Error3d"
 import { ThreeErrorBoundary } from "./three-components/ThreeErrorBoundary"
 import { createGeometryMeshes } from "./utils/manifold/create-three-geometry-meshes"
 import { addFauxBoardIfNeeded } from "./utils/preprocess-circuit-json"
+import type { TextureResolutionOptions } from "./utils/layer-texture-resolution"
 
 declare global {
   interface Window {
@@ -129,6 +130,8 @@ type CadViewerManifoldProps = {
   onUserInteraction?: () => void
   onCameraControllerReady?: (controller: CameraController | null) => void
   resolveStaticAsset?: (modelUrl: string) => string
+  textureResolution?: number
+  textureResolutionOptions?: TextureResolutionOptions
 } & (
   | { circuitJson: AnyCircuitElement[]; children?: React.ReactNode }
   | { circuitJson?: never; children: React.ReactNode }
@@ -144,6 +147,8 @@ const CadViewerManifold: React.FC<CadViewerManifoldProps> = ({
   children,
   onCameraControllerReady,
   resolveStaticAsset,
+  textureResolution,
+  textureResolutionOptions,
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children)
   const circuitJson = useMemo(() => {
@@ -156,7 +161,7 @@ const CadViewerManifold: React.FC<CadViewerManifoldProps> = ({
     string | null
   >(null)
   const { visibility } = useLayerVisibility()
-  const { shadowsEnabled } = useRenderingMode()
+  const { lightingEnabled, shadowsEnabled } = useRenderingMode()
 
   useEffect(() => {
     if (
@@ -243,15 +248,29 @@ try {
     isLoading: builderIsLoading,
     boardData,
     isFauxBoard,
-  } = useManifoldBoardBuilder(manifoldJSModule, circuitJson, visibility)
+  } = useManifoldBoardBuilder(
+    manifoldJSModule,
+    circuitJson,
+    visibility,
+    textureResolution,
+    textureResolutionOptions,
+  )
 
   const geometryMeshes = useMemo(() => createGeometryMeshes(geoms), [geoms])
   const textureMeshes = useMemo(
     () =>
       createTextureMeshes(textures, boardData, pcbThickness, isFauxBoard, {
+        lightingEnabled,
         shadowsEnabled,
       }),
-    [textures, boardData, pcbThickness, isFauxBoard, shadowsEnabled],
+    [
+      textures,
+      boardData,
+      pcbThickness,
+      isFauxBoard,
+      lightingEnabled,
+      shadowsEnabled,
+    ],
   )
 
   const cadComponents = useMemo(

src/components/AppearanceMenu.tsx

@@ -62,7 +62,7 @@ const iconContainerStyles: React.CSSProperties = {
 
 export const AppearanceMenu = () => {
   const { visibility, setLayerVisibility } = useLayerVisibility()
-  const { renderingMode, setRenderingMode } = useRenderingMode()
+  const { lightingEnabled, setLightingEnabled } = useRenderingMode()
   const [appearanceSubOpen, setAppearanceSubOpen] = useState(false)
   const [hoveredItem, setHoveredItem] = useState<string | null>(null)
 
@@ -109,45 +109,22 @@ export const AppearanceMenu = () => {
               style={{
                 ...itemStyles,
                 backgroundColor:
-                  hoveredItem === "engineeringMode" ? "#404040" : "transparent",
+                  hoveredItem === "lighting" ? "#404040" : "transparent",
               }}
               onSelect={(e) => e.preventDefault()}
               onPointerDown={(e) => {
                 e.preventDefault()
-                setRenderingMode("engineering")
+                setLightingEnabled(!lightingEnabled)
               }}
-              onMouseEnter={() => setHoveredItem("engineeringMode")}
+              onMouseEnter={() => setHoveredItem("lighting")}
               onMouseLeave={() => setHoveredItem(null)}
-              onTouchStart={() => setHoveredItem("engineeringMode")}
+              onTouchStart={() => setHoveredItem("lighting")}
             >
               <span style={iconContainerStyles}>
-                {renderingMode === "engineering" && <CheckIcon />}
+                {lightingEnabled && <CheckIcon />}
               </span>
               <span style={{ display: "flex", alignItems: "center" }}>
-                Engineering Mode
-              </span>
-            </DropdownMenu.Item>
-
-            <DropdownMenu.Item
-              style={{
-                ...itemStyles,
-                backgroundColor:
-                  hoveredItem === "realisticMode" ? "#404040" : "transparent",
-              }}
-              onSelect={(e) => e.preventDefault()}
-              onPointerDown={(e) => {
-                e.preventDefault()
-                setRenderingMode("realistic")
-              }}
-              onMouseEnter={() => setHoveredItem("realisticMode")}
-              onMouseLeave={() => setHoveredItem(null)}
-              onTouchStart={() => setHoveredItem("realisticMode")}
-            >
-              <span style={iconContainerStyles}>
-                {renderingMode === "realistic" && <CheckIcon />}
-              </span>
-              <span style={{ display: "flex", alignItems: "center" }}>
-                Lighting Mode
+                Lighting
               </span>
             </DropdownMenu.Item>
 

src/contexts/RenderingModeContext.tsx

@@ -12,10 +12,13 @@ export type RenderingMode = "engineering" | "realistic"
 interface RenderingModeContextType {
   renderingMode: RenderingMode
   setRenderingMode: (mode: RenderingMode) => void
+  lightingEnabled: boolean
+  setLightingEnabled: (enabled: boolean) => void
   shadowsEnabled: boolean
 }
 
 const STORAGE_KEY = "cadViewerRenderingMode"
+const LIGHTING_STORAGE_KEY = "cadViewerLightingEnabled"
 
 const readStoredRenderingMode = (): RenderingMode => {
   if (typeof window === "undefined") return "engineering"
@@ -25,6 +28,11 @@ const readStoredRenderingMode = (): RenderingMode => {
     : "engineering"
 }
 
+const readStoredLightingEnabled = (): boolean => {
+  if (typeof window === "undefined") return true
+  return window.localStorage.getItem(LIGHTING_STORAGE_KEY) !== "false"
+}
+
 const RenderingModeContext = createContext<
   RenderingModeContextType | undefined
 >(undefined)
@@ -35,6 +43,9 @@ export const RenderingModeProvider: React.FC<{
   const [renderingMode, setRenderingModeState] = useState<RenderingMode>(
     readStoredRenderingMode,
   )
+  const [lightingEnabled, setLightingEnabled] = useState<boolean>(
+    readStoredLightingEnabled,
+  )
 
   const setRenderingMode = useCallback((mode: RenderingMode) => {
     setRenderingModeState(mode)
@@ -44,13 +55,22 @@ export const RenderingModeProvider: React.FC<{
     window.localStorage.setItem(STORAGE_KEY, renderingMode)
   }, [renderingMode])
 
+  useEffect(() => {
+    window.localStorage.setItem(
+      LIGHTING_STORAGE_KEY,
+      lightingEnabled ? "true" : "false",
+    )
+  }, [lightingEnabled])
+
   const value = useMemo(
     () => ({
       renderingMode,
       setRenderingMode,
-      shadowsEnabled: renderingMode === "realistic",
+      lightingEnabled,
+      setLightingEnabled,
+      shadowsEnabled: lightingEnabled && renderingMode === "realistic",
     }),
-    [renderingMode, setRenderingMode],
+    [lightingEnabled, renderingMode, setRenderingMode],
   )
 
   return (

src/hooks/useManifoldBoardBuilder.ts

@@ -13,7 +13,10 @@ import {
   colors as defaultColors,
   TRACE_TEXTURE_RESOLUTION,
 } from "../geoms/constants"
-import { getLayerTextureResolution } from "../utils/layer-texture-resolution"
+import {
+  getLayerTextureResolution,
+  type TextureResolutionOptions,
+} from "../utils/layer-texture-resolution"
 import { createManifoldBoard } from "../utils/manifold/create-manifold-board"
 import { processCutoutsForManifold } from "../utils/manifold/process-cutouts"
 import { processNonPlatedHolesForManifold } from "../utils/manifold/process-non-plated-holes"
@@ -56,6 +59,8 @@ export const useManifoldBoardBuilder = (
   manifoldJSModule: ManifoldToplevel | null,
   circuitJson: AnyCircuitElement[],
   visibility: LayerVisibilityState,
+  textureResolution = TRACE_TEXTURE_RESOLUTION,
+  textureResolutionOptions?: TextureResolutionOptions,
 ): UseManifoldBoardBuilderResult => {
   const [geoms, setGeoms] = useState<ManifoldGeoms | null>(null)
   const [pcbThickness, setPcbThickness] = useState<number | null>(null)
@@ -103,8 +108,12 @@ export const useManifoldBoardBuilder = (
 
   const traceTextureResolution = useMemo(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION
-    return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION)
-  }, [boardData])
+    return getLayerTextureResolution(
+      boardData,
+      textureResolution,
+      textureResolutionOptions,
+    )
+  }, [boardData, textureResolution, textureResolutionOptions])
 
   useEffect(() => {
     if (!manifoldJSModule || !boardData) {

src/react-three/Lights.tsx

@@ -28,6 +28,7 @@ export const Lights: React.FC<LightsProps> = ({
     )
     const shadowHalfSize = largestBoardDimension * 0.8
     const lightDistance = largestBoardDimension
+    const keyLightDistance = largestBoardDimension * 8.3
 
     const ambientLight = new THREE.AmbientLight(0xffffff, 0.18)
     ambientLight.name = "cad-viewer-soft-ambient"
@@ -66,7 +67,10 @@ export const Lights: React.FC<LightsProps> = ({
         shadowCamera.top = shadowHalfSize
         shadowCamera.bottom = -shadowHalfSize
         shadowCamera.near = 0.5
-        shadowCamera.far = largestBoardDimension * 4
+        shadowCamera.far = Math.max(
+          largestBoardDimension * 4,
+          Math.hypot(...position) + largestBoardDimension * 2,
+        )
         shadowCamera.updateProjectionMatrix()
       }
 
@@ -76,16 +80,25 @@ export const Lights: React.FC<LightsProps> = ({
 
     addDirectionalLight(
       "cad-viewer-key-light",
-      0xfff0df,
+      0xffffff,
       2.4,
-      [lightDistance * 0.22, -lightDistance * 0.28, lightDistance * 1.15],
+      [
+        keyLightDistance * 0.22,
+        -keyLightDistance * 0.28,
+        keyLightDistance * 1.15,
+      ],
       shadowsEnabled,
     )
     addDirectionalLight("cad-viewer-fill-light", 0xdde8ff, 0.7, [
       -lightDistance * 0.65,
       lightDistance * 0.45,
       lightDistance * 0.35,
     ])
+    addDirectionalLight("cad-viewer-lower-fill-light", 0xffffff, 0.24, [
+      lightDistance * 0.15,
+      -lightDistance * 0.1,
+      -lightDistance * 0.55,
+    ])
     addDirectionalLight("cad-viewer-rim-light", 0xffffff, 1.1, [
       -lightDistance * 0.25,
       lightDistance * 0.75,