@tscircuit/3d-viewer 0.0.573 → 0.0.574

package/dist/index.js

@@ -32429,7 +32429,7 @@ import * as THREE21 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.572",
+  version: "0.0.573",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -33076,6 +33076,7 @@ var Lights = ({
     );
     const shadowHalfSize = largestBoardDimension * 0.8;
     const lightDistance = largestBoardDimension;
+    const keyLightDistance = largestBoardDimension * 8.3;
     const ambientLight = new THREE18.AmbientLight(16777215, 0.18);
     ambientLight.name = "cad-viewer-soft-ambient";
     rig.add(ambientLight);
@@ -33103,7 +33104,10 @@ var Lights = ({
         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();
       }
       rig.add(light);
@@ -33111,9 +33115,13 @@ var Lights = ({
     };
     addDirectionalLight(
       "cad-viewer-key-light",
-      16773343,
+      16777215,
       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", 14543103, 0.7, [
@@ -33290,29 +33298,45 @@ import {
 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var STORAGE_KEY = "cadViewerRenderingMode";
+var LIGHTING_STORAGE_KEY = "cadViewerLightingEnabled";
 var readStoredRenderingMode = () => {
   if (typeof window === "undefined") return "engineering";
   const stored = window.localStorage.getItem(STORAGE_KEY);
   return stored === "realistic" || stored === "engineering" ? stored : "engineering";
 };
+var readStoredLightingEnabled = () => {
+  if (typeof window === "undefined") return true;
+  return window.localStorage.getItem(LIGHTING_STORAGE_KEY) !== "false";
+};
 var RenderingModeContext = createContext5(void 0);
 var RenderingModeProvider = ({ children }) => {
   const [renderingMode, setRenderingModeState] = useState10(
     readStoredRenderingMode
   );
+  const [lightingEnabled, setLightingEnabled] = useState10(
+    readStoredLightingEnabled
+  );
   const setRenderingMode = useCallback7((mode) => {
     setRenderingModeState(mode);
   }, []);
   useEffect17(() => {
     window.localStorage.setItem(STORAGE_KEY, renderingMode);
   }, [renderingMode]);
+  useEffect17(() => {
+    window.localStorage.setItem(
+      LIGHTING_STORAGE_KEY,
+      lightingEnabled ? "true" : "false"
+    );
+  }, [lightingEnabled]);
   const value = useMemo14(
     () => ({
       renderingMode,
       setRenderingMode,
-      shadowsEnabled: renderingMode === "realistic"
+      lightingEnabled,
+      setLightingEnabled,
+      shadowsEnabled: lightingEnabled && renderingMode === "realistic"
     }),
-    [renderingMode, setRenderingMode]
+    [lightingEnabled, renderingMode, setRenderingMode]
   );
   return /* @__PURE__ */ jsx13(RenderingModeContext.Provider, { value, children });
 };
@@ -36829,10 +36853,57 @@ var toRgb3 = (colorArr) => {
     b * 255
   )})`;
 };
+var clampChannel = (value) => Math.max(0, Math.min(255, value));
+var applySoldermaskSurfaceFilter = (ctx, width10, height10, options = {}) => {
+  const imageData = ctx.getImageData(0, 0, width10, height10);
+  const data = imageData.data;
+  const maxX = Math.max(width10 - 1, 1);
+  const maxY = Math.max(height10 - 1, 1);
+  for (let i = 0; i < data.length; i += 4) {
+    const alpha = data[i + 3] ?? 0;
+    if (alpha < 16) continue;
+    const r = data[i] ?? 0;
+    const g = data[i + 1] ?? 0;
+    const b = data[i + 2] ?? 0;
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    const isDarkGreen = g > r * 1.35 && g > b * 1.15 && luminance < 90 && r < 80 && b < 80;
+    if (!isDarkGreen) continue;
+    const pixelIndex = i / 4;
+    const x = pixelIndex % width10;
+    const y = Math.floor(pixelIndex / width10);
+    const u = x / maxX;
+    const v = y / maxY;
+    const diagonalLight = u * 0.62 + (1 - v) * 0.38;
+    const broadVariation = Math.sin((u * 1.15 + v * 0.35) * Math.PI) * 0.04;
+    const lightFactor = 0.74 + diagonalLight * 0.18 + broadVariation;
+    const whiteReflection = options.includeReflection ? (() => {
+      const reflectionX = 0.36;
+      const reflectionY = 0.22;
+      const dx = u - reflectionX;
+      const dy = v - reflectionY;
+      const radialFalloff = Math.max(0, 1 - Math.hypot(dx, dy) / 0.38);
+      return radialFalloff * radialFalloff * 0.07;
+    })() : 0;
+    const filteredR = (r * 0.9 + 3) * lightFactor;
+    const filteredG = (g * 1.08 + 15) * lightFactor;
+    const filteredB = (b * 1.28 + 13) * lightFactor;
+    data[i] = clampChannel(
+      filteredR * (1 - whiteReflection) + 255 * whiteReflection
+    );
+    data[i + 1] = clampChannel(
+      filteredG * (1 - whiteReflection) + 255 * whiteReflection
+    );
+    data[i + 2] = clampChannel(
+      filteredB * (1 - whiteReflection) + 255 * whiteReflection
+    );
+  }
+  ctx.putImageData(imageData, 0, 0);
+};
 var createCombinedTexture = ({
   textures,
   boardData,
-  traceTextureResolution
+  traceTextureResolution,
+  layer
 }) => {
   const hasImage = textures.some((texture) => texture?.image);
   if (!hasImage) return null;
@@ -36854,6 +36925,9 @@ var createCombinedTexture = ({
     const image = texture.image;
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
   });
+  applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
+    includeReflection: layer === "top"
+  });
   const combinedTexture = new THREE35.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
   combinedTexture.minFilter = THREE35.LinearFilter;
@@ -36966,7 +37040,8 @@ function createCombinedBoardTextures({
         keepoutTexture
       ],
       boardData,
-      traceTextureResolution
+      traceTextureResolution,
+      layer
     });
   };
   const numLayers = boardData.num_layers ?? 2;
@@ -45421,7 +45496,7 @@ var iconContainerStyles = {
 };
 var AppearanceMenu = () => {
   const { visibility, setLayerVisibility } = useLayerVisibility();
-  const { renderingMode, setRenderingMode } = useRenderingMode();
+  const { lightingEnabled, setLightingEnabled } = useRenderingMode();
   const [appearanceSubOpen, setAppearanceSubOpen] = useState35(false);
   const [hoveredItem, setHoveredItem] = useState35(null);
   return /* @__PURE__ */ jsxs8(Fragment11, { children: [
@@ -45467,40 +45542,19 @@ var AppearanceMenu = () => {
               {
                 style: {
                   ...itemStyles,
-                  backgroundColor: hoveredItem === "engineeringMode" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setRenderingMode("engineering");
-                },
-                onMouseEnter: () => setHoveredItem("engineeringMode"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("engineeringMode"),
-                children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: renderingMode === "engineering" && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Engineering Mode" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs8(
-              Item22,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "realisticMode" ? "#404040" : "transparent"
+                  backgroundColor: hoveredItem === "lighting" ? "#404040" : "transparent"
                 },
                 onSelect: (e) => e.preventDefault(),
                 onPointerDown: (e) => {
                   e.preventDefault();
-                  setRenderingMode("realistic");
+                  setLightingEnabled(!lightingEnabled);
                 },
-                onMouseEnter: () => setHoveredItem("realisticMode"),
+                onMouseEnter: () => setHoveredItem("lighting"),
                 onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("realisticMode"),
+                onTouchStart: () => setHoveredItem("lighting"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: renderingMode === "realistic" && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting Mode" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: lightingEnabled && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting" })
                 ]
               }
             ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.573",
+  "version": "0.0.574",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",