Shijiuwei/anatomy-mirror-338

Anatomy

Este skill cria figuras como um pequeno instrumento em uma bancada: uma base pesada sobre pés, trilhos com réguas graduadas, um carro sobre buchas, botões serrilhados, molas helicoidais, um relógio comparador cujo ponteiro se move, parafusos como pequenos pontos. O leitor entende a ideia porque reconhece a máquina. Cada número que a figura mostra vem do mesmo modelo que move suas partes.

Oito exemplos completos acompanham o skill. Abra o mais próximo antes de começar. Cada exemplo sem framework é construído com node examples/<nome>/build.mjs, que escreve uma página HTML independente ao lado do script; adicione --light para o tema claro.

• examples/dial-indicator/ é o menor: um relógio comparador em um suporte, cerca de 300 linhas no total.
• examples/desk-computer/ é SVG sem framework: um computador de mesa com um teclado no qual você pode digitar. A linha digitada aparece em uma tela CRT desenhada no plano da frente do gabinete, e a imagem se reduz a uma linha e um ponto quando você o desliga. Tem cerca de 85 sólidos e 850 caminhos.
• examples/arcade-cabinet/ é um gabinete de fliperama vertical com seu painel lateral removido, um Herói de cerca de 240 sólidos e 15 cabos. Uma moeda voa para a abertura, rola pela calha da moeda na velocidade que um disco rolante atinge em uma inclinação de 30°, aciona o fio do interruptor da moeda e cai na caixa de dinheiro; o pulso do interruptor percorre pedaço por pedaço ao longo de seu cabo até a placa, e o CRT aquece, faz autoteste e executa um modo de atração desenhado no plano do monitor inclinado. O manche inclina e fecha um microinterruptor sob o painel. Mostra como posicionar uma câmera para que o mecanismo de um corte permaneça visível, uma placa côncava desenhada como um prisma ao longo de qualquer eixo, peças móveis reconstruídas na página a partir do mesmo módulo que a construção usa, e moedas vivas e um fio desenhados em slots reservados da ordem estabelecida. node build.mjs --audit prova a geometria.
• examples/raptor-engine/ é um motor de foguete pendurado em um suporte de teste. Suas peças redondas vêm de kit/lathe.mjs e seus tubos e chicotes de kit/tube.mjs. Ele se desmonta em 11 conjuntos com molhas escalonadas e reordenamento de profundidade por quadro. Cada peça registra sua forma verdadeira, e node build.mjs --audit (kit/audit.mjs) prova, em repouso, desmontado e em cada quadro reproduzido da explosão, que nada atravessa nada, que cada extremidade está em um suporte real, que nenhuma dobra aperta, dobra ou pousa em outra linha, que a inclinação de nenhum perfil curvo oscila, e que cada sobreposição é desenhada em ordem de profundidade. Uma pluma WebGL, choque, respingo e vapor são renderizados entre o SVG traseiro e dianteiro. É a referência para tubulações densas, sombreamento suave e transições.
• examples/ripple-tank/ é uma cuba de ondas escolar sobre pernas altas acima de uma tela de papel, vista de 44° para cima. Duas camadas WebGL (luz de lâmpada, sombras e ondulações no papel, e os reflexos da água e vidro) são registradas nos planos isométricos e acionadas por um modelo puro de dispersão e óptica (model.mjs); uma mudança de frequência viaja para fora dos vibradores através de uma textura de histórico.
• examples/test-rig/ é uma figura de produção de um site real (React/Next): um botão de vidro em um carro montado em mola, uma sonda de dedo em um trilho que pressiona e puxa, e um relógio comparador lendo a inclinação. Tem 53 sólidos e cerca de 470 caminhos.
• examples/spot-plate/ é uma segunda figura de produção do mesmo site: seis pares de gotas de vidro em uma placa de poços, cada par desenhado a partir de um campo de distância, de modo que um par mais próximo que merge se funde em uma única peça de vidro. Um leque de lâminas de calibrador define merge, uma lâmina por lacuna. É a referência para formas que se transformam umas nas outras e para um controle que aciona muitas peças.
• examples/turning-dial/ é o modo 3D opcional: um mostrador de combinação que gira em 3D real com uma pequena mão de robô sobre ele. Tem cerca de 90 peças vivas em materiais metálicos, um segundo grupo de giro, uma dobradiça, um dedo de três dobradiças que levanta e uma cápsula que se solta como um corpo livre. Um LED WebGL, seu cone de luz e faíscas seguem as peças móveis. stress.mjs ao lado é uma mão densa de cerca de 380 peças em uma oficina desordenada, usada para medir o desempenho.

