Anatomía
Este skill crea figuras como un pequeño instrumento en un banco: una base pesada sobre pies, rieles con reglas graduadas, un carro sobre casquillos, perillas moleteadas, resortes helicoidales, un indicador de dial cuya aguja se mueve, tornillos como pequeños puntos. El lector entiende la idea porque reconoce la máquina. Cada número que muestra la figura proviene del mismo modelo que mueve sus partes.
Ocho ejemplos completos vienen con el skill. Abre el más cercano antes de empezar. Cada ejemplo sin framework se construye con node ejemplos/<nombre>/build.mjs, que genera una página HTML independiente junto al script; añade --light para el tema claro.
ejemplos/dial-indicator/es el más pequeño: un indicador de dial sobre un soporte, aproximadamente 300 líneas en total.ejemplos/desk-computer/es SVG sin framework: un ordenador de escritorio con un teclado en el que se puede escribir. La línea escrita aparece en una pantalla CRT dibujada en el plano del frontal del gabinete, y la imagen se colapsa en una línea y un punto cuando se apaga. Tiene unos 85 sólidos y 850 trazados.ejemplos/arcade-cabinet/es un armario arcade vertical con su panel lateral quitado, un Héroe de unos 240 sólidos y 15 cables. Una moneda vuela hacia la ranura, rueda por el conducto de monedas a la velocidad que alcanza un disco rodante en una pendiente de 30°, activa el cable del interruptor de monedas y cae en la caja de efectivo; el pulso del interruptor recorre trozo a trozo su cable hasta la placa, y el CRT se calienta, se autocomprueba y ejecuta un modo de atracción dibujado en el plano del monitor inclinado. El joystick se inclina y cierra un microinterruptor debajo del panel. Muestra cómo colocar una cámara para que el mecanismo de un corte permanezca visible, una placa cóncava dibujada como un prisma a lo largo de cualquier eje, piezas móviles reconstruidas en la página desde el mismo módulo que usa la compilación, y monedas en vivo y un cable dibujados en ranuras reservadas del orden establecido.node build.mjs --auditprueba la geometría.ejemplos/raptor-engine/es un motor de cohete colgado en un banco de pruebas. Sus piezas redondas provienen dekit/lathe.mjsy sus tuberías y arneses dekit/tube.mjs. Se desmonta en 11 conjuntos con resortes escalonados y reordenación de profundidad por fotograma. Cada pieza registra su forma real, ynode build.mjs --audit(kit/audit.mjs) prueba, en reposo, desmontado y en cada fotograma reproducido de la explosión, que nada atraviesa nada, que cada extremo descansa sobre un soporte real, que ninguna curva se pinza, pliega o coloca sobre otra línea, que la pendiente de ningún perfil curvo oscila, y que cada superposición se dibuja en orden de profundidad. Una pluma WebGL, choque, salpicadura y vapor se renderizan entre el SVG frontal y trasero. Es la referencia para tuberías densas, sombreado suave y fundidos.ejemplos/ripple-tank/es una cubeta de ondas escolar sobre patas altas sobre una pantalla de papel, vista desde 44° hacia arriba. Dos capas WebGL (luz de lámpara, sombras y cáusticas en el papel, y los reflejos del agua y el vidrio) están registradas en los planos isométricos y se manejan con un modelo puro de dispersión y óptica (model.mjs); un cambio de frecuencia se propaga desde los inmersores a través de una textura de historial.ejemplos/test-rig/es una figura de producción de un sitio real (React/Next): un botón de vidrio sobre un carro montado en resortes, una sonda de dedo sobre un riel que presiona y tira, y un indicador de dial que lee la inclinación. Tiene 53 sólidos y unos 470 trazados.ejemplos/spot-plate/es una segunda figura de producción del mismo sitio: seis pares de gotas de vidrio sobre una placa de gotas, cada par dibujado desde un campo de distancia, por lo que un par más cercano quemergese funde en una sola pieza de vidrio. Un abanico de hojas calibradoras establecemerge, una hoja por espacio. Es la referencia para formas que se transforman entre sí y para un control que maneja muchas piezas.ejemplos/turning-dial/es el modo 3D opcional: un dial combinado que gira en 3D real con una pequeña mano robótica sobre él. Tiene unas 90 piezas vivas en materiales metálicos, un segundo grupo de giro, una bisagra, un dedo de tres bisagras que se levanta y una cápsula que se desprende como un cuerpo libre. Un LED WebGL, su cono de luz y chispas siguen las piezas móviles.stress.mjsjunto a él es una mano densa de unas 380 piezas en un taller desordenado, utilizada para medir el rendimiento.
El banco de pruebas es el estándar de calidad para el dibujo en sí. El Raptor es el estándar para el trabajo de sombreado: un efecto WebGL debe alcanzar su nivel de renderizado sin espacios, sin parpadeos y continuo.
La única idea que importa
El objeto es la explicación. No dibujes cajas, flechas y etiquetas. Inventa una cosa física real y bien hecha cuyo funcionamiento sea el concepto. Así es como figuras anteriores mapearon conceptos:
| Concepto | Objeto |
|---|---|
| Un contexto GPU compartido que sirve a muchos lienzos | Un trazador de pórtico: un cabezal de impresión que visita 16 pocillos |
| Una clave de caché que omite trabajo cuando nada cambió | Una cerradura de clavijas: cuando cada clavija coincide, el cilindro gira y no se redibuja nada |
| Siete objetivos de renderizado con diferentes bytes por texel | Un cofre de siete cajones, cada uno tan profundo como sus bytes |
| Un desenfoque separable (49 × 49 toques vs 49 + 49) | Un sello de clavos junto a dos peines sobre rieles |
| Un resorte que presiona y se inclina | Un banco de pruebas con resortes, una sonda y un indicador de dial |
| Un perfil de altura | Un calibre de perfiles (contorno) presionado contra el borde |
| Luz que depende de la orientación | Un pequeño estudio fotográfico: lámparas principal y de relleno alrededor de un plato giratorio |
Dos formas en que esto falla, ambas observadas en la práctica:
- Demasiado abstracto. Placas apiladas, losas flotantes o cajas etiquetadas no se identifican como nada.
- Demasiado plano y soso. Una losa grande con unas pocas líneas no tiene volumen, ni piezas ni nada que descubrir.
La solución para ambos es la misma: una máquina reconocible, construida con muchas piezas pequeñas, precisas y con propósito.
Cada creación es altamente detallada. Esto se aplica a cada figura, por pequeña que sea la idea o la solicitud: un explicador rápido sigue siendo una máquina densa y real, nunca unas pocas losas. Lo que escala con el tamaño (paso 1 del flujo de trabajo) es hasta dónde se lleva: una Figura recibe el barrido 4× sobre su tema y mecanismo, un Héroe o una Épica sobre todo el dibujo.
- Lee la cosa real. Construye como se construye el objeto real: cada tornillo, costura, bisel, casquillo, placa de etiqueta, cable con su conector, escala con sus marcas, y las piezas que sostienen las piezas.
- Dos apariencias. A 1× se lee como una máquina clara. A 4× cada región sigue teniendo algo verdadero que encontrar; una cara desnuda o una esquina vacía es trabajo inacabado, no tranquilidad.
- Con propósito, nunca ruido. El detalle proviene de piezas que pertenecen al mecanismo. Cada una se asienta sobre otra pieza, termina en un borde y se desvanece en lugar de detenerse.
- Compruébalo al final. Antes de terminar, amplía a 4× (sobre el tema y el mecanismo para una Figura, todo el dibujo para un Héroe o una Épica) y añade las piezas reales que faltan dondequiera que una región esté simple.
Flujo de trabajo
Trabaja en este orden. Escribe el concepto y la lista de piezas antes de cualquier geometría. La mayor parte de la calidad se decide allí.
- Tamaño antes de empezar. Nombra el tamaño antes de cualquier otro trabajo, e informa al usuario aproximadamente cuánto tiempo llevará cuando el nivel inferior lo requiera para una estimación.
- Figura: un mecanismo, 40–80 piezas, SVG con como máximo una capa WebGL. Nombra el tamaño y constrúyelo sin preguntar. No des un tiempo al usuario, ya que una Figura a menudo termina en menos de una hora. Para las comprobaciones de progreso a continuación, presupuesta hasta una hora.
- Héroe: un objeto denso, varias capas WebGL o un sujeto 3D, 80–150 piezas. Alrededor de 2–4 horas. Dilo, luego constrúyelo a menos que el usuario haya pedido algo rápido.
- Épica: un vehículo completo, edificio o planta con muchos sistemas móviles, o el modo 3D en más de un sujeto. 6 horas o más. No lo empieces. Da la estimación, propón una versión Héroe que mantenga el núcleo de la idea, y enumera lo que añadiría la versión completa. Construye la Épica solo cuando el usuario la elija.
- Sea cual sea el tamaño, ten una página funcional que se abra en el navegador dentro de la primera hora, y profundízala a partir de ahí. Ejecuta
dateal principio y en cada paso, y cuando un paso se alargue más del doble de su parte de la estimación, informa al usuario de dónde estás y qué queda.
- Primero la verdad. Recopila los números reales y el comportamiento de la cosa que se explica: tamaños, conteos, umbrales, curvas. La lectura, el movimiento y el pie de foto deben ser todos verdaderos. Si puedes, escribe el modelo como un pequeño módulo puro, como
rig.tsen el ejemplo del banco de pruebas, y manéjalo todo desde él. - Inventa el objeto. Elige una máquina, herramienta, instrumento o mueble cuyo mecanismo se mapee uno a uno con el concepto. Di en una frase qué se mueve y qué significa ese movimiento. Nunca copies una imagen de referencia: toma su acabado, no su objeto.
- Lista de piezas. Escribe al menos 40 piezas (40–80 para una Figura, 80–150 para un Héroe, más para una Épica), agrupadas: base (placa, pies, ranura, tornillos de esquina, placa de etiqueta, tira de regla), estructura (postes, rieles, barras de marco, topes), mecanismo (carro, casquillos, resortes, émbolo, aguja), controles (perilla moleteada, tornillo de mariposa, corona) y el sujeto en sí, que es la única pieza iluminada. Cada pieza se asienta sobre otra pieza.
referencias/craft.mdtiene un vocabulario de piezas con recetas. - Planifica el mundo. Usa unidades de mundo de aproximadamente 1 px de la cosa real: x e y en el suelo, z hacia arriba. Diseña planos como rectángulos redondeados
{x, y, w, d, r}y círculos. Elige la cámara: azimut 45° por defecto, 35–60° para mostrar el lado largo, elevación 30° (más alta, como los 44° de la cubeta de ondas, para mirar dentro de algo abierto). Luego ajusta confitProjection(points, width, height, { pad, azimuth }). - Construye geometría una vez. Precalcula cada trazado estático en un módulo de geometría con el kit:
slabOf,cylinder,extrude,planOutline,topTicks,knurl,coil,radialTicksy así sucesivamente. Las piezas redondas en cualquier eje (campanas, bridas, válvulas, actuadores) provienen dekit/lathe.mjs, y las tuberías y cables dekit/tube.mjs. Las piezas móviles se construyen una vez en una posición de reposo y se mueven contranslateAlong. Solo las piezas cuya forma cambia se reconstruyen por fotograma. - Pinta de atrás hacia adelante, de abajo hacia arriba. Ordena las piezas repetidas con
depthOf. Divide cualquier cosa que envuelva otra pieza en una mitad trasera y una mitad delantera: los resortes alrededor de una varilla, las barras de un marco alrededor de un carro. Una pieza móvil se dibuja en la ranura donde físicamente se encuentra. Ver "Orden del pintor" enreferencias/craft.md. Una vez que una figura tiene tuberías, cables y piezas redondas, deja de ajustar claves a ojo: registra la forma de cada elemento a medida que lo pones enA.recorder(P, { order, spring }), deja queA.settle(R, P)mida la profundidad real dondequiera que dos elementos se superpongan y establezca las claves, y termina la compilación conA.auditOrExit(R, P). Enruta las tuberías antes de dibujarlas: puertos reales en ambos extremos, tramos a lo largo de la estructura, cruces en rectas, collares separando la tubería (referencias/craft.md, sección 8). Registra la forma real de lo que dibujas: una forma provisional que silencia la auditoría es un error, y la auditoría falla. Una varilla que se desliza fuera de una glándula es una varilla deG.rodOut, registrada conA.slide. - Enmárcalo. Pon la figura en una tarjeta:
Fig narriba a la izquierda, un título corto arriba a la derecha, la pista de interacción abajo a la izquierda y la lectura en vivo abajo a la derecha. Las claves de la leyenda y un pie de foto verdadero van debajo de la tarjeta, y las palabras se mantienen fuera del dibujo aparte de como máximo una pequeña etiqueta grabada. - Hazlo vivo. Usa movimiento basado en tiempo calmado: seguimiento exponencial o resortes reales. Un recorrido inactivo se repite cuando nadie lo toca. La figura responde al puntero y al teclado, se detiene cuando está fuera de pantalla y se queda quieta con movimiento reducido. Escribe atributos en referencias y no vuelvas a renderizar por fotograma. Ver
referencias/motion.md. - Verifica como un crítico. El propietario encuentra fallos al ampliar, así que amplía primero. Lee cada PNG que hagas.
- Captura escritorio, teléfono (390 de ancho), hover y varios momentos de movimiento con
scripts/capture.mjs; usascripts/drive.mjspara secuencias, la pose desmontada y la alternativa--no-webgl. - Ejecuta la auditoría a cero. Con tuberías, cables o piezas redondas,
node build.mjs --auditdebe terminaraudit passed, cada línea fallida en 0: holgura en reposo, desmontado y en pleno vuelo, terminales, extremos sueltos, pliegues, auto-superposición, apiñamiento (contra sólidos delgados también), formas provisionales, soporte, oscilación, soportes y orden de profundidad. Arregla un enclavamiento en la geometría, nunca con un sesgo de clave. - Ejecuta la comprobación de líneas a cero. La auditoría nunca ve el marcado de líneas.
node scripts/lines.mjs page.html --out shots/lines.png(y en la página-light, y en cada pose de reposo con la acción["lines"]dedrive.mjs) debe imprimirline ends: 0: cada costura, regla, nervadura, marca y puntero termina en un trazo, un punto o un contorno. Lee el PNG anillado. - Primeros planos 4× de cada unión en ambos temas (compila
--lighttambién), montados y desmontados: cada brida, tee, codo, abrazadera, válvula, fuelle, banda, soporte, junta esférica y cruce, cada cuerpo curvo (sin escalera de tonos), cada lugar donde termina una textura (en un borde o difuminándose), caras de caja planas con sus costuras, cada manguera texturizada en una junta de segmento, cada varilla deslizante en reposo y en carrera completa, y cada ventana con contenido de texto o sombreado. - Sombreadores: una hoja de contactos ralentizada con
["slow", 0.05]a través de cada transición; nada aparece repentinamente, sin cambio de color, los bordes leen 0. En claro, también registra la tinta por fotograma a través de cada transición (debe seguir la luz de manera monótona) y recorta donde la tinta se encuentra con los trazos a 8–16× (referencias/verify.md, "Sombreadores en tema claro"). - Pon tu PNG junto a los ejemplos y pregúntate: ¿es instantáneamente un objeto real, rico en piezas pequeñas con volumen, con cada línea terminando en algo? ¿Es altamente detallado a 1× y aún gratificante a 4×, sin cara desnuda ni esquina vacía? Itera hasta que sí. Lista de verificación:
referencias/verify.md.
Configuración
El kit está en kit/:
| Archivo | Úsalo para |
|---|---|
kit/iso-kit.ts | Todo el núcleo en un solo archivo: cámara, sólidos, una biblioteca de piezas, un renderizador de cadenas SVG, constructores de tarjetas y páginas, y el CSS (ISO_CSS). Cópialo en un proyecto TypeScript. |
kit/iso-kit.mjs | El mismo núcleo compilado a ESM simple, para scripts de Node. Impórtalo directamente. |
kit/iso.css | ISO_CSS escrito. Impórtalo una vez y pon class="iso" (más data-theme="light" para claro) en un contenedor... |