Anatomy
이 스킬은 벤치 위의 작은 계측기와 같은 그림을 만듭니다: 발 위의 무거운 베이스, 눈금자가 있는 레일, 부싱 위의 캐리지, 널링된 손잡이, 코일 스프링, 바늘이 움직이는 다이얼 게이지, 점으로 표시된 작은 나사. 독자는 기계를 인식하기 때문에 아이디어를 이해합니다. 그림에 표시되는 모든 숫자는 부품을 움직이는 동일한 모델에서 비롯됩니다.
8개의 완전한 예제가 스킬과 함께 제공됩니다. 시작하기 전에 가장 가까운 예제를 열어보세요. 각 프레임워크 없는 예제는 node examples/<name>/build.mjs로 빌드되며, 스크립트 옆에 독립 실행형 HTML 페이지를 생성합니다. --light를 추가하면 라이트 테마가 적용됩니다.
examples/dial-indicator/는 가장 작은 예제입니다: 스탠드 위의 다이얼 게이지로, 총 약 300줄입니다.examples/desk-computer/는 프레임워크 없는 SVG입니다: 키보드로 타이핑할 수 있는 데스크 컴퓨터. 타이핑된 줄은 케이스 전면 평면에 그려진 CRT 화면에 나타나며, 전원을 끄면 그림이 선과 점으로 축소됩니다. 약 85개의 솔리드와 850개의 패스로 구성됩니다.examples/arcade-cabinet/는 측면 패널이 제거된 직립형 아케이드 캐비닛으로, 약 240개의 솔리드와 15개의 케이블로 구성된 Hero 수준입니다. 25센트 동전이 슬롯으로 날아가 30° 경사면에서 구르는 디스크의 속도로 동전 슈트를 굴러 내려가 코인 스위치 와이어를 작동시키고 현금함에 떨어집니다. 스위치의 펄스는 케이블을 따라 보드까지 청크 단위로 이동하며, CRT가 예열되고 자체 테스트를 수행한 후 기울어진 모니터 평면에 그려진 어트랙트 모드를 실행합니다. 스틱이 기울어져 패널 아래의 마이크로스위치를 닫습니다. 이 예제는 절단면의 메커니즘이 보이도록 카메라를 배치하는 방법, 모든 축을 따라 프리즘으로 그려진 오목한 보드, 빌드에서 사용하는 동일한 모듈로 페이지에서 재구성된 움직이는 부품, 그리고 고정된 순서의 예약된 슬롯에 그려진 실시간 동전과 와이어를 보여줍니다.node build.mjs --audit는 지오메트리를 검증합니다.examples/raptor-engine/은 테스트 스탠드에 매달린 로켓 엔진입니다. 원형 부품은kit/lathe.mjs에서, 파이프와 하네스는kit/tube.mjs에서 가져옵니다. 11개의 어셈블리로 분해되며, 각각 지그재그 스프링과 프레임별 깊이 재정렬이 있습니다. 모든 부품은 실제 형상을 기록하며,node build.mjs --audit(kit/audit.mjs)은 정지 상태, 분해 상태, 폭발 애니메이션의 모든 재생 프레임에서 어떤 것도 서로 통과하지 않고, 모든 끝이 실제 마운트에 위치하며, 구부러짐이 핀치, 접힘 또는 다른 선 위에 놓이지 않고, 곡선 프로파일의 기울기가 흔들리지 않으며, 모든 겹침이 깊이 순서로 그려졌음을 증명합니다. WebGL 불기둥, 충격, 물보라 및 증기가 후면 및 전면 SVG 사이에서 렌더링됩니다. 밀집된 배관, 부드러운 음영 및 페이드의 참조 예제입니다.examples/ripple-tank/는 종이 스크린 위에 높은 다리 위에 놓인 학교용 리플 탱크로, 44° 위에서 바라본 모습입니다. 두 개의 WebGL 레이어(램프 빛, 그림자 및 종이의 코스틱스, 물의 반사 및 유리)가 등각 평면에 등록되고 순수 분산 및 광학 모델(model.mjs)에 의해 구동됩니다. 주파수 변화는 히스토리 텍스처를 통해 디퍼에서 바깥으로 전파됩니다.examples/test-rig/는 실제 사이트(React/Next)의 프로덕션 그림입니다: 스프링 장착 캐리지 위의 유리 버튼, 누르고 당기는 레일 위의 핑거 프로브, 그리고 기울기를 읽는 다이얼 게이지. 53개의 솔리드와 약 470개의 패스로 구성됩니다.examples/spot-plate/는 동일한 사이트의 두 번째 프로덕션 그림입니다: 스팟 플레이트 위의 6쌍의 유리 방울. 각 쌍은 하나의 거리 필드에서 그려지므로,merge보다 가까운 쌍은 하나의 유리 조각으로 합쳐집니다. 필러 블레이드 팬이merge를 설정하며, 각 간격마다 하나의 블레이드가 있습니다. 서로 형태가 변형되는 모양과 하나의 컨트롤이 여러 부품을 구동하는 방법의 참조 예제입니다.examples/turning-dial/은 선택적 3D 모드입니다: 작은 로봇 손이 달린 진정한 3D로 회전하는 조합 다이얼. 금속 재질의 약 90개의 라이브 부품, 두 번째 회전 그룹, 힌지, 들어 올리는 세 개의 힌지 핑거, 그리고 자유 물체로 분리되는 포드가 있습니다. WebGL LED, 그 빛 풀 및 스파크가 움직이는 부품을 따라갑니다. 옆에 있는stress.mjs는 복잡한 작업장에서 약 380개 부품으로 구성된 밀집된 핸드로, 성능 측정에 사용됩니다.
테스트 리그는 그림 자체의 품질 기준입니다. Raptor는 셰이더 작업의 기준입니다: WebGL 효과는 월드 스페이스, 팝 없음, 시임 없는 렌더링이라는 표준에 도달해야 합니다.
중요한 한 가지 아이디어
물체가 설명입니다. 상자, 화살표 및 레이블을 그리지 마세요. 작동 방식이 개념인 실제로 잘 만들어진 물리적 물체를 발명하세요. 다음은 이전 그림이 매핑된 방식입니다:
| 개념 | 물체 |
|---|---|
| 여러 캔버스를 제공하는 하나의 공유 GPU 컨텍스트 | 갠트리 플로터: 16개의 웰을 방문하는 하나의 프린트 헤드 |
| 변경 사항이 없을 때 작업을 건너뛰는 캐시 키 | 핀 텀블러 자물쇠: 모든 핀이 일치하면 플러그가 회전하고 다시 그리지 않음 |
| 픽셀당 바이트 수가 다른 7개의 렌더 타겟 | 7개의 서랍장, 각 서랍은 바이트 수만큼 깊음 |
| 분리 가능한 블러 (49 × 49 탭 vs 49 + 49) | 침대 못 스탬프와 레일 위의 두 콤 |
| 누르고 기울어지는 스프링 | 스프링, 프로브 및 다이얼 게이지가 있는 테스트 리그 |
| 높이 프로파일 | 가장자리에 밀착된 프로파일(윤곽) 게이지 |
| 방향에 따라 달라지는 빛 | 작은 포토 스튜디오: 턴테이블 주변의 키 및 필 램프 |
이것이 실패하는 두 가지 방법은 실제로 모두 관찰되었습니다:
- 너무 추상적입니다. 쌓인 판, 떠 있는 슬래브 또는 라벨이 붙은 상자는 어떤 것으로도 읽히지 않습니다.
- 너무 평평하고 밋밋합니다. 몇 개의 선이 있는 하나의 큰 슬래브는 부피, 부품 및 발견할 것이 없습니다.
두 가지 모두에 대한 해결책은 동일합니다: 많은 작고 정밀하며 목적이 있는 부품으로 만들어진 인식 가능한 기계입니다.
모든 창작물은 매우 상세합니다. 이는 아이디어나 요청이 아무리 작더라도 모든 그림에 적용됩니다: 빠른 설명자도 여전히 밀도 높은 실제 기계이며, 몇 개의 슬래브가 아닙니다. 크기(워크플로 단계 1)에 따라 확장되는 것은 얼마나 멀리 밀어붙이느냐입니다: Figure는 주제와 메커니즘에 대해 4배 확대 검사를 받고, Hero나 Epic은 전체 그림에 대해 검사를 받습니다.
- 실제를 읽으세요. 실제 물체가 만들어지는 방식대로 만드세요: 모든 나사, 이음매, 베벨, 부싱, 레이블 플레이트, 커넥터가 있는 케이블, 눈금이 있는 스케일, 그리고 부품을 고정하는 부품들.
- 두 가지 모습. 1배율에서는 하나의 명확한 기계로 읽힙니다. 4배율에서는 모든 영역에서 여전히 진정한 발견이 있습니다; 맨 얼굴이나 빈 구석은 미완성 작업이며, 차분함이 아닙니다.
- 목적이 있으며, 결코 노이즈가 아닙니다. 디테일은 메커니즘에 속하는 부품에서 비롯됩니다. 각 부품은 다른 부품 위에 앉고, 가장자리에서 끝나며, 멈추기보다는 페이드 아웃됩니다.
- 마지막으로 확인하세요. 완료하기 전에 4배율로 확대(Figure의 경우 주제와 메커니즘, Hero나 Epic의 경우 전체 그림)하고, 영역이 평범한 곳에 누락된 실제 부품을 추가하세요.
워크플로
이 순서대로 작업하세요. 지오메트리 전에 개념과 부품 목록을 작성하세요. 품질의 대부분은 그곳에서 결정됩니다.
- 시작하기 전에 크기를 정하세요. 다른 작업보다 먼저 크기를 명명하고, 아래 계층이 견적을 요청할 때 사용자에게 대략적인 소요 시간을 알려주세요.
- Figure: 하나의 메커니즘, 40–80개 부품, 최대 하나의 WebGL 레이어가 있는 SVG. 크기를 명명하고 묻지 않고 빌드하세요. Figure는 종종 한 시간 안에 완료되므로 사용자에게 시간을 알리지 마세요. 아래 진행 상황 확인에서는 최대 한 시간을 예산으로 잡으세요.
- Hero: 밀도 높은 객체, 여러 WebGL 레이어 또는 하나의 3D 주제, 80–150개 부품. 약 2–4시간. 그렇게 말한 다음 사용자가 빠른 것을 요청하지 않는 한 빌드하세요.
- Epic: 여러 움직이는 시스템이 있는 전체 차량, 건물 또는 공장, 또는 둘 이상의 주제에 대한 3D 모드. 6시간 이상. 시작하지 마세요. 견적을 제공하고, 아이디어의 핵심을 유지하는 Hero 버전을 제안하며, 전체 버전이 추가할 내용을 나열하세요. 사용자가 선택할 때만 Epic을 빌드하세요.
- 크기에 관계없이, 첫 1시간 이내에 브라우저에서 열리는 작업 페이지를 만들고, 거기서부터 심화하세요. 각 단계에서
date를 실행하고, 단계가 예상 시간의 두 배를 넘으면 사용자에게 현재 상황과 남은 작업을 알리세요.
- 먼저 진실. 설명되는 것의 실제 숫자와 동작을 수집하세요: 크기, 개수, 임계값, 곡선. 수치, 모션 및 캡션은 모두 진실해야 합니다. 가능하다면, test-rig 예제의
rig.ts와 같이 모델을 작은 순수 모듈로 작성하고, 모든 것을 그것으로 구동하세요. - 물체를 발명하세요. 개념에 일대일로 매핑되는 기계, 도구, 계측기 또는 가구를 선택하세요. 무엇이 움직이고 그 움직임이 무엇을 의미하는지 한 문장으로 말하세요. 참조 이미지를 절대 복사하지 마세요: 마감재를 가져오고 물체를 가져오지 마세요.
- 부품 목록. 최소 40개 부품(Figure 40–80개, Hero 80–150개, Epic 그 이상)을 작성하고 그룹화하세요: 베이스(플레이트, 발, 홈, 코너 나사, 레이블 플레이트, 자 스트립), 구조(포스트, 레일, 프레임 바, 엔드 스톱), 메커니즘(캐리지, 부싱, 스프링, 플런저, 바늘), 컨트롤(널링 손잡이, 엄지 나사, 크라운) 및 주제 자체(유일하게 조명되는 부분). 각 부품은 다른 부품 위에 앉습니다.
references/craft.md에는 레시피가 포함된 부품 어휘가 있습니다. - 세계를 계획하세요. 실제 물체의 약 1px에 해당하는 세계 단위를 사용하세요: x와 y는 바닥, z는 위쪽. 평면을 둥근 직사각형
{x, y, w, d, r}과 원으로 배치하세요. 카메라를 선택하세요: 기본 방위각 45°, 긴 쪽을 보여주기 위해 35–60°, 고도 30°(ripple tank의 44°와 같이 열린 것을 들여다보려면 더 높게). 그런 다음fitProjection(points, width, height, { pad, azimuth })로 맞추세요. - 지오메트리를 한 번 빌드하세요. 키트를 사용하여 지오메트리 모듈에서 모든 정적 패스를 미리 계산하세요:
slabOf,cylinder,extrude,planOutline,topTicks,knurl,coil,radialTicks등. 모든 축의 원형 부품(벨, 플랜지, 밸브, 액추에이터)은kit/lathe.mjs에서, 파이프와 케이블은kit/tube.mjs에서 가져옵니다. 움직이는 부품은 정지 위치에서 한 번 빌드되고translateAlong으로 이동됩니다. 모양이 변경되는 부품만 프레임당 재구성됩니다. - 뒤에서 앞으로, 아래에서 위로 칠하세요.
depthOf로 반복된 부품을 정렬하세요. 다른 부품을 감싸는 것은 뒤쪽 절반과 앞쪽 절반으로 나누세요: 막대 주변의 스프링, 캐리지 주변의 프레임 막대. 움직이는 부품은 물리적으로 위치한 슬롯에 그려집니다. "화가 순서"는references/craft.md를 참조하세요. 파이프, 케이블 및 원형 부품이 있으면 키를 눈으로 조정하는 것을 중단하세요: 각 항목의 모양을A.recorder(P, { order, spring })에 넣을 때 기록하고,A.settle(R, P)가 두 항목이 겹치는 곳에서 실제 깊이를 측정하고 키를 설정하게 한 다음,A.auditOrExit(R, P)로 빌드를 끝내세요. 파이프를 그리기 전에 라우팅하세요: 양쪽 끝의 실제 포트, 구조를 따른 다리, 직선에서의 교차, 파이프를 간격을 두는 칼라(references/craft.md, 섹션 8). 그린 것의 실제 모양을 기록하세요: 감사를 침묵시키는 대용 모양은 버그이며, 감사는 이를 실패로 처리합니다. 글랜드에서 미끄러져 나오는 막대는G.rodOut에서 하나의 막대이며A.slide로 기록됩니다. - 액자를 씌우세요. 그림을 카드에 넣으세요: 왼쪽 상단에
Fig n, 오른쪽 상단에 짧은 제목, 왼쪽 하단에 상호 작용 힌트, 오른쪽 하단에 실시간 수치. 범례 키와 실제 캡션은 카드 아래에 배치하고, 단어는 그림 내부에 최대 하나의 작은 새겨진 레이블을 제외하고는 두지 마세요. - 라이브로 만드세요. 차분한 시간 기반 모션을 사용하세요: 지수 추종 또는 실제 스프링. 유휴 투어는 아무도 만지지 않을 때 루프됩니다. 그림은 포인터와 키보드에 반응하고, 화면 밖에서는 멈추며, 모션 감소 설정에서는 정지 상태를 유지합니다. refs에 속성을 작성하고 프레임마다 다시 렌더링하지 마세요.
references/motion.md를 참조하세요. - 비평가처럼 검증하세요. 소유자는 확대해서 결함을 찾으므로, 먼저 확대하세요. 만든 모든 PNG를 읽으세요.
- 데스크탑, 휴대폰(390 너비), 호버 및 여러 모션 순간을
scripts/capture.mjs로 캡처하세요. 시퀀스, 분해 포즈 및--no-webgl폴백에는scripts/drive.mjs를 사용하세요. - 감사를 0으로 실행하세요. 파이프, 케이블 또는 원형 부품이 있는 경우
node build.mjs --audit는audit passed로 끝나야 하며, 모든 실패 줄은 0입니다: 정지, 분해 및 비행 중 여유 공간, 터미널, 느슨한 끝, 접힘, 자체 겹침, 군집(가는 솔리드에 대해서도), 대용 모양, 지지, 흔들림, 새들 및 깊이 순서. 키 바이어스 없이 지오메트리에서 인터록을 수정하세요. - 라인 검사를 0으로 실행하세요. 감사는 라인 마크업을 볼 수 없습니다.
node scripts/lines.mjs page.html --out shots/lines.png(및-light페이지,drive.mjs의["lines"]액션을 사용한 모든 정지 포즈에서)는line ends: 0을 출력해야 합니다: 모든 이음매, 규칙, 리브, 눈금 및 포인터는 스트로크, 점 또는 윤곽선에서 끝납니다. 원이 표시된 PNG를 읽으세요. - 두 테마 모두에서 모든 접합부의 4배 클로즈업(
--light도 빌드), 조립 및 분해: 모든 플랜지, 티, 엘보, 클램프, 밸브, 벨로우즈, 밴드, 새들, 볼 조인트 및 교차점, 모든 곡선 몸체(톤 계단 없음), 텍스처가 끝나는 모든 위치(가장자리 또는 페이드), 평평한 상자 면과 그 이음매, 청크 조인트의 모든 텍스처 호스, 정지 및 전체 스트로크의 모든 슬라이딩 막대, 그리고 텍스트 또는 셰이더 콘텐츠가 있는 모든 창. - 셰이더: 모든 전환에서
["slow", 0.05]로 느려진 접촉 시트; 팝업 없음, 색상 전환 없음, 가장자리 0 읽기. 라이트에서도 각 전환을 통해 프레임당 잉크를 기록하고(빛을 단조롭게 따라야 함) 8–16배율에서 잉크가 스트로크를 만나는 곳을 잘라내세요(references/verify.md, "라이트 테마 셰이더"). - PNG를 예제 옆에 놓고 질문하세요: 즉시 실제 물체이며, 볼륨이 있는 작은 부품이 풍부하고, 모든 선이 무언가에서 끝납니까? 1배율에서 매우 상세하고 4배율에서도 여전히 보람 있으며, 맨 얼굴이나 빈 구석이 없습니까? 그렇다고 대답할 때까지 반복하세요. 체크리스트:
references/verify.md.
설정
키트는 kit/에 있습니다:
| 파일 | 용도 |
|---|---|
kit/iso-kit.ts | 전체 핵심을 하나의 파일로: 카메라, 솔리드, 부품 라이브러리, SVG 문자열 렌더러, 카드 및 페이지 빌더, CSS (ISO_CSS). TypeScript 프로젝트에 복사하세요. |
kit/iso-kit.mjs | Node 스크립트용 일반 ESM으로 컴파일된 동일한 핵심. 직접 임포트하세요. |
kit/iso.css | ISO_CSS가 작성된 파일. 한 번 임포트하고 래퍼에 class="iso" (라이트의 경우 data-theme="light" 추가)를 넣으세요... |
[일부 내용이 번역을 위해 잘렸습니다.]