circuit-json-to-gltf 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -135,7 +135,7 @@ declare function clearSTLCache(): void;
 declare function loadOBJ(url: string, transform?: CoordinateTransformConfig): Promise<OBJMesh>;
 declare function clearOBJCache(): void;
 
-declare function loadGLB(url: string, transform?: CoordinateTransformConfig): Promise<STLMesh>;
+declare function loadGLB(url: string, transform?: CoordinateTransformConfig): Promise<STLMesh | OBJMesh>;
 declare function clearGLBCache(): void;
 
 declare function convertCircuitJsonTo3D(circuitJson: CircuitJson, options?: CircuitTo3DOptions): Promise<Scene3D>;

package/dist/index.js

@@ -534,11 +534,59 @@ function parseGLB(buffer, transform) {
     axisMapping: { x: "x", y: "z", z: "y" }
   };
   const transformedTriangles = transformTriangles(triangles, finalConfig);
+  const hasColors = transformedTriangles.some((t) => t.color !== void 0);
+  if (hasColors) {
+    return convertToOBJMesh(transformedTriangles);
+  }
   return {
     triangles: transformedTriangles,
     boundingBox: calculateBoundingBox3(transformedTriangles)
   };
 }
+function convertToOBJMesh(triangles) {
+  const colorGroups = /* @__PURE__ */ new Map();
+  for (const triangle of triangles) {
+    const colorKey = triangle.color ? JSON.stringify(triangle.color) : "default";
+    if (!colorGroups.has(colorKey)) {
+      colorGroups.set(colorKey, []);
+    }
+    colorGroups.get(colorKey).push(triangle);
+  }
+  const materials = /* @__PURE__ */ new Map();
+  const materialIndexMap = /* @__PURE__ */ new Map();
+  let materialIndex = 0;
+  const trianglesWithMaterialIndex = [];
+  for (const [colorKey, groupTriangles] of colorGroups) {
+    const materialName = `Material_${materialIndex}`;
+    materialIndexMap.set(materialName, materialIndex);
+    if (colorKey === "default") {
+      materials.set(materialName, {
+        name: materialName,
+        color: [179, 179, 179, 1]
+        // 0.7 * 255 = 179
+      });
+    } else {
+      const color = JSON.parse(colorKey);
+      materials.set(materialName, {
+        name: materialName,
+        color
+      });
+    }
+    for (const triangle of groupTriangles) {
+      trianglesWithMaterialIndex.push({
+        ...triangle,
+        materialIndex
+      });
+    }
+    materialIndex++;
+  }
+  return {
+    triangles: trianglesWithMaterialIndex,
+    boundingBox: calculateBoundingBox3(trianglesWithMaterialIndex),
+    materials,
+    materialIndexMap
+  };
+}
 function extractTrianglesFromGLTF(gltf, binaryBuffer) {
   const triangles = [];
   if (!gltf.meshes || !gltf.accessors || !gltf.bufferViews) {
@@ -570,6 +618,29 @@ function extractTrianglesFromGLTF(gltf, binaryBuffer) {
           binaryBuffer
         );
       }
+      let vertexColors;
+      const colorAccessorIndex = primitive.attributes.COLOR_0;
+      if (colorAccessorIndex !== void 0) {
+        const colorAccessor = gltf.accessors[colorAccessorIndex];
+        vertexColors = getAccessorData(
+          colorAccessor,
+          gltf.bufferViews,
+          binaryBuffer
+        );
+      }
+      let materialColor;
+      if (!vertexColors && primitive.material !== void 0 && gltf.materials) {
+        const material = gltf.materials[primitive.material];
+        if (material?.pbrMetallicRoughness?.baseColorFactor) {
+          const factor = material.pbrMetallicRoughness.baseColorFactor;
+          materialColor = [
+            Math.round(factor[0] * 255),
+            Math.round(factor[1] * 255),
+            Math.round(factor[2] * 255),
+            factor[3]
+          ];
+        }
+      }
       let indices;
       if (primitive.indices !== void 0) {
         const indexAccessor = gltf.accessors[primitive.indices];
@@ -619,7 +690,44 @@ function extractTrianglesFromGLTF(gltf, binaryBuffer) {
           } else {
             normal = computeNormal(v0, v1, v2);
           }
-          triangles.push({ vertices: [v0, v1, v2], normal });
+          let triangleColor;
+          if (vertexColors) {
+            const componentsPerColor = vertexColors.length / vertexCount;
+            if (componentsPerColor === 3) {
+              triangleColor = [
+                Math.round(
+                  (vertexColors[i0 * 3] + vertexColors[i1 * 3] + vertexColors[i2 * 3]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i0 * 3 + 1] + vertexColors[i1 * 3 + 1] + vertexColors[i2 * 3 + 1]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i0 * 3 + 2] + vertexColors[i1 * 3 + 2] + vertexColors[i2 * 3 + 2]) / 3 * 255
+                ),
+                1
+              ];
+            } else if (componentsPerColor === 4) {
+              triangleColor = [
+                Math.round(
+                  (vertexColors[i0 * 4] + vertexColors[i1 * 4] + vertexColors[i2 * 4]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i0 * 4 + 1] + vertexColors[i1 * 4 + 1] + vertexColors[i2 * 4 + 1]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i0 * 4 + 2] + vertexColors[i1 * 4 + 2] + vertexColors[i2 * 4 + 2]) / 3 * 255
+                ),
+                (vertexColors[i0 * 4 + 3] + vertexColors[i1 * 4 + 3] + vertexColors[i2 * 4 + 3]) / 3
+              ];
+            }
+          } else {
+            triangleColor = materialColor;
+          }
+          triangles.push({
+            vertices: [v0, v1, v2],
+            normal,
+            color: triangleColor
+          });
         }
       } else {
         for (let i = 0; i < vertexCount; i += 3) {
@@ -648,7 +756,44 @@ function extractTrianglesFromGLTF(gltf, binaryBuffer) {
           } else {
             normal = computeNormal(v0, v1, v2);
           }
-          triangles.push({ vertices: [v0, v1, v2], normal });
+          let triangleColor;
+          if (vertexColors) {
+            const componentsPerColor = vertexColors.length / vertexCount;
+            if (componentsPerColor === 3) {
+              triangleColor = [
+                Math.round(
+                  (vertexColors[i * 3] + vertexColors[(i + 1) * 3] + vertexColors[(i + 2) * 3]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i * 3 + 1] + vertexColors[(i + 1) * 3 + 1] + vertexColors[(i + 2) * 3 + 1]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i * 3 + 2] + vertexColors[(i + 1) * 3 + 2] + vertexColors[(i + 2) * 3 + 2]) / 3 * 255
+                ),
+                1
+              ];
+            } else if (componentsPerColor === 4) {
+              triangleColor = [
+                Math.round(
+                  (vertexColors[i * 4] + vertexColors[(i + 1) * 4] + vertexColors[(i + 2) * 4]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i * 4 + 1] + vertexColors[(i + 1) * 4 + 1] + vertexColors[(i + 2) * 4 + 1]) / 3 * 255
+                ),
+                Math.round(
+                  (vertexColors[i * 4 + 2] + vertexColors[(i + 1) * 4 + 2] + vertexColors[(i + 2) * 4 + 2]) / 3 * 255
+                ),
+                (vertexColors[i * 4 + 3] + vertexColors[(i + 1) * 4 + 3] + vertexColors[(i + 2) * 4 + 3]) / 3
+              ];
+            }
+          } else {
+            triangleColor = materialColor;
+          }
+          triangles.push({
+            vertices: [v0, v1, v2],
+            normal,
+            color: triangleColor
+          });
         }
       }
     }