A bancada de teste é o padrão de qualidade para o desenho em si. O Raptor é o padrão para o trabalho de shader: um efeito WebGL tem que atingir seu padrão de renderização contínua, sem popping e sem costuras.

A única ideia que importa

O objeto é a explicação. Não desenhe caixas, setas e rótulos. Invente uma coisa física real e bem feita cujo funcionamento é o conceito. Aqui está como figuras anteriores mapearam:

Conceito	Objeto
Um contexto GPU compartilhado servindo muitas telas	Um plotter pórtico: uma cabeça de impressão visitando 16 poços
Uma chave de cache que evita trabalho quando nada mudou	Uma fechadura de pinos: quando cada pino corresponde, o cilindro gira e nada é redesenhado
Sete alvos de renderização com diferentes bytes por texel	Um baú de sete gavetas, cada uma tão funda quanto seus bytes
Um desfoque separável (49 × 49 taps vs 49 + 49)	Um carimbo de cama-de-pregos ao lado de dois pentes em trilhos
Uma mola que pressiona e inclina	Uma bancada de teste com molas, uma sonda e um relógio comparador
Um perfil de altura	Um medidor de perfil (contorno) pressionado contra a borda
Luz que depende da face	Um pequeno estúdio fotográfico: luz principal e de preenchimento ao redor de um toca-discos

Duas maneiras pelas quais isso falha, ambas vistas na prática:

• Muito abstrato. Placas empilhadas, lajes flutuantes ou caixas rotuladas não parecem nada.
• Muito plano e monótono. Uma laje grande com algumas linhas não tem volume, nem peças e nada para descobrir.

A correção para ambos é a mesma: uma máquina reconhecível, construída a partir de muitas peças pequenas, precisas e intencionais.

Toda criação é altamente detalhada. Isso vale para cada figura, por menor que seja a ideia ou o pedido: um explicador rápido ainda é uma máquina densa e real, nunca algumas lajes. O que escala com o tamanho (etapa 1 do fluxo de trabalho) é o quanto você aprofunda: uma Figura recebe a varredura 4× sobre seu assunto e mecanismo, um Herói ou Épico sobre todo o desenho.

• Leia a coisa real. Construa da maneira que o objeto real é construído: cada parafuso, costura, chanfro, bucha, placa de etiqueta, cabo com seu conector, escala com suas marcas, e as peças que seguram as peças.
• Duas aparências. Em 1×, lê-se como uma máquina clara. Em 4×, cada região ainda tem algo verdadeiro para encontrar; uma face nua ou um canto vazio é trabalho inacabado, não calma.
• Intencional, nunca ruído. O detalhe vem de peças que pertencem ao mecanismo. Cada uma se apoia em outra peça, termina em uma borda e desaparece em vez de parar.
• Verifique por último. Antes de terminar, amplie para 4× (sobre o assunto e mecanismo para uma Figura, todo o desenho para um Herói ou Épico) e adicione as peças reais que estão faltando onde quer que uma região seja simples.

Fluxo de trabalho

Trabalhe nesta ordem. Escreva o conceito e a lista de peças antes de qualquer geometria. A maior parte da qualidade é decidida lá.

1. Dimensionar antes de começar. Nomeie o tamanho antes de qualquer outro trabalho e informe ao usuário aproximadamente quanto tempo levará quando o nível abaixo pedir uma estimativa.
   • Figura: um mecanismo, 40–80 peças, SVG com no máximo uma camada WebGL. Nomeie o tamanho e construa-o sem perguntar. Não cite um tempo para o usuário, já que uma Figura geralmente termina em bem menos de uma hora. Para as verificações de progresso abaixo, reserve até uma hora.
   • Herói: um objeto denso, várias camadas WebGL ou um assunto 3D, 80–150 peças. Cerca de 2–4 horas. Diga isso, depois construa-o, a menos que o usuário tenha pedido algo rápido.
   • Épico: um veículo inteiro, edifício ou planta com muitos sistemas móveis, ou o modo 3D em mais de um assunto. 6 horas ou mais. Não comece. Dê a estimativa, proponha uma versão Herói que mantenha o núcleo da ideia e liste o que a versão completa adicionaria. Construa o Épico apenas quando o usuário o escolher.
   • Qualquer que seja o tamanho, tenha uma página funcional que abra no navegador dentro da primeira hora e aprofunde-a a partir daí. Execute date no início e em cada etapa, e quando uma etapa ultrapassar o dobro de sua parcela da estimativa, informe ao usuário onde está e o que resta.
2. Verdade primeiro. Colete os números e comportamentos reais da coisa que está sendo explicada: tamanhos, contagens, limites, curvas. A leitura, o movimento e a legenda devem ser todos verdadeiros. Se puder, escreva o modelo como um pequeno módulo puro, como rig.ts no exemplo test-rig, e conduza tudo a partir dele.
3. Invente o objeto. Escolha uma máquina, ferramenta, instrumento ou peça de mobiliário cujo mecanismo mapeie um a um o conceito. Diga em uma frase o que se move e o que esse movimento significa. Nunca copie uma imagem de referência: pegue seu acabamento, não seu objeto.
4. Lista de peças. Escreva pelo menos 40 peças (40–80 para uma Figura, 80–150 para um Herói, mais para um Épico), agrupadas: base (placa, pés, ranhura, parafusos de canto, placa de etiqueta, tira de régua), estrutura (postes, trilhos, barras de quadro, batentes), mecanismo (carro, buchas, molas, êmbolo, agulha), controles (botão serrilhado, parafuso de polegar, coroa) e o próprio assunto, que é a única parte iluminada. Cada peça se apoia em outra peça. references/craft.md tem um vocabulário de peças com receitas.
5. Planeje o mundo. Use unidades de mundo de cerca de 1 px da coisa real: x e y no chão, z para cima. Disponha os planos como retângulos arredondados {x, y, w, d, r} e círculos. Escolha a câmera: azimute 45° por padrão, 35–60° para mostrar o lado mais longo, elevação 30° (mais alta, como os 44° da cuba de ondas, para olhar dentro de algo aberto). Em seguida, ajuste com fitProjection(points, width, height, { pad, azimuth }).
6. Construa geometria uma vez. Pré-calcule cada caminho estático em um módulo de geometria com o kit: slabOf, cylinder, extrude, planOutline, topTicks, knurl, coil, radialTicks e assim por diante. Peças redondas em qualquer eixo (sinos, flanges, válvulas, atuadores) vêm de kit/lathe.mjs, e tubos e cabos de kit/tube.mjs. Peças móveis são construídas uma vez em uma posição de repouso e movidas com translateAlong. Apenas peças cuja forma muda são reconstruídas por quadro.
7. Pinte de trás para frente, de baixo para cima. Classifique peças repetidas com depthOf. Divida qualquer coisa que envolva outra peça em uma metade traseira e uma metade dianteira: as molas ao redor de uma haste, as barras de um quadro ao redor de um carro. Uma peça móvel é desenhada no slot onde ela fisicamente se assenta. Veja "Ordem do pintor" em references/craft.md. Assim que uma figura tiver tubos, cabos e peças redondas, pare de ajustar chaves manualmente: registre a forma de cada item ao colocá-lo em A.recorder(P, { order, spring }), deixe A.settle(R, P) medir a profundidade verdadeira onde quer que dois itens se sobreponham e definir as chaves, e termine a construção com A.auditOrExit(R, P). Roteie os tubos antes de desenhá-los: portas reais em ambas as extremidades, pernas ao longo da estrutura, cruzamentos em retas, colares separando o tubo (references/craft.md, seção 8). Registre a forma verdadeira do que você desenha: uma forma substituta que silencia a auditoria é um bug, e a auditoria falha em um. Uma haste que desliza para fora de uma glândula é uma haste de G.rodOut, registrada com A.slide.
8. Emoldure. Coloque a figura em um cartão: Fig n no canto superior esquerdo, um título curto no canto superior direito, a dica de interação no canto inferior esquerdo e a leitura ao vivo no canto inferior direito. Legendas e uma legenda verdadeira vão abaixo do cartão, e as palavras ficam fora do desenho, exceto por no máximo uma pequena etiqueta gravada.
9. Torne-a viva. Use movimento baseado em tempo calmo: acompanhamento exponencial ou molas reais. Um passeio ocioso faz loop quando ninguém toca. A figura responde ao ponteiro e ao teclado, para quando está fora da tela e fica parada sob movimento reduzido. Escreva atributos em referências e não renderize novamente por quadro. Veja references/motion.md.
10. Verifique como um crítico. O proprietário encontra falhas ampliando, então você amplia primeiro. Leia cada PNG que você fizer.

• Capture desktop, telefone (390 de largura), hover e vários momentos de movimento com scripts/capture.mjs; use scripts/drive.mjs para sequências, a pose separada e o fallback --no-webgl.
• Execute a auditoria até zero. Com tubos, cabos ou peças redondas, node build.mjs --audit deve terminar com audit passed, cada linha com falha em 0: folga em repouso, separado e durante o voo, terminais, pontas soltas, dobras, auto-sobreposição, aglomeração (contra sólidos delgados também), formas substitutas, suporte, oscilação, selins e ordem de profundidade. Corrija uma trava na geometria, nunca com um viés de chave.
• Execute a verificação de linha até zero. A auditoria nunca vê marcação de linha. node scripts/lines.mjs page.html --out shots/lines.png (e na página -light, e em cada pose de repouso com a ação ["lines"] de drive.mjs) deve imprimir line ends: 0: cada costura, régua, nervura, marca e ponteiro termina em um traço, um ponto ou um contorno. Leia o PNG com anéis.
• Close-ups 4× de cada junção em ambos os temas (construa --light também), montado e separado: cada flange, T, cotovelo, braçadeira, válvula, fole, banda, selim, junta esférica e cruzamento, cada corpo curvo (sem escada de tons), cada lugar onde uma textura termina (em uma borda ou desvanecendo), faces de caixa planas com suas costuras, cada mangueira texturizada em uma junta de bloco, cada haste deslizante em repouso e no curso total, e cada janela com texto ou conteúdo de shader.
• Shaders: uma folha de contato desacelerada com ["slow", 0.05] em cada transição; nada aparece, nenhuma troca de cor, bordas leem 0. No claro, registre também a tinta por quadro através de cada transição (deve seguir a luz monotonicamente) e recorte onde a tinta encontra traços em 8–16× (references/verify.md, "Shaders do tema claro").
• Coloque seu PNG ao lado dos exemplos e pergunte: é instantaneamente um objeto real, rico em pequenas peças com volume, com cada linha terminando em algo? É altamente detalhado em 1× e ainda recompensador em 4×, sem face nua ou canto vazio? Itere até sim. Lista de verificação: references/verify.md.

Configuração

O kit está em kit/:

Arquivo	Use para
kit/iso-kit.ts	Todo o núcleo em um arquivo: câmera, sólidos, uma biblioteca de peças, um renderizador de string SVG, construtores de cartão e página, e o CSS (ISO_CSS). Copie-o para um projeto TypeScript.
kit/iso-kit.mjs	O mesmo núcleo compilado para ESM puro, para scripts Node. Importe-o diretamente.
kit/iso.css	ISO_CSS escrito. Importe-o uma vez e coloque class="iso" (mais data-theme="light" para claro) em um wrapper…

... [truncado para tradução]