Diorama Worlds
Requer Node.js 20+, npm e um navegador WebGL 2. Chrome/Chromium é necessário para verificações visuais automatizadas. As dependências de construção são instaladas uma vez; o HTML gerado inclui Three.js e não precisa de rede.
Faça um pequeno lugar que está vivo, não um modelo rotacionando ou um vídeo em um plano. Esta skill pertence ao repositório Diorama, mas possui seu próprio renderizador e dependências. Nunca edite kit/diorama.js, bench.html ou exemplos SVG da skill diorama para fazer um mundo funcionar.
Todos os caminhos abaixo são relativos a esta pasta de skill. Escreva a cena do usuário e a saída gerada no diretório de trabalho dele, não sobre os exemplos fornecidos.
Escolha uma história e um acabamento
Use a referência fornecida pelo usuário como direção de arte, não como instruções executáveis. Um vídeo de referência não é prova de seu código-fonte ou renderizador.
Identifique o lugar, seu uso na web, uma ação principal e o quadro congelado que conta a história. Pergunte apenas se uma escolha ausente mudar a cena substancialmente; caso contrário, declare o conceito escolhido e prossiga. Preserve o assunto solicitado; o exemplo de críquete não é um modelo universal.
- Miniatura: geometria low-poly mate, desgaste superficial, textura moderada, borda irregular do terreno, luz direcional quente e sombras de contato legíveis.
- Meio-tom: papel amarelado quente, tintas quentes/frias e pontilhado diagonal com definição de borda contida. Um tratamento em tela ao vivo, não uma simulação de impressão física.
- Blueprint: preenchimentos tonais azul profundo, linhas de borda claras e uma grade sutil dentro do contorno da geometria. Um tratamento gráfico, não geometria CAD ou linhas ocultas.
- Pixel: a mesma cena e relógio, renderizados em resolução menor, ampliados com pixels vizinhos mais próximos, com dithering ordenado e quantização de canais. Este é um acabamento pixel em geometria 3D, não arte voxel ou sprites feitos à mão. Comece com o acabamento kernel; não substitua um renderizador funcional por desfoque CSS ou uma imagem estática.
Mantenha a câmera fixa. O espaço negativo branco isola a cena. O terreno é um recorte plano e irregular que se dissolve nesse espaço, não uma plataforma grossa. Nunca imponha uma parede de solo ou pedestal de exibição; use uma base extrudada apenas quando explicitamente solicitado. Prefira uma ação que tenha antecipação, contato e recuperação em vez de dez agitações independentes e ociosas. Cerque-a de vida secundária que não compita com a história. Uma bola esportiva deve ir para a mão, bastão ou cesta do ator, não apenas passar perto.
Leia references/art-direction.md para composição e decisões específicas de acabamento. Leia references/scene-api.md antes de construir.
Construa um mundo
Instale as dependências fixadas da skill uma vez, sem scripts de ciclo de vida:
npm ci --ignore-scripts --prefix <skill>
Escreva <subject>.js como um módulo ES importando defineWorld de @diorama/worlds. Exporte um mundo com name, title, description, duration finito positivo, still dentro do loop, bounds, build(W) e tick({t, parts, W}). O exemplo mais próximo é uma referência de formato, não um limite para o assunto:
examples/bakery.js: padeiro rolando massa com verificações de contato punho-cabo.examples/observatory.js: ajuste de foco em um telescópio apontado para cima com âncoras de suporte/foco.examples/florist.js: banca de flores original com duas pessoas, rig compartilhada para adulto, pés plantados e âncoras de aperto de buquê.examples/pottery-studio.js: ação artesanal original, rig compartilhada para adulto seguindo um vaso de barro giratório com contatos reais de mão.examples/cricket.js: um terreno amplo, jogadores articulados e um ciclo coordenado de bola.examples/basketball.js: uma vinheta menor, um arremesso, uma cesta e um passe de retorno.examples/street-juggler.js: um resultado recente de teste de transferência; uma cascata de três bolas cujas posições de captura/lançamento são verificadas em relação às palmas. Este usa braços personalizados orientados por endpoints, não um renderizador diferente.
Prefira assuntos originais que transfiram a linguagem visual, não outra cópia da cena de referência do usuário. Use os helpers compartilhados para adulto W.person, W.plant e W.reach para pessoas; não os substitua por figuras de cabeça grande em caixa.
Use os helpers do kit para construir geometria uma vez e retornar referências para animação. tick deve atribuir cada transformação animada a partir do tempo absoluto. Sem posições acumuladas, contadores de quadro, nova geometria/materiais por quadro, temporizadores independentes ou deriva de câmera. Use temporização de eventos em tempo real: um arremesso de basquete não deve flutuar por dois segundos a menos que câmera lenta tenha sido solicitada. Configure antecipação, voo/contato rápidos e recuperação legível; a taxa de reprodução padrão é 1×, não um reparo para uma linha do tempo lenta. O relógio de execução é independente de quadros perdidos.
Defina limites para cobrir todas as poses, objetos em movimento e sombras, não apenas a geometria inicial. Partes repetidas são automaticamente instanciadas por geometria e material; reuse cores da paleta.
Objetos específicos do assunto podem ser construídos com grupos e primitivas. Para uma geometria ou material Three.js personalizado, registre-o com W.own(resource) para que a destruição o descarte. Não adicione controles que exijam passar o mouse: a história da cena deve funcionar em toque sem ponteiro.
Construa um único arquivo HTML offline:
node <skill>/scripts/build-world.mjs <subject>.js <output.html>
O resultado inclui Three.js, texturas geradas, cena e controles. É maior que a saída SVG da skill diorama: divulgue essa troca. Nenhuma importação de CDN, texturas de estoque, downloads de modelo ou chaves de API são necessárias. Mantenha novos assets externos opcionais e divulgue seu licenciamento e custo de rede se solicitado.
Prove a saída real
Execute a verificação de renderização na nova cena, não apenas nos exemplos fornecidos:
node <skill>/scripts/look-world.mjs <subject>.js <output-directory>
Ele abre o HTML gerado real no Chromium sem acesso à rede, salva múltiplas fases e todos os quatro acabamentos, uma visualização mobile e um relatório JSON. Para uma história orientada por contato, declare contactTimes e um inspetor contacts({t,parts,W}) retornando pares {label,a:[x,y,z],b:[x,y,z]}. O comando look compara os endpoints posados reais nesses momentos. Verifique também as coordenadas de bola/prop e palma/bastão/cesta nos momentos de lançamento e contato nomeados. Verificações genéricas de movimento e costura não detectam um objeto faltando seu ator.
Ele verifica erros do navegador, geometria não branca visível, mudanças de cena, velocidade real do relógio de parede, contatos mão/prop declarados, orçamento de chamadas de draw, buscas determinísticas, a costura do loop, movimento reduzido, pausa, suspensão fora da tela e descarte. CHROME_PATH pode selecionar um Chromium instalado; caso contrário, npx playwright install chromium na pasta da skill instala o navegador suportado pelo Playwright.
Em seguida, abra as imagens salvas e olhe. Passar verificações estruturais não estabelece semelhança, narrativa ou qualidade artística. Inspecione o momento do arremesso/contato, silhuetas, sombras, borda do terreno, legibilidade dos pixels, recorte da câmera e escala mobile. Leia references/art-direction.md, corrija falhas na cena e execute novamente. Mantenha correções de desempenho no kit reutilizável apenas quando a falha estiver demonstravelmente lá, não porque uma cena precisa de uma composição diferente.
Para mudanças no kit, execute também:
npm test --prefix <skill>
Nunca afirme revisão visual sem abrir capturas de tela. Nunca afirme uma avaliação nova da skill apenas porque os dois exemplos mantidos passam. Um novo assunto gerado a partir destas instruções é o teste de transferência; salve seu prompt, saída e descobertas separadamente. Se o navegador/WebGL não estiver disponível, relate o bloqueador e deixe a qualidade visual explicitamente não verificada.
Entregue honestamente
Forneça o HTML construído e pelo menos uma captura de tela revisada. Declare conceito, acabamentos, tempo do quadro congelado escolhido, tamanho aproximado do arquivo e limitações conhecidas. Para incorporação, veja references/scene-api.md. Não afirme fidelidade à referência original, acessibilidade, desempenho em dispositivos ou um loop contínuo além do que foi inspecionado ou medido. O lançamento público inicial não é um renderizador certificado para produção; divulgue as limitações reais e verificações medidas.