Three.js - Gerber 3D viewer

Three.js를 찍먹만 해보다가 회사에서 우연히 3D circuit viewer를 개발할 기회가 생겼었습니다

 

근데 어디서 이상한(?) 오픈소스 긁어온거 유지보수 하다보니

 

문제가 많아서 이렇게 해보면 어떨까 하고 만들어 봤습니다

 

링크: https://devmemory.github.io/gerber-3d-viewer/

< 3D circuit viewer >

 

먼저 Gerber 파일은 PCB 제조할 때 필수적인 파일로

 

copper layers, solder mask, SilkScreen, Dril files등 pcb의 납땜되는 부분, 홀, 텍스트 등을 표현한 파일입니다

 

예제 데이터를 하나 보면

 

G04 Layer: BottomPasteMaskLayer*
G04 EasyEDA v6.5.44, 2024-08-30 12:30:28*
G04 77815516a58b4829bcb509a324bd7d2e,788fc08b779143ca9705167730dd7b56,00*
G04 Gerber Generator version 0.2*
G04 Scale: 100 percent, Rotated: No, Reflected: No *
G04 Dimensions in millimeters *
G04 leading zeros omitted , absolute positions ,4 integer and 5 decimal *
%FSLAX45Y45*%
%MOMM*%

%AMMACRO1*4,1,4,0.742,-0.0349,0.0349,-0.742,-0.742,0.0349,-0.035,0.742,0.742,-0.0349,0*%
%AMMACRO2*4,1,4,0.742,-0.035,0.0349,-0.742,-0.742,0.0349,-0.0349,0.742,0.742,-0.035,0*%
%AMMACRO3*4,1,4,-0.0353,-0.7424,-0.7424,-0.0353,0.0353,0.7424,0.7424,0.0353,-0.0353,-0.7424,0*%
%AMMACRO4*4,1,4,0.0353,0.7424,0.7424,0.0353,-0.0353,-0.7424,-0.7424,-0.0353,0.0353,0.7424,0*%
%AMMACRO5*4,1,4,0.742,-0.0349,0.0349,-0.742,-0.742,0.035,-0.0349,0.742,0.742,-0.0349,0*%
%AMMACRO6*4,1,4,0.742,-0.0349,0.035,-0.742,-0.742,0.0349,-0.0349,0.742,0.742,-0.0349,0*%
%AMMACRO7*4,1,4,-0.7424,0.0353,-0.0353,0.7424,0.7424,-0.0353,0.0353,-0.7424,-0.7424,0.0353,0*%
%AMMACRO8*4,1,4,-0.5005,-0.6999,0.5005,-0.6999,0.5005,0.6999,-0.5005,0.6999,-0.5005,-0.6999,0*%
%AMMACRO9*4,1,4,-0.5,-0.7,0.5,-0.7,0.5,0.7,-0.5,0.7,-0.5,-0.7,0*%
%AMMACRO10*4,1,4,-0.7417,0.0346,-0.0346,0.7417,0.7417,-0.0346,0.0346,-0.7417,-0.7417,0.0346,0*%
%ADD10MACRO1*%
%ADD11MACRO2*%
%ADD12MACRO3*%
%ADD13MACRO4*%
%ADD14MACRO5*%
%ADD15MACRO6*%
%ADD16MACRO7*%
%ADD17MACRO8*%
%ADD18MACRO9*%
%ADD20MACRO10*%

%LPD*%
D10*
G01*
X8649223Y-1402848D03*
D11*
G01*
X8529012Y-1523057D03*
D12*
G01*
X8649329Y-8635191D03*
G01*
X8529120Y-8514981D03*
D13*
G01*
X8275120Y-8260981D03*
G01*
X8395329Y-8381191D03*
D12*
G01*
X1791258Y-1777094D03*
G01*
X1671048Y-1656883D03*
D14*
G01*
X1791294Y-8260946D03*
D15*
G01*
X1671083Y-8381155D03*
D16*
G01*
X8275048Y-1777094D03*
G01*
X8395258Y-1656883D03*
D13*
G01*
X1416977Y-1402812D03*
G01*
X1537186Y-1523022D03*
D17*
G01*
X1050150Y-1135189D03*
D18*
G01*
X1145222Y-915187D03*
G01*
X955103Y-915187D03*
D20*
G01*
X1417048Y-8635118D03*
G01*
X1537258Y-8514910D03*
M02*

어떤 의미인지 잘 모르겠는 데이터로 이뤄져있습니다

 

해당 부분을 해결하기 위해

 

2가지 방법을 생각해봤습니다

 

1. gerber file을 json으로 만들어서 line, circle등 직접 다 그리기

https://www.npmjs.com/package/gerber-parser

2. gerber file을 이미지로 만들어서 판 생성 후 덮기

https://www.npmjs.com/package/pcb-stackup

 

시간이 정말 많았다면 1번을 해보겠지만 2번을 선택할만한 이유가 많았습니다

(시간은 결국 돈이다 보니 어쩔 수 없는 선택을..)

 

2번으로 작업할 때, 해당 프로세스는 이렇게 됩니다

 

1. zip파일 해제(jszip링크 참고: https://devmemory.tistory.com/127)

2. 파일 확장자명으로 validation

3. 거버 파일 to svg

4. svg to png

5. 보드 생성

6. 배경, 조명, 인터렉션 등 설정

 

여기서 svg를 왜 굳이 png로 만드냐면 해보면 압니다

 

보통 3D에 텍스쳐를 입힐 때, 3d image 혹은 vector graphic등을 rasterizing하는 작업이 이뤄지는데

 

간단하게 이미지를 픽셀화 한다고 생각하시면 될거 같습니다

rasterizing이란 기술에 대해 조금 이해해볼 필요가 있을거 같아서 링크도 붙입니다

(https://ko.wikipedia.org/wiki/%EB%9E%98%EC%8A%A4%ED%84%B0%ED%99%94)

 

svg를 loader로 불러와서 직접 매핑하면 비트맵을 생성해서 붙이게 되는데

 

뿌옇게 보이는 이슈가 발생합니다

 

stackoverflow, chatGPT등 여기저기를  참고해봤을 때

 

png로 만드는게 더 합리적이겠다라는 생각이 들어서 png로 변환을 해서 붙이는 쪽으로 작업을 해봤습니다