fix: Fix X-axis flipping issue

lib/gltf/gltf-builder.ts

@@ -63,6 +63,35 @@ export class GLTFBuilder {
     this.imageDataMap = new Map()
   }
 
+  private applyGLTFOrientation(meshData: MeshData): MeshData {
+    const fixed: MeshData = {
+      positions: [...meshData.positions],
+      normals: [...meshData.normals],
+      texcoords: [...meshData.texcoords],
+      indices: [...meshData.indices],
+    }
+
+    if (meshData.colors) {
+      fixed.colors = [...meshData.colors]
+    }
+
+    for (let i = 0; i < fixed.positions.length; i += 3) {
+      fixed.positions[i] = -fixed.positions[i]!
+    }
+
+    for (let i = 0; i < fixed.normals.length; i += 3) {
+      fixed.normals[i] = -fixed.normals[i]!
+    }
+
+    for (let i = 0; i < fixed.indices.length; i += 3) {
+      const temp = fixed.indices[i + 1]!
+      fixed.indices[i + 1] = fixed.indices[i + 2]!
+      fixed.indices[i + 2] = temp
+    }
+
+    return fixed
+  }
+
   async buildFromScene3D(scene3D: Scene3D): Promise<void> {
     // Add default material
     const defaultMaterialIndex = this.addMaterial({
@@ -197,30 +226,31 @@ export class GLTFBuilder {
         box.center,
         box.rotation,
       )
+      const gltfMeshData = this.applyGLTFOrientation(transformedMeshData)
 
       const positionAccessorIndex = this.addAccessor(
-        transformedMeshData.positions,
+        gltfMeshData.positions,
         "VEC3",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const normalAccessorIndex = this.addAccessor(
-        transformedMeshData.normals,
+        gltfMeshData.normals,
         "VEC3",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const texcoordAccessorIndex = this.addAccessor(
-        transformedMeshData.texcoords,
+        gltfMeshData.texcoords,
         "VEC2",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const indicesAccessorIndex = this.addAccessor(
-        transformedMeshData.indices,
+        gltfMeshData.indices,
         "SCALAR",
         COMPONENT_TYPE.UNSIGNED_SHORT,
         TARGET.ELEMENT_ARRAY_BUFFER,
@@ -419,30 +449,31 @@ export class GLTFBuilder {
         box.center,
         box.rotation,
       )
+      const gltfMeshData = this.applyGLTFOrientation(transformedMeshData)
 
       const positionAccessorIndex = this.addAccessor(
-        transformedMeshData.positions,
+        gltfMeshData.positions,
         "VEC3",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const normalAccessorIndex = this.addAccessor(
-        transformedMeshData.normals,
+        gltfMeshData.normals,
         "VEC3",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const texcoordAccessorIndex = this.addAccessor(
-        transformedMeshData.texcoords,
+        gltfMeshData.texcoords,
         "VEC2",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const indicesAccessorIndex = this.addAccessor(
-        transformedMeshData.indices,
+        gltfMeshData.indices,
         "SCALAR",
         COMPONENT_TYPE.UNSIGNED_SHORT,
         TARGET.ELEMENT_ARRAY_BUFFER,
@@ -572,31 +603,32 @@ export class GLTFBuilder {
         box.center,
         box.rotation,
       )
+      const gltfFaceData = this.applyGLTFOrientation(transformedFaceData)
 
       // Create accessors for this face
       const positionAccessorIndex = this.addAccessor(
-        transformedFaceData.positions,
+        gltfFaceData.positions,
         "VEC3",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const normalAccessorIndex = this.addAccessor(
-        transformedFaceData.normals,
+        gltfFaceData.normals,
         "VEC3",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const texcoordAccessorIndex = this.addAccessor(
-        transformedFaceData.texcoords,
+        gltfFaceData.texcoords,
         "VEC2",
         COMPONENT_TYPE.FLOAT,
         TARGET.ARRAY_BUFFER,
       )
 
       const indicesAccessorIndex = this.addAccessor(
-        transformedFaceData.indices,
+        gltfFaceData.indices,
         "SCALAR",
         COMPONENT_TYPE.UNSIGNED_SHORT,
         TARGET.ELEMENT_ARRAY_BUFFER,
@@ -638,31 +670,32 @@ export class GLTFBuilder {
     name?: string,
   ): number {
     const meshIndex = this.meshes.length
+    const gltfMeshData = this.applyGLTFOrientation(meshData)
 
     // Create accessors for vertex data
     const positionAccessorIndex = this.addAccessor(
-      meshData.positions,
+      gltfMeshData.positions,
       "VEC3",
       COMPONENT_TYPE.FLOAT,
       TARGET.ARRAY_BUFFER,
     )
 
     const normalAccessorIndex = this.addAccessor(
-      meshData.normals,
+      gltfMeshData.normals,
       "VEC3",
       COMPONENT_TYPE.FLOAT,
       TARGET.ARRAY_BUFFER,
     )
 
     const texcoordAccessorIndex = this.addAccessor(
-      meshData.texcoords,
+      gltfMeshData.texcoords,
       "VEC2",
       COMPONENT_TYPE.FLOAT,
       TARGET.ARRAY_BUFFER,
     )
 
     const indicesAccessorIndex = this.addAccessor(
-      meshData.indices,
+      gltfMeshData.indices,
       "SCALAR",
       COMPONENT_TYPE.UNSIGNED_SHORT,
       TARGET.ELEMENT_ARRAY_BUFFER,

tests/snapshot/led-texture-coordinates.test.tsx

@@ -0,0 +1,30 @@
+import { Circuit } from "tscircuit"
+import { test, expect } from "bun:test"
+import { convertCircuitJsonToGltf } from "../../lib"
+import { getBestCameraPosition } from "../../lib/utils/camera-position"
+import { renderGLTFToPNGBufferFromGLBBuffer } from "poppygl"
+
+test("led-texture-coordinates-snapshot", async () => {
+  const circuit = new Circuit()
+  circuit.add(
+    <board width="12mm" height="12mm" pcbX={2} pcbY={2}>
+      <led name="L0_0" footprint="0603" color="red" pcbX={0} pcbY={0} />
+      <led name="L5_5" footprint="0603" color="red" pcbX={5} pcbY={5} />
+      <led name="L0_5" footprint="0603" color="red" pcbX={0} pcbY={5} />
+    </board>,
+  )
+
+  const circuitJson = await circuit.getCircuitJson()
+
+  const glb = await convertCircuitJsonToGltf(circuitJson, {
+    format: "glb",
+  })
+
+  const cameraOptions = getBestCameraPosition(circuitJson)
+  cameraOptions.camPos = [6, 14, 8]
+  cameraOptions.lookAt = [0, 0, 1]
+
+  expect(
+    await renderGLTFToPNGBufferFromGLBBuffer(glb as ArrayBuffer, cameraOptions),
+  ).toMatchPngSnapshot(import.meta.path)
+})