Shijiuwei/anatomy-mirror-338

Anatomy

Cette compétence crée des figures comme un petit instrument sur un établi : une base lourde sur pieds, des rails avec règles graduées, un chariot sur paliers lisses, des boutons moletés, des ressorts hélicoïdaux, un comparateur à cadran dont l'aiguille bouge, des vis comme de minuscules points. Le lecteur comprend l'idée parce qu'il reconnaît la machine. Chaque nombre affiché par la figure provient du même modèle qui déplace ses pièces.

Huit exemples complets sont fournis avec la compétence. Ouvrez le plus proche avant de commencer. Chaque exemple sans framework est construit avec node examples/<nom>/build.mjs, qui écrit une page HTML autonome à côté du script ; ajoutez --light pour le thème clair.

• examples/dial-indicator/ est le plus petit : un comparateur à cadran sur un support, environ 300 lignes au total.
• examples/desk-computer/ est du SVG sans framework : un ordinateur de bureau avec un clavier sur lequel on peut taper. La ligne tapée apparaît sur un écran CRT dessiné dans le plan du panneau avant, et l'image se réduit à une ligne et un point lorsqu'on l'éteint. Il comporte environ 85 solides et 850 chemins.
• examples/arcade-cabinet/ est une borne d'arcade debout avec son panneau latéral retiré, un Hero d'environ 240 solides et 15 câbles. Une pièce de monnaie vole dans la fente, roule dans la goulotte à la vitesse qu'atteint un disque roulant sur une pente à 30°, déclenche le fil du contacteur de pièce et tombe dans la caisse ; l'impulsion du contacteur parcourt son câble par segments jusqu'à la carte, et le CRT chauffe, s'auto-teste et exécute un mode d'attraction dessiné dans le plan du moniteur incliné. Le joystick s'incline et ferme un micro-interrupteur sous le panneau. Il montre comment placer une caméra pour que le mécanisme d'une coupe reste visible, une carte concave dessinée comme un prisme le long de n'importe quel axe, des pièces mobiles reconstruites dans la page à partir du même module que celui utilisé par la construction, et des pièces en direct et un fil dessinés dans des emplacements réservés de l'ordre établi. node build.mjs --audit prouve la géométrie.
• examples/raptor-engine/ est un moteur de fusée suspendu dans un banc d'essai. Ses pièces rondes proviennent de kit/lathe.mjs et ses tuyaux et harnais de kit/tube.mjs. Il se démonte en 11 assemblages avec des ressorts décalés et un réordonnancement de profondeur par image. Chaque pièce enregistre sa forme réelle, et node build.mjs --audit (kit/audit.mjs) prouve, au repos, démonté et dans chaque image rejouée de l'explosion, que rien ne traverse rien, que chaque extrémité repose sur un vrai support, qu'aucun coude ne pince, ne se plie ou n'atterrit sur une autre ligne, que la pente d'aucun profil courbe ne vacille, et que chaque chevauchement est dessiné dans l'ordre de profondeur. Un panache WebGL, un choc, des éclaboussures et de la vapeur sont rendus entre l'arrière et l'avant du SVG. C'est la référence pour les canalisations denses, l'ombrage lisse et les fondues.
• examples/ripple-tank/ est un bac à ondes scolaire sur de hauts pieds au-dessus d'un écran en papier, vu sous un angle de 44° vers le haut. Deux couches WebGL (lumière de lampe, ombres et caustiques sur le papier, et réflexions de l'eau et verre) sont calées sur les plans isométriques et pilotées par un modèle pur de dispersion et d'optique (model.mjs) ; un changement de fréquence se propage depuis les plongeurs à travers une texture d'historique.
• examples/test-rig/ est une figure de production provenant d'un site réel (React/Next) : un bouton en verre sur un chariot monté sur ressort, une sonde à doigt sur un rail qui appuie et tire, et un comparateur à cadran mesurant l'inclinaison. Il comporte 53 solides et environ 470 chemins.
• examples/spot-plate/ est une seconde figure de production du même site : six paires de gouttes de verre sur une plaque à godets, chaque paire dessinée à partir d'un seul champ de distance, de sorte qu'une paire plus proche que merge fusionne en un seul morceau de verre. Un éventail de lames de calibre définit merge, une lame par espace. C'est la référence pour les formes qui se transforment les unes dans les autres et pour un seul contrôle actionnant plusieurs pièces.
• examples/turning-dial/ est le mode 3D optionnel : un cadran combiné qui tourne en véritable 3D avec une petite main de robot dessus. Il comporte environ 90 pièces en direct en matériaux métalliques, un second groupe de rotation, une charnière, un doigt à trois articulations qui se lève et une capsule qui se détache comme un corps libre. Une LED WebGL, son halo lumineux et des étincelles suivent les pièces mobiles. stress.mjs à côté est une main dense d'environ 380 pièces dans un atelier encombré, utilisée pour mesurer les performances.

