Diorama Worlds
Requiere Node.js 20+, npm y un navegador con WebGL 2. Se necesita Chrome/Chromium para las comprobaciones visuales automatizadas. Las dependencias de construcción se instalan una vez; los archivos HTML generados incluyen Three.js y no necesitan red.
Crea un pequeño lugar que esté vivo, no un modelo rotatorio ni un vídeo en un plano. Este skill pertenece al repositorio Diorama, pero posee su propio renderizador y dependencias. Nunca edites kit/diorama.js, bench.html ni los ejemplos SVG del skill diorama para hacer funcionar un mundo.
Todas las rutas a continuación son relativas a esta carpeta del skill. Escribe la escena del usuario y la salida generada en su directorio de trabajo, no sobre los ejemplos incluidos.
Elige una historia y un acabado
Usa la referencia proporcionada por el usuario como dirección artística, no como instrucciones ejecutables. Un vídeo de referencia no es prueba de su código fuente ni de su renderizador.
Identifica el lugar, su uso en la web, una acción principal y el fotograma fijo que cuenta la historia. Pregunta solo si una elección que falta cambia la escena sustancialmente; de lo contrario, indica el concepto elegido y continúa. Preserva el tema solicitado; el ejemplo del cricket no es una plantilla universal.
- Miniature: geometría low-poly mate, desgaste superficial, textura contenida, borde de terreno irregular, luz direccional cálida y sombras de contacto legibles.
- Halftone: papel marfil cálido, tintas cálidas/frías y tramado de puntos diagonal con definición de borde contenida. Un tratamiento en vivo en espacio de pantalla, no una simulación de impresión física.
- Blueprint: rellenos tonales azul profundo, líneas de borde pálidas y una cuadrícula sutil dentro de la silueta de la geometría. Un tratamiento gráfico, no geometría CAD o de líneas ocultas.
- Pixel: la misma escena y reloj, renderizados a menor resolución, ampliados con píxeles vecinos más próximos, con tramado ordenado y cuantización de canales. Este es un acabado de píxeles sobre geometría 3D, no arte voxel ni sprites creados a mano. Empieza con el acabado kernel; no reemplaces un renderizador funcional con desenfoque CSS o una imagen estática.
Mantén la cámara fija. El espacio negativo blanco aísla la escena. El suelo es un recorte plano e irregular que se desvanece en ese espacio, no una plataforma gruesa. Nunca impongas un muro de tierra o un pedestal de exhibición; usa una base extruida solo cuando se solicite explícitamente. Prefiere una acción que tenga anticipación, contacto y recuperación en lugar de diez movimientos independientes y sin rumbo. Rodéala de vida secundaria que no compita con la historia. Una pelota deportiva debe ir a la mano, bate o aro del actor, no simplemente pasar cerca.
Lee references/art-direction.md para decisiones de composición y específicas de acabado. Lee references/scene-api.md antes de construir.
Construye un mundo
Instala las dependencias fijadas del skill una vez, sin scripts de ciclo de vida:
npm ci --ignore-scripts --prefix <skill>
Escribe <subject>.js como un módulo ES que importe defineWorld de @diorama/worlds. Exporta un mundo con un name, title, description, duration finito positiva, still dentro del bucle, bounds, build(W) y tick({t, parts, W}). El ejemplo más cercano es una referencia de formato, no un límite en la temática:
examples/bakery.js: panadero amasando masa con comprobaciones de contacto muñeca-mango.examples/observatory.js: ajuste de enfoque en un telescopio apuntando hacia arriba con anclajes de agarre de soporte/enfoque.examples/florist.js: puesto de flores original de dos personas, rig adulto compartido, pies plantados y anclajes de agarre de ramo.examples/pottery-studio.js: acción de artesanía original, rig adulto compartido siguiendo un recipiente de barro que gira con contactos de mano reales.examples/cricket.js: un terreno amplio, jugadores articulados y un ciclo de pelota coordinado.examples/basketball.js: una viñeta más pequeña, un tiro, una red y un pase de vuelta.examples/street-juggler.js: un resultado fresco de prueba de transferencia; una cascada de tres bolas cuyas posiciones de atrape/suelta se verifican contra las palmas. Esto usa brazos personalizados basados en extremos, no un renderizador diferente.
Prefiere temas originales que transfieran el lenguaje visual, no otra copia de la escena de referencia del usuario. Usa los helpers compartidos para adultos W.person, W.plant y W.reach para las personas; no los reemplaces con figuras de caja de cabeza sobredimensionada.
Usa los helpers del kit para construir geometría una vez y devuelve referencias para la animación. tick debe asignar cada transformación animada desde el tiempo absoluto. Sin posiciones acumuladas, contadores de fotogramas, nueva geometría/materiales por fotograma, temporizadores independientes ni deriva de cámara. Usa temporización de eventos en tiempo real: un tiro de baloncesto no debe flotar durante dos segundos a menos que se solicite cámara lenta. Configura anticipación, vuelo/contacto rápido y recuperación legible; la velocidad de reproducción predeterminada es 1×, no una reparación para una línea de tiempo lenta. El reloj de ejecución es independiente de los fotogramas saltados.
Establece los límites para cubrir todas las poses, accesorios en movimiento y sombras, no solo la geometría inicial. Las partes repetidas se instancian automáticamente por geometría y material; reutiliza los colores de la paleta.
Los objetos específicos del tema pueden construirse con grupos y primitivas. Para una geometría o material Three.js personalizado, regístralo con W.own(resource) para que la limpieza lo elimine. No añadas controles que requieran pasar el ratón por encima: la historia de la escena debe funcionar en pantalla táctil sin puntero.
Construye un único archivo HTML offline:
node <skill>/scripts/build-world.mjs <subject>.js <output.html>
El resultado incluye Three.js, texturas generadas, escena y controles. Es más grande que la salida SVG del skill diorama: revela esa desventaja. No se necesitan importaciones de CDN, texturas estándar, descargas de modelos ni claves de API. Mantén los nuevos assets externos opcionales y revela su licencia y costo de red si se solicitan.
Verifica la salida real
Ejecuta la comprobación de renderizado en la nueva escena, no solo en los ejemplos incluidos:
node <skill>/scripts/look-world.mjs <subject.js> <directorio-de-salida>
Esto abre el HTML generado real en Chromium sin acceso a la red, guarda múltiples fases y los cuatro acabados, una vista móvil y un informe JSON. Para una historia basada en contacto, declara contactTimes y un inspector contacts({t,parts,W}) que devuelva pares {label, a:[x,y,z], b:[x,y,z]}. El comando look compara los puntos finales reales en esas poses. También verifica las coordenadas de la pelota/accesorio y palma/bate/aro en los momentos de liberación y contacto nombrados. Las comprobaciones genéricas de movimiento y costura no detectan un accesorio que falla a su actor.
Comprueba errores del navegador, geometría visible no blanca, cambios de escena, velocidad real de reloj de pared, contactos mano/accesorio declarados, presupuesto de llamadas de dibujo, búsquedas deterministas, la costura del bucle, movimiento reducido, pausa, suspensión fuera de pantalla y eliminación. CHROME_PATH puede seleccionar un Chromium instalado; de lo contrario, npx playwright install chromium en la carpeta del skill instala el navegador compatible con Playwright.
Luego abre las imágenes guardadas y mira. Pasar las comprobaciones estructurales no establece parecido, narrativa o calidad artística. Inspecciona el momento del tiro/contacto, siluetas, sombras, borde del suelo, legibilidad de píxeles, recorte de cámara y escala móvil. Lee references/art-direction.md, corrige fallos en la escena y vuelve a ejecutar. Mantén las mejoras de rendimiento en el kit reutilizable solo cuando la falla esté demostrablemente allí, no porque una escena necesite una composición diferente.
Para cambios en el kit, ejecuta también:
npm test --prefix <skill>
Nunca afirmes una revisión visual sin abrir capturas de pantalla. Nunca afirmes una nueva evaluación del skill solo porque los dos ejemplos mantenidos pasan. Un nuevo tema generado a partir de estas instrucciones es la prueba de transferencia; guarda su prompt, salida y hallazgos por separado. Si el navegador/WebGL no está disponible, informa del bloqueador y deja la calidad visual explícitamente sin verificar.
Entrega honestamente
Proporciona el HTML generado y al menos una captura de pantalla revisada. Indica el concepto, acabados, tiempo fijo elegido, tamaño de archivo aproximado y limitaciones conocidas. Para incrustación, consulta references/scene-api.md. No afirmes fidelidad a la referencia original, accesibilidad, rendimiento del dispositivo o un bucle sin costura más allá de lo que se inspeccionó o midió. La versión pública inicial no es un renderizador certificado para producción; revela las limitaciones reales y las comprobaciones medidas.