circuit-json-to-gltf 0.0.16 → 0.0.18

package/dist/index.js

@@ -1078,6 +1078,180 @@ async function renderBoardTextures(circuitJson, resolution = 1024) {
   return { top, bottom };
 }
 
+// lib/utils/pcb-board-geometry.ts
+import { extrudeLinear } from "@jscad/modeling/src/operations/extrusions";
+import {
+  polygon,
+  rectangle,
+  roundedRectangle,
+  cylinder
+} from "@jscad/modeling/src/primitives";
+import {
+  translate,
+  rotateZ,
+  rotateX
+} from "@jscad/modeling/src/operations/transforms";
+import { subtract } from "@jscad/modeling/src/operations/booleans";
+import * as geom3 from "@jscad/modeling/src/geometries/geom3";
+import measureBoundingBox from "@jscad/modeling/src/measurements/measureBoundingBox";
+var DEFAULT_SEGMENTS = 64;
+var RADIUS_EPSILON = 1e-4;
+var toVec2 = (point, center) => [
+  point.x - center.x,
+  point.y - center.y
+];
+var arePointsClockwise = (points) => {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const j = (i + 1) % points.length;
+    area += points[i][0] * points[j][1];
+    area -= points[j][0] * points[i][1];
+  }
+  const signedArea = area / 2;
+  return signedArea <= 0;
+};
+var getNumberProperty = (obj, key) => {
+  const value = obj[key];
+  return typeof value === "number" ? value : void 0;
+};
+var createBoardOutlineGeom = (board, center, thickness) => {
+  if (board.outline && board.outline.length >= 3) {
+    let outlinePoints = board.outline.map((pt) => toVec2(pt, center));
+    if (arePointsClockwise(outlinePoints)) {
+      outlinePoints = outlinePoints.slice().reverse();
+    }
+    const shape2d = polygon({ points: outlinePoints });
+    let geom2 = extrudeLinear({ height: thickness }, shape2d);
+    geom2 = translate([0, 0, -thickness / 2], geom2);
+    return geom2;
+  }
+  const baseRect = rectangle({ size: [board.width, board.height] });
+  let geom = extrudeLinear({ height: thickness }, baseRect);
+  geom = translate([0, 0, -thickness / 2], geom);
+  return geom;
+};
+var createCircularHole = (x, y, radius, thickness) => cylinder({
+  center: [x, y, 0],
+  height: thickness + 1,
+  radius,
+  segments: DEFAULT_SEGMENTS
+});
+var createPillHole = (x, y, width, height, thickness, rotate) => {
+  const minDimension = Math.min(width, height);
+  const maxAllowedRadius = Math.max(0, minDimension / 2 - RADIUS_EPSILON);
+  const roundRadius = maxAllowedRadius <= 0 ? 0 : Math.min(height / 2, maxAllowedRadius);
+  const hole2d = roundedRectangle({
+    size: [width, height],
+    roundRadius,
+    segments: DEFAULT_SEGMENTS
+  });
+  let hole3d = extrudeLinear({ height: thickness + 1 }, hole2d);
+  hole3d = translate([0, 0, -(thickness + 1) / 2], hole3d);
+  if (rotate) {
+    hole3d = rotateZ(Math.PI / 2, hole3d);
+  }
+  return translate([x, y, 0], hole3d);
+};
+var createHoleGeoms = (boardCenter, thickness, holes = [], platedHoles = []) => {
+  const holeGeoms = [];
+  for (const hole of holes) {
+    const holeRecord = hole;
+    const diameter = getNumberProperty(holeRecord, "hole_diameter") ?? getNumberProperty(holeRecord, "diameter");
+    if (!diameter) continue;
+    const radius = diameter / 2;
+    const relX = hole.x - boardCenter.x;
+    const relY = -(hole.y - boardCenter.y);
+    holeGeoms.push(createCircularHole(relX, relY, radius, thickness));
+  }
+  for (const plated of platedHoles) {
+    const relX = plated.x - boardCenter.x;
+    const relY = -(plated.y - boardCenter.y);
+    const platedRecord = plated;
+    if (plated.shape === "pill" || plated.shape === "pill_hole_with_rect_pad") {
+      const holeWidth = getNumberProperty(platedRecord, "hole_width") ?? getNumberProperty(platedRecord, "outer_diameter") ?? 0;
+      const holeHeight = getNumberProperty(platedRecord, "hole_height") ?? getNumberProperty(platedRecord, "hole_diameter") ?? 0;
+      if (!holeWidth || !holeHeight) continue;
+      const rotate = holeHeight > holeWidth;
+      const width = rotate ? holeHeight : holeWidth;
+      const height = rotate ? holeWidth : holeHeight;
+      holeGeoms.push(
+        createPillHole(relX, relY, width, height, thickness, rotate)
+      );
+      continue;
+    }
+    const diameter = getNumberProperty(platedRecord, "hole_diameter") ?? getNumberProperty(platedRecord, "outer_diameter");
+    if (!diameter) continue;
+    holeGeoms.push(createCircularHole(relX, relY, diameter / 2, thickness));
+  }
+  return holeGeoms;
+};
+var geom3ToTriangles = (geometry, polygons) => {
+  const sourcePolygons = polygons ?? geom3.toPolygons(geometry);
+  const triangles = [];
+  for (const poly of sourcePolygons) {
+    if (!poly || poly.vertices.length < 3) continue;
+    const base = poly.vertices[0];
+    const next = poly.vertices[1];
+    const next2 = poly.vertices[2];
+    const ab = [next[0] - base[0], next[1] - base[1], next[2] - base[2]];
+    const ac = [
+      next2[0] - base[0],
+      next2[1] - base[1],
+      next2[2] - base[2]
+    ];
+    const cross = [
+      ab[1] * ac[2] - ab[2] * ac[1],
+      ab[2] * ac[0] - ab[0] * ac[2],
+      ab[0] * ac[1] - ab[1] * ac[0]
+    ];
+    const length = Math.sqrt(cross[0] ** 2 + cross[1] ** 2 + cross[2] ** 2) || 1;
+    const normal = {
+      x: cross[0] / length,
+      y: cross[1] / length,
+      z: cross[2] / length
+    };
+    for (let i = 1; i < poly.vertices.length - 1; i++) {
+      const v1 = poly.vertices[i];
+      const v2 = poly.vertices[i + 1];
+      const triangle = {
+        vertices: [
+          { x: base[0], y: base[1], z: base[2] },
+          { x: v1[0], y: v1[1], z: v1[2] },
+          { x: v2[0], y: v2[1], z: v2[2] }
+        ],
+        normal
+      };
+      triangles.push(triangle);
+    }
+  }
+  return triangles;
+};
+var createBoundingBox = (bbox) => {
+  const [min, max] = bbox;
+  return {
+    min: { x: min[0], y: min[1], z: min[2] },
+    max: { x: max[0], y: max[1], z: max[2] }
+  };
+};
+var createBoardMesh = (board, options) => {
+  const { thickness, holes = [], platedHoles = [] } = options;
+  const center = board.center ?? { x: 0, y: 0 };
+  let boardGeom = createBoardOutlineGeom(board, center, thickness);
+  const holeGeoms = createHoleGeoms(center, thickness, holes, platedHoles);
+  if (holeGeoms.length > 0) {
+    boardGeom = subtract(boardGeom, ...holeGeoms);
+  }
+  boardGeom = rotateX(-Math.PI / 2, boardGeom);
+  const polygons = geom3.toPolygons(boardGeom);
+  const triangles = geom3ToTriangles(boardGeom, polygons);
+  const bboxValues = measureBoundingBox(boardGeom);
+  const boundingBox = createBoundingBox(bboxValues);
+  return {
+    triangles,
+    boundingBox
+  };
+};
+
 // lib/converters/circuit-to-3d.ts
 var DEFAULT_BOARD_THICKNESS = 1.6;
 var DEFAULT_COMPONENT_HEIGHT = 2;
@@ -1100,37 +1274,51 @@ async function convertCircuitJsonTo3D(circuitJson, options = {}) {
   } = options;
   const db = cju(circuitJson);
   const boxes = [];
-  const pcbBoard = db.pcb_board.list()[0];
-  if (!pcbBoard) {
-    throw new Error("No pcb_board found in circuit JSON");
-  }
-  const boardBox = {
-    center: {
-      x: pcbBoard.center.x,
-      y: 0,
-      z: pcbBoard.center.y
-    },
-    size: {
-      x: pcbBoard.width,
-      y: boardThickness,
-      z: pcbBoard.height
-    }
-  };
-  if (shouldRenderTextures && textureResolution > 0) {
-    try {
-      const textures = await renderBoardTextures(circuitJson, textureResolution);
-      boardBox.texture = {
-        top: textures.top,
-        bottom: textures.bottom
-      };
-    } catch (error) {
-      console.warn("Failed to render board textures:", error);
+  const pcbBoard = db.pcb_board?.list?.()[0];
+  const effectiveBoardThickness = pcbBoard?.thickness ?? boardThickness;
+  if (pcbBoard) {
+    const pcbHoles = db.pcb_hole?.list?.() ?? [];
+    const pcbPlatedHoles = db.pcb_plated_hole?.list?.() ?? [];
+    const boardMesh = createBoardMesh(pcbBoard, {
+      thickness: effectiveBoardThickness,
+      holes: pcbHoles,
+      platedHoles: pcbPlatedHoles
+    });
+    const meshWidth = boardMesh.boundingBox.max.x - boardMesh.boundingBox.min.x;
+    const meshHeight = boardMesh.boundingBox.max.z - boardMesh.boundingBox.min.z;
+    const boardBox = {
+      center: {
+        x: pcbBoard.center.x,
+        y: 0,
+        z: pcbBoard.center.y
+      },
+      size: {
+        x: Number.isFinite(meshWidth) ? meshWidth : pcbBoard.width,
+        y: effectiveBoardThickness,
+        z: Number.isFinite(meshHeight) ? meshHeight : pcbBoard.height
+      },
+      mesh: boardMesh,
+      color: pcbColor
+    };
+    if (shouldRenderTextures && textureResolution > 0) {
+      try {
+        const textures = await renderBoardTextures(
+          circuitJson,
+          textureResolution
+        );
+        boardBox.texture = {
+          top: textures.top,
+          bottom: textures.bottom
+        };
+      } catch (error) {
+        console.warn("Failed to render board textures:", error);
+        boardBox.color = pcbColor;
+      }
+    } else {
       boardBox.color = pcbColor;
     }
-  } else {
-    boardBox.color = pcbColor;
+    boxes.push(boardBox);
   }
-  boxes.push(boardBox);
   const cadComponents = db.cad_component?.list?.() ?? [];
   const pcbComponentIdsWith3D = /* @__PURE__ */ new Set();
   for (const cad of cadComponents) {
@@ -1157,7 +1345,7 @@ async function convertCircuitJsonTo3D(circuitJson, options = {}) {
       z: cad.position.y
     } : {
       x: pcbComponent?.center.x ?? 0,
-      y: isBottomLayer ? -(boardThickness / 2 + size.y / 2) : boardThickness / 2 + size.y / 2,
+      y: isBottomLayer ? -(effectiveBoardThickness / 2 + size.y / 2) : effectiveBoardThickness / 2 + size.y / 2,
       z: pcbComponent?.center.y ?? 0
     };
     const meshType = model_stl_url ? "stl" : model_obj_url ? "obj" : model_gltf_url ? "gltf" : "glb";
@@ -1226,7 +1414,7 @@ async function convertCircuitJsonTo3D(circuitJson, options = {}) {
     boxes.push({
       center: {
         x: component.center.x,
-        y: isBottomLayer ? -(boardThickness / 2 + compHeight / 2) : boardThickness / 2 + compHeight / 2,
+        y: isBottomLayer ? -(effectiveBoardThickness / 2 + compHeight / 2) : effectiveBoardThickness / 2 + compHeight / 2,
         z: component.center.y
       },
       size: {
@@ -1239,26 +1427,72 @@ async function convertCircuitJsonTo3D(circuitJson, options = {}) {
       labelColor: "white"
     });
   }
-  const boardDiagonal = Math.sqrt(
-    pcbBoard.width * pcbBoard.width + pcbBoard.height * pcbBoard.height
-  );
-  const cameraDistance = boardDiagonal * 1.5;
-  const camera = {
-    position: {
-      x: pcbBoard.center.x + cameraDistance * 0.5,
-      y: cameraDistance * 0.7,
-      z: pcbBoard.center.y + cameraDistance * 0.5
-    },
-    target: {
-      x: pcbBoard.center.x,
-      y: 0,
-      z: pcbBoard.center.y
-    },
-    up: { x: 0, y: 1, z: 0 },
-    fov: 50,
-    near: 0.1,
-    far: cameraDistance * 4
-  };
+  let camera;
+  if (pcbBoard) {
+    const boardDiagonal = Math.sqrt(
+      pcbBoard.width * pcbBoard.width + pcbBoard.height * pcbBoard.height
+    );
+    const cameraDistance = boardDiagonal * 1.5;
+    camera = {
+      position: {
+        x: pcbBoard.center.x + cameraDistance * 0.5,
+        y: cameraDistance * 0.7,
+        z: pcbBoard.center.y + cameraDistance * 0.5
+      },
+      target: {
+        x: pcbBoard.center.x,
+        y: 0,
+        z: pcbBoard.center.y
+      },
+      up: { x: 0, y: 1, z: 0 },
+      fov: 50,
+      near: 0.1,
+      far: cameraDistance * 4
+    };
+  } else {
+    const hasBoxes = boxes.length > 0;
+    if (hasBoxes) {
+      let minX = Infinity;
+      let minZ = Infinity;
+      let maxX = -Infinity;
+      let maxZ = -Infinity;
+      for (const box of boxes) {
+        const halfX = (box.size?.x ?? 0) / 2;
+        const halfZ = (box.size?.z ?? 0) / 2;
+        minX = Math.min(minX, box.center.x - halfX);
+        maxX = Math.max(maxX, box.center.x + halfX);
+        minZ = Math.min(minZ, box.center.z - halfZ);
+        maxZ = Math.max(maxZ, box.center.z + halfZ);
+      }
+      const width = Math.max(maxX - minX, 1);
+      const height = Math.max(maxZ - minZ, 1);
+      const diagonal = Math.sqrt(width * width + height * height);
+      const distance = diagonal * 1.5;
+      const centerX = (minX + maxX) / 2;
+      const centerZ = (minZ + maxZ) / 2;
+      camera = {
+        position: {
+          x: centerX + distance * 0.5,
+          y: distance * 0.7,
+          z: centerZ + distance * 0.5
+        },
+        target: { x: centerX, y: 0, z: centerZ },
+        up: { x: 0, y: 1, z: 0 },
+        fov: 50,
+        near: 0.1,
+        far: distance * 4
+      };
+    } else {
+      camera = {
+        position: { x: 30, y: 30, z: 25 },
+        target: { x: 0, y: 0, z: 0 },
+        up: { x: 0, y: 1, z: 0 },
+        fov: 50,
+        near: 0.1,
+        far: 120
+      };
+    }
+  }
   const lights = [
     {
       type: "ambient",
@@ -1969,7 +2203,181 @@ var GLTFBuilder = class {
     });
     this.gltf.scenes[0].nodes.push(nodeIndex);
   }
+  async addMeshWithFaceTextures(box, defaultMaterialIndex) {
+    const topTriangles = [];
+    const bottomTriangles = [];
+    const sideTriangles = [];
+    const yThreshold = 0.8;
+    for (const triangle of box.mesh.triangles) {
+      const ny = Math.abs(triangle.normal.y);
+      if (ny > yThreshold) {
+        if (triangle.normal.y > 0) {
+          topTriangles.push(triangle);
+        } else {
+          bottomTriangles.push(triangle);
+        }
+      } else {
+        sideTriangles.push(triangle);
+      }
+    }
+    const materials = [];
+    if (topTriangles.length > 0 && box.texture?.top) {
+      const topMaterialIndex = this.addMaterial({
+        name: `TopMaterial_${this.materials.length}`,
+        pbrMetallicRoughness: {
+          baseColorFactor: [1, 1, 1, 1],
+          metallicFactor: 0,
+          roughnessFactor: 0.8
+        },
+        alphaMode: "OPAQUE",
+        doubleSided: true
+      });
+      const textureIndex = await this.addTextureFromDataUrl(box.texture.top);
+      if (textureIndex !== -1) {
+        const material = this.materials[topMaterialIndex];
+        if (material.pbrMetallicRoughness) {
+          material.pbrMetallicRoughness.baseColorTexture = {
+            index: textureIndex
+          };
+        }
+      }
+      materials.push({
+        triangles: topTriangles,
+        materialIndex: topMaterialIndex
+      });
+    }
+    if (bottomTriangles.length > 0 && box.texture?.bottom) {
+      const bottomMaterialIndex = this.addMaterial({
+        name: `BottomMaterial_${this.materials.length}`,
+        pbrMetallicRoughness: {
+          baseColorFactor: [1, 1, 1, 1],
+          metallicFactor: 0,
+          roughnessFactor: 0.8
+        },
+        alphaMode: "OPAQUE",
+        doubleSided: true
+      });
+      const textureIndex = await this.addTextureFromDataUrl(box.texture.bottom);
+      if (textureIndex !== -1) {
+        const material = this.materials[bottomMaterialIndex];
+        if (material.pbrMetallicRoughness) {
+          material.pbrMetallicRoughness.baseColorTexture = {
+            index: textureIndex
+          };
+        }
+      }
+      materials.push({
+        triangles: bottomTriangles,
+        materialIndex: bottomMaterialIndex
+      });
+    }
+    if (sideTriangles.length > 0) {
+      const sideMaterialIndex = this.addMaterial({
+        name: `GreenSideMaterial_${this.materials.length}`,
+        pbrMetallicRoughness: {
+          baseColorFactor: [0, 0.55, 0, 1],
+          metallicFactor: 0,
+          roughnessFactor: 0.8
+        },
+        alphaMode: "OPAQUE",
+        doubleSided: true
+      });
+      materials.push({
+        triangles: sideTriangles,
+        materialIndex: sideMaterialIndex
+      });
+    }
+    const primitives = [];
+    const bounds = getBounds([]);
+    let minX = Infinity, minY = Infinity, minZ = Infinity;
+    let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+    for (const triangle of box.mesh.triangles) {
+      for (const v of triangle.vertices) {
+        minX = Math.min(minX, v.x);
+        minY = Math.min(minY, v.y);
+        minZ = Math.min(minZ, v.z);
+        maxX = Math.max(maxX, v.x);
+        maxY = Math.max(maxY, v.y);
+        maxZ = Math.max(maxZ, v.z);
+      }
+    }
+    const sizeX = maxX - minX;
+    const sizeZ = maxZ - minZ;
+    for (const { triangles, materialIndex } of materials) {
+      const positions = [];
+      const normals = [];
+      const texcoords = [];
+      const indices = [];
+      let vertexIndex = 0;
+      for (const triangle of triangles) {
+        for (const v of triangle.vertices) {
+          positions.push(v.x, v.y, v.z);
+          normals.push(triangle.normal.x, triangle.normal.y, triangle.normal.z);
+          const u = sizeX > 0 ? (v.x - minX) / sizeX : 0.5;
+          const v_coord = sizeZ > 0 ? (v.z - minZ) / sizeZ : 0.5;
+          texcoords.push(u, 1 - v_coord);
+        }
+        indices.push(vertexIndex, vertexIndex + 1, vertexIndex + 2);
+        vertexIndex += 3;
+      }
+      const meshData = { positions, normals, texcoords, indices };
+      const transformedMeshData = transformMesh(
+        meshData,
+        box.center,
+        box.rotation
+      );
+      const positionAccessorIndex = this.addAccessor(
+        transformedMeshData.positions,
+        "VEC3",
+        COMPONENT_TYPE.FLOAT,
+        TARGET.ARRAY_BUFFER
+      );
+      const normalAccessorIndex = this.addAccessor(
+        transformedMeshData.normals,
+        "VEC3",
+        COMPONENT_TYPE.FLOAT,
+        TARGET.ARRAY_BUFFER
+      );
+      const texcoordAccessorIndex = this.addAccessor(
+        transformedMeshData.texcoords,
+        "VEC2",
+        COMPONENT_TYPE.FLOAT,
+        TARGET.ARRAY_BUFFER
+      );
+      const indicesAccessorIndex = this.addAccessor(
+        transformedMeshData.indices,
+        "SCALAR",
+        COMPONENT_TYPE.UNSIGNED_SHORT,
+        TARGET.ELEMENT_ARRAY_BUFFER
+      );
+      primitives.push({
+        attributes: {
+          POSITION: positionAccessorIndex,
+          NORMAL: normalAccessorIndex,
+          TEXCOORD_0: texcoordAccessorIndex
+        },
+        indices: indicesAccessorIndex,
+        material: materialIndex,
+        mode: PRIMITIVE_MODE.TRIANGLES
+      });
+    }
+    const meshIndex = this.meshes.length;
+    this.meshes.push({
+      name: box.label || `MeshWithTextures${meshIndex}`,
+      primitives
+    });
+    const nodeIndex = this.nodes.length;
+    this.nodes.push({
+      name: box.label || `Box${nodeIndex}`,
+      mesh: meshIndex
+    });
+    this.gltf.scenes[0].nodes.push(nodeIndex);
+  }
   async addBoxWithFaceMaterials(box, defaultMaterialIndex) {
+    if (box.mesh) {
+      await this.addMeshWithFaceTextures(box, defaultMaterialIndex);
+      return;
+    }
     const faceMeshes = createBoxMeshByFaces(box.size);
     const faceMaterials = {};
     if (box.texture?.top) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "circuit-json-to-gltf",
   "main": "dist/index.js",
   "type": "module",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "scripts": {
     "test": "bun test tests/",
     "format": "biome format --write .",
@@ -27,15 +27,16 @@
     "bun-match-svg": "^0.0.12",
     "circuit-json": "^0.0.267",
     "circuit-to-svg": "^0.0.175",
+    "graphics-debug": "^0.0.65",
     "looks-same": "^9.0.1",
     "poppygl": "^0.0.9",
     "react": "^19.1.1",
     "react-cosmos": "^7.0.0",
     "react-cosmos-plugin-vite": "^7.0.0",
     "react-dom": "^19.1.1",
+    "tscircuit": "^0.0.701",
     "tsup": "^8.5.0",
-    "vite": "^7.1.1",
-    "tscircuit": "^0.0.701"
+    "vite": "^7.1.1"
   },
   "peerDependencies": {
     "typescript": "^5",
@@ -52,5 +53,8 @@
     "@resvg/resvg-js": {
       "optional": true
     }
+  },
+  "dependencies": {
+    "@jscad/modeling": "^2.12.6"
   }
 }