Le banc d'essai est la référence de qualité pour le dessin lui-même. Le Raptor est la référence pour le travail de shader : un effet WebGL doit atteindre son standard de rendu sans saut, sans pop, dans l'espace monde.

L'idée qui compte

L'objet est l'explication. Ne dessinez pas de boîtes, de flèches et d'étiquettes. Inventez une chose physique réelle et bien faite dont le fonctionnement est le concept. Voici comment les figures précédentes ont été mappées :

Concept	Objet
Un contexte GPU partagé unique servant plusieurs toiles	Un traceur à portique : une seule tête d'impression visitant 16 puits
Une clé de cache qui saute le travail quand rien n'a changé	Une serrure à goupilles : quand chaque goupille correspond, le barillet tourne et rien n'est redessiné
Sept cibles de rendu avec différents octets par texel	Une commode de sept tiroirs, chacun aussi profond que ses octets
Un flou séparable (49 × 49 taps contre 49 + 49)	Un tampon à clous à côté de deux peignes sur rails
Un ressort qui appuie et s'incline	Un banc d'essai avec ressorts, une sonde et un comparateur à cadran
Un profil de hauteur	Un gabarit de profil (contour) pressé contre le bord
La lumière qui dépend de l'orientation	Un petit studio photo : lampes principale et de remplissage autour d'un plateau tournant

Deux façons dont cela échoue, toutes deux observées en pratique :

• Trop abstrait. Des plaques empilées, des dalles flottantes ou des boîtes étiquetées ne ressemblent à rien.
• Trop plat et fade. Une seule grande dalle avec quelques lignes dessus n'a pas de volume, pas de pièces et rien à découvrir.

La solution pour les deux est la même : une machine reconnaissable, construite à partir de nombreuses petites pièces précises et utiles.

Chaque création est très détaillée. Cela vaut pour chaque figure, aussi petite que soit l'idée ou la demande : un explicateur rapide est toujours une machine dense et réelle, jamais quelques dalles. Ce qui change avec la taille (étape 1 du workflow) est jusqu'où vous poussez : une Figure reçoit le balayage 4× sur son sujet et son mécanisme, un Hero ou un Epic sur l'ensemble du dessin.

• Lisez la chose réelle. Construisez-la comme l'objet réel est construit : chaque vis, joint, biseau, bague, plaque d'étiquette, câble avec son connecteur, échelle avec ses graduations, et les pièces qui maintiennent les pièces.
• Deux aspects. À 1×, elle se lit comme une machine claire. À 4×, chaque région a encore quelque chose de vrai à trouver ; un visage nu ou un coin vide est un travail inachevé, pas du calme.
• Utile, jamais du bruit. Le détail provient de pièces qui appartiennent au mécanisme. Chacune repose sur une autre pièce, se termine sur un bord, et s'estompe plutôt que de s'arrêter.
• Vérifiez-la en dernier. Avant de terminer, zoomez à 4× (sur le sujet et le mécanisme pour une Figure, l'ensemble du dessin pour un Hero ou un Epic) et ajoutez les vraies pièces manquantes partout où une région est nue.

Workflow

Travaillez dans cet ordre. Écrivez le concept et la liste des pièces avant toute géométrie. La majeure partie de la qualité y est décidée.

1. Dimensionnez-la avant de commencer. Nommez la taille avant tout autre travail, et dites à l'utilisateur approximativement combien de temps cela prendra lorsque le niveau ci-dessous demande une estimation.
   • Figure : un mécanisme, 40–80 pièces, SVG avec au plus une couche WebGL. Nommez la taille et construisez-la sans demander. Ne donnez pas de temps à l'utilisateur, car une Figure se termine souvent en bien moins d'une heure. Pour les vérifications de progression ci-dessous, prévoyez jusqu'à une heure.
   • Hero : un objet dense, plusieurs couches WebGL ou un sujet 3D, 80–150 pièces. Environ 2–4 heures. Dites-le, puis construisez-la à moins que l'utilisateur n'ait demandé quelque chose de rapide.
   • Epic : un véhicule entier, un bâtiment ou une usine avec de nombreux systèmes mobiles, ou le mode 3D sur plus d'un sujet. 6 heures ou plus. Ne la démarrez pas. Donnez l'estimation, proposez une version Hero qui garde le cœur de l'idée, et listez ce que la version complète ajouterait. Construisez l'Epic uniquement lorsque l'utilisateur la choisit.
   • Quelle que soit la taille, ayez une page fonctionnelle qui s'ouvre dans le navigateur dans la première heure, et approfondissez-la à partir de là. Lancez date au début et à chaque étape, et lorsqu'une étape dépasse deux fois sa part de l'estimation, dites à l'utilisateur où elle en est et ce qu'il reste.
2. La vérité d'abord. Rassemblez les nombres et comportements réels de la chose expliquée : tailles, comptes, seuils, courbes. L'affichage, le mouvement et la légende doivent tous être vrais. Si possible, écrivez le modèle comme un petit module pur, comme rig.ts dans l'exemple du banc d'essai, et pilotez tout à partir de lui.
3. Inventez l'objet. Choisissez une machine, un outil, un instrument ou un meuble dont le mécanisme se mappe un-à-un sur le concept. Dites en une phrase ce qui bouge et ce que ce mouvement signifie. Ne copiez jamais une image de référence : prenez sa finition, pas son objet.
4. Liste des pièces. Écrivez au moins 40 pièces (40–80 pour une Figure, 80–150 pour un Hero, plus pour un Epic), groupées : base (plaque, pieds, rainure, vis de coin, plaque d'étiquette, bande de règle), structure (poteaux, rails, barres de cadre, butées), mécanisme (chariot, bagues, ressorts, plongeur, aiguille), contrôles (bouton moleté, vis à pouce, couronne) et le sujet lui-même, qui est la seule pièce éclairée. Chaque pièce repose sur une autre pièce. references/craft.md a un vocabulaire de pièces avec recettes.
5. Planifiez le monde. Utilisez des unités monde d'environ 1 px de la chose réelle : x et y sur le sol, z vers le haut. Disposez les plans comme des rectangles arrondis {x, y, w, d, r} et des cercles. Choisissez la caméra : azimut 45° par défaut, 35–60° pour montrer le côté long, élévation 30° (plus haute, comme le 44° du bac à ondes, pour regarder dans quelque chose d'ouvert). Puis ajustez avec fitProjection(points, width, height, { pad, azimuth }).
6. Construisez la géométrie une fois. Précalculez chaque chemin statique dans un module de géométrie avec le kit : slabOf, cylinder, extrude, planOutline, topTicks, knurl, coil, radialTicks etc. Les pièces rondes sur n'importe quel axe (cloches, brides, vannes, actionneurs) proviennent de kit/lathe.mjs, et les tuyaux et câbles de kit/tube.mjs. Les pièces mobiles sont construites une fois en position de repos et déplacées avec translateAlong. Seules les pièces dont la forme change sont reconstruites par image.
7. Peignez de l'arrière vers l'avant, du bas vers le haut. Triez les pièces répétées avec depthOf. Divisez tout ce qui entoure une autre pièce en une moitié arrière et une moitié avant : les ressorts autour d'une tige, les barres d'un cadre autour d'un chariot. Une pièce mobile est dessinée dans l'emplacement où elle se trouve physiquement. Voir "Ordre du peintre" dans references/craft.md. Une fois qu'une figure a des tuyaux, câbles et pièces rondes, arrêtez de régler les clés à l'œil : enregistrez la forme de chaque élément en le mettant dans A.recorder(P, { order, spring }), laissez A.settle(R, P) mesurer la profondeur réelle partout où deux éléments se chevauchent et définir les clés, et terminez la construction avec A.auditOrExit(R, P). Acheminez les tuyaux avant de les dessiner : ports réels aux deux extrémités, jambes le long de la structure, croisements sur les droites, colliers espaçant le tuyau (references/craft.md, section 8). Enregistrez la forme réelle de ce que vous dessinez : une forme de substitution qui fait taire l'audit est un bug, et l'audit en échoue un. Une tige qui glisse hors d'un presse-étoupe est une tige de G.rodOut, enregistrée avec A.slide.
8. Encadrez-la. Mettez la figure dans une carte : Fig n en haut à gauche, un titre court en haut à droite, l'indice d'interaction en bas à gauche et l'affichage en direct en bas à droite. Les légendes des clés et une légende vraie vont sous la carte, et les mots restent en dehors du dessin à l'exception d'au plus une minuscule étiquette gravée.
9. Rendez-la vivante. Utilisez un mouvement basé sur le temps calme : suivi exponentiel ou vrais ressorts. Une visite guidée idiote tourne en boucle quand personne n'y touche. La figure répond au pointeur et au clavier, s'arrête quand elle est hors écran, et reste immobile en mouvement réduit. Écrivez les attributs sur les refs et ne ré-rendez pas par image. Voir references/motion.md.
10. Vérifiez en critique. Le propriétaire trouve les défauts en zoomant, donc zoomez d'abord. Lisez chaque PNG que vous faites.

• Capturez le bureau, le téléphone (390 de large), le survol et plusieurs moments de mouvement avec scripts/capture.mjs ; utilisez scripts/drive.mjs pour les séquences, la pose démontée et le repli --no-webgl.
• Exécutez l'audit à zéro. Avec des tuyaux, câbles ou pièces rondes, node build.mjs --audit doit se terminer par audit passed, chaque ligne échouée à 0 : jeu au repos, démonté et en vol, terminaux, extrémités libres, plis, auto-chevauchement, encombrement (contre les solides minces aussi), formes de substitution, support, oscillation, selles et ordre de profondeur. Corrigez un interverrouillage dans la géométrie, jamais avec un biais de clé.
• Exécutez la vérification des lignes à zéro. L'audit ne voit jamais le balisage de lignes. node scripts/lines.mjs page.html --out shots/lines.png (et sur la page -light, et dans chaque pose de repos avec l'action ["lines"] de drive.mjs) doit afficher line ends: 0 : chaque joint, règle, nervure, graduation et pointeur se termine sur un trait, un point ou un contour. Lisez le PNG cerclé.
• Agrandissements 4× de chaque jonction dans les deux thèmes (construisez aussi --light), assemblé et démonté : chaque bride, té, coude, collier, vanne, soufflet, bande, selle, joint à rotule et croisement, chaque corps courbe (pas d'escalier de tonalité), chaque endroit où une texture se termine (sur un bord ou en fondu), faces de boîte plates avec leurs joints, chaque tuyau texturé à un joint de segment, chaque tige coulissante au repos et à pleine course, et chaque fenêtre avec du texte ou du contenu shader dedans.
• Shaders : une planche contact ralentie avec ["slow", 0.05] à travers chaque transition ; rien ne pop, pas de changement de couleur, les bords lisent 0. En clair, enregistrez aussi l'encre par image à travers chaque transition (elle doit suivre la lumière de manière monotone) et recadrez là où l'encre rencontre les traits à 8–16× (references/verify.md, "Shaders en thème clair").
• Mettez votre PNG à côté des exemples et demandez : est-ce instantanément un objet réel, riche en petites pièces avec du volume, avec chaque ligne se terminant sur quelque chose ? Est-ce très détaillé à 1× et toujours gratifiant à 4×, sans visage nu ni coin vide ? Itérez jusqu'à oui. Liste de contrôle : references/verify.md.

Configuration

Le kit se trouve dans kit/ :

Fichier	Utilisation
kit/iso-kit.ts	Tout le noyau en un seul fichier : caméra, solides, bibliothèque de pièces, rendu de chaîne SVG, constructeurs de carte et de page, et le CSS (ISO_CSS). Copiez-le dans un projet TypeScript.
kit/iso-kit.mjs	Le même noyau compilé en ESM pur, pour les scripts Node. Importez-le directement.
kit/iso.css	ISO_CSS écrit. Importez-le une fois et mettez class="iso" (plus data-theme="light" pour le clair) sur un conteneur.
kit/lathe.mjs	Construisez des pièces rondes sur n'importe quel axe : profils de tournage, brides, vannes, cloches, cames, poulies, actionneurs, buses, pavillons de clairon, pointes de foret à centrer, embouts filetés, bagues de compression, chapeaux de papillons.
kit/tube.mjs	Chemins rectangulaires de tuyauterie et câble (tous droits ou coudes à 45°), attaches de faisceau, colliers, goulottes, conduits flexibles avec segments, câbles de commande de papillon, rubans et sangles, tracés à l'intérieur des châssis, faisceaux de câbles à l'épreuve du vent, un seul câble qui se transforme en un autre. Voir references/craft.md, section 8 "Route et câble".
kit/audit.mjs	Preuve de séparation, d'appui, de courbure, de balancement, de jonction, de superposition, d'auto-chevauchement, d'encombrement, de parallélisme, de composants manquants et d'oscillation. Utilisez A.recorder pendant la construction (node build.mjs --audit) et A.settle pour les clés. Voir references/audit.md.
kit/scene.mjs	La scène : plan, isometric, buildPage, buildStandalone (sans framework), ReactFigure et buildNextPage (tous deux pour React/Next). L'export lourd est sceneBuildAll(R, P), qui fait la construction, l'impression et la page en un seul appel.
kit/color.mjs	La palette. Importez en tant que C pour définir les couleurs ; chaque sujet éclairé S.lit obtient C.lit, tout S.dim obtient C.dim. C.caption s'écrit à l'encre sur la légende.
kit/ease.mjs	Mouvement : follow, spring, ease et idleTour. Voir references/motion.md.
kit/font.mjs	fontText, fontChar et figLabels ; utilisez-les sur l'écran, les affichages et les étiquettes au lieu de texte normal.

Importez uniquement ce dont vous avez besoin. Dans les fichiers de construction, importez directement depuis le kit :

import { iso, render } from '../../kit/iso-kit.mjs'
import * as A from '../../kit/audit.mjs'
import { C } from '../../kit/color.mjs'

Markdown de référence se trouve dans references/ :

• references/craft.md : Vocabulaire des pièces avec recettes, ordre du peintre, route et câble, finition de la carte, position de la caméra et disposition de la figure.
• references/motion.md : Mouvement, visite guidée, interaction, thèmes et espacement.
• references/audit.md : Documentation complète de kit/audit.mjs, comment enregistrer les pièces, régler et s'installer.
• references/verify.md : Comment exécuter les captures, les vérifications de lignes, l'audit, les agrandissements 4× et ce qu'il faut regarder dans chaque capture.

Guide de démarrage rapide pour les constructions React/Next

1. Ajoutez kit/iso-kit.ts (et éventuellement kit/color.ts, kit/font.ts, kit/ease.ts) à vos sources.
2. Construisez le modèle (rig.ts dans l'exemple du banc d'essai) comme un module pur exportant model et simulate.
3. Construisez la géométrie (geometry.ts dans le même exemple) : chaque pièce est solide, plane ou point ; elle accepte le modèle et un point de repos si elle bouge ; elle s'ajoute à la scène.
4. Montrez-la : une page de démo, ou un composant Figure en utilisant l'export ReactFigure de kit/scene.mjs et en passant vos pièces.
5. Pour les shaders, utilisez l'exemple examples/ripple-tank/ comme modèle pour enregistrer vos couches WebGL avec la scène.