@@ -742,6 +887,95 @@ function clearGLBCache() {
   glbCache.clear();
 }
 
+// lib/loaders/gltf.ts
+async function fetchAsArrayBuffer(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+  }
+  return response.arrayBuffer();
+}
+function dataUriToArrayBuffer(uri) {
+  const a = uri.split(",");
+  const byteString = atob(a[1]);
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  return ab;
+}
+async function fetchGltfAndConvertToGlb(url) {
+  const gltfResponse = await fetch(url);
+  if (!gltfResponse.ok) {
+    throw new Error(`Failed to fetch glTF file: ${gltfResponse.statusText}`);
+  }
+  const gltf = await gltfResponse.json();
+  const bufferPromises = [];
+  if (gltf.buffers) {
+    for (const buffer of gltf.buffers) {
+      if (buffer.uri) {
+        if (buffer.uri.startsWith("data:")) {
+          bufferPromises.push(Promise.resolve(dataUriToArrayBuffer(buffer.uri)));
+        } else {
+          const bufferUrl = new URL(buffer.uri, url).toString();
+          bufferPromises.push(fetchAsArrayBuffer(bufferUrl));
+        }
+      }
+    }
+  }
+  const buffers = await Promise.all(bufferPromises);
+  let binaryBuffer = new ArrayBuffer(0);
+  if (buffers.length > 0 && buffers[0]) {
+    binaryBuffer = buffers[0];
+  }
+  if (gltf.buffers && gltf.buffers.length > 0) {
+    delete gltf.buffers[0].uri;
+    gltf.buffers[0].byteLength = binaryBuffer.byteLength;
+  }
+  const jsonString = JSON.stringify(gltf);
+  const jsonBuffer = new TextEncoder().encode(jsonString);
+  const jsonPadding = (4 - jsonBuffer.length % 4) % 4;
+  const binaryPadding = (4 - binaryBuffer.byteLength % 4) % 4;
+  const totalLength = 12 + // header
+  (8 + jsonBuffer.length + jsonPadding) + // json chunk
+  (binaryBuffer.byteLength > 0 ? 8 + binaryBuffer.byteLength + binaryPadding : 0);
+  const glbBuffer = new ArrayBuffer(totalLength);
+  const dataView = new DataView(glbBuffer);
+  let offset = 0;
+  dataView.setUint32(offset, 1179937895, true);
+  offset += 4;
+  dataView.setUint32(offset, 2, true);
+  offset += 4;
+  dataView.setUint32(offset, totalLength, true);
+  offset += 4;
+  dataView.setUint32(offset, jsonBuffer.length + jsonPadding, true);
+  offset += 4;
+  dataView.setUint32(offset, 1313821514, true);
+  offset += 4;
+  new Uint8Array(glbBuffer, offset).set(jsonBuffer);
+  offset += jsonBuffer.length;
+  for (let i = 0; i < jsonPadding; i++) {
+    dataView.setUint8(offset++, 32);
+  }
+  if (binaryBuffer.byteLength > 0) {
+    dataView.setUint32(offset, binaryBuffer.byteLength + binaryPadding, true);
+    offset += 4;
+    dataView.setUint32(offset, 5130562, true);
+    offset += 4;
+    new Uint8Array(glbBuffer, offset).set(new Uint8Array(binaryBuffer));
+    offset += binaryBuffer.byteLength;
+    for (let i = 0; i < binaryPadding; i++) {
+      dataView.setUint8(offset++, 0);
+    }
+  }
+  return glbBuffer;
+}
+async function loadGLTF(url, transform) {
+  const glb_buffer = await fetchGltfAndConvertToGlb(url);
+  return parseGLB(glb_buffer, transform);
+}
+
 // lib/converters/board-renderer.ts
 import { convertCircuitJsonToPcbSvg } from "circuit-to-svg";
 async function renderBoardLayer(circuitJson, options) {
@@ -900,12 +1134,15 @@ async function convertCircuitJsonTo3D(circuitJson, options = {}) {
   const cadComponents = db.cad_component?.list?.() ?? [];
   const pcbComponentIdsWith3D = /* @__PURE__ */ new Set();
   for (const cad of cadComponents) {
-    let { model_stl_url, model_obj_url, model_glb_url } = cad;
-    const hasModelUrl = Boolean(model_stl_url || model_obj_url || model_glb_url);
+    let { model_stl_url, model_obj_url, model_glb_url, model_gltf_url } = cad;
+    const hasModelUrl = Boolean(
+      model_stl_url || model_obj_url || model_glb_url || model_gltf_url
+    );
     if (!hasModelUrl && cad.footprinter_string) {
       model_glb_url = `https://modelcdn.tscircuit.com/jscad_models/${cad.footprinter_string}.glb`;
     }
-    if (!model_stl_url && !model_obj_url && !model_glb_url) continue;
+    if (!model_stl_url && !model_obj_url && !model_glb_url && !model_gltf_url)
+      continue;
     pcbComponentIdsWith3D.add(cad.pcb_component_id);
     const pcbComponent = db.pcb_component.get(cad.pcb_component_id);
     const size = cad.size ?? {
@@ -918,26 +1155,35 @@ async function convertCircuitJsonTo3D(circuitJson, options = {}) {
       y: boardThickness / 2 + size.y / 2,
       z: pcbComponent?.center.y ?? 0
     };
+    const meshType = model_stl_url ? "stl" : model_obj_url ? "obj" : model_gltf_url ? "gltf" : "glb";
     const box = {
       center,
       size,
-      meshUrl: model_stl_url || model_obj_url || model_glb_url,
-      meshType: model_stl_url ? "stl" : model_obj_url ? "obj" : "glb"
+      meshUrl: model_stl_url || model_obj_url || model_glb_url || model_gltf_url,
+      meshType
     };
     if (cad.rotation) {
-      box.rotation = convertRotationFromCadRotation(cad.rotation);
-    }
-    const defaultTransform = coordinateTransform ?? (model_glb_url ? void 0 : COORDINATE_TRANSFORMS.Z_UP_TO_Y_UP_USB_FIX);
-    try {
-      if (model_stl_url) {
-        box.mesh = await loadSTL(model_stl_url, defaultTransform);
-      } else if (model_obj_url) {
-        box.mesh = await loadOBJ(model_obj_url, defaultTransform);
-      } else if (model_glb_url) {
-        box.mesh = await loadGLB(model_glb_url, defaultTransform);
+      if (model_glb_url || model_gltf_url) {
+        box.rotation = convertRotationFromCadRotation({
+          x: cad.rotation.x,
+          y: cad.rotation.z,
+          // Circuit Z rotation becomes model Y rotation
+          z: cad.rotation.y
+          // Circuit Y rotation becomes model Z rotation
+        });
+      } else {
+        box.rotation = convertRotationFromCadRotation(cad.rotation);
       }
-    } catch (error) {
-      console.warn(`Failed to load 3D model: ${error}`);
+    }
+    const defaultTransform = coordinateTransform ?? (model_glb_url || model_gltf_url ? void 0 : COORDINATE_TRANSFORMS.Z_UP_TO_Y_UP_USB_FIX);
+    if (model_stl_url) {
+      box.mesh = await loadSTL(model_stl_url, defaultTransform);
+    } else if (model_obj_url) {
+      box.mesh = await loadOBJ(model_obj_url, defaultTransform);
+    } else if (model_glb_url) {
+      box.mesh = await loadGLB(model_glb_url, defaultTransform);
+    } else if (model_gltf_url) {
+      box.mesh = await loadGLTF(model_gltf_url, defaultTransform);
     }
     if (!box.mesh) {
       box.color = componentColor;
@@ -1619,18 +1865,19 @@ var GLTFBuilder = class {
     const meshDataArray = createMeshFromOBJ(objMesh);
     const objMaterialIndices = /* @__PURE__ */ new Map();
     for (const [name, objMaterial] of objMesh.materials) {
-      const dissolve = objMaterial.dissolve ?? 1;
-      const alpha = 1 - dissolve;
-      let baseColor = [0.3, 0.3, 0.3, alpha];
+      let baseColor = [0.3, 0.3, 0.3, 1];
       if (objMaterial.color) {
         const color = typeof objMaterial.color === "string" ? this.parseColorString(objMaterial.color) : [
           objMaterial.color[0] / 255,
           objMaterial.color[1] / 255,
           objMaterial.color[2] / 255,
-          alpha
+          objMaterial.color[3]
+          // Use the alpha from the color
         ];
-        baseColor = [color[0], color[1], color[2], alpha];
+        baseColor = [color[0], color[1], color[2], color[3]];
       }
+      const alpha = objMaterial.dissolve !== void 0 ? 1 - objMaterial.dissolve : baseColor[3];
+      baseColor[3] = alpha;
       const gltfMaterialIndex = this.addMaterial({
         name: `OBJ_${name}`,
         pbrMetallicRoughness: {

package/package.json

@@ -2,7 +2,7 @@
   "name": "circuit-json-to-gltf",
   "main": "dist/index.js",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "scripts": {
     "test": "bun test tests/",
     "format": "biome format --write .",