painting-3d-world

Constrói mundos Three.js tridimensionais e navegáveis a partir de pinturas: gera imagens de visualização frontal, esquerda, direita e traseira, cria um inventário de objetos para as quatro direções e modela, combina e valida cada objeto com capturas de tela reais. Ideal para imersão em pinturas famosas, recriação de cenas, produção de séries mundiais e correção de detalhes espaciais e principais; não se destina a gerar apenas uma imagem 3D estilizada.

O que é painting-3d-world?

Esta skill transforma pinturas em mundos 3D interativos e navegáveis usando Three.js. O processo começa com a análise da imagem original, identificando a obra, ano, instituição e versão específica. Em seguida, gera três imagens de visualização adicionais (esquerda, direita e traseira) usando ferramentas de geração de imagem, mantendo o estilo artístico, época e iluminação. Um inventário detalhado de objetos por direção é criado, com contagens, IDs, cores e posições, antes da modelagem individual. A skill valida rigorosamente cada cena com capturas de tela reais contra a pintura original e imagens geradas, verificando composição, iluminação, detalhes do sujeito, espaço circundante e navegabilidade. Destina-se a desenvolvedores e artistas que desejam recriar pinturas famosas como ambientes 3D exploráveis, com suporte para plataformas web e dispositivos móveis. O fluxo de trabalho garante que cada mundo atenda a critérios de aceitação específicos antes de ser considerado completo.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rockeymen/painting-3d-world/tree/HEAD

Installed? Explore more Programação e Desenvolvimento skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

painting-3DWorld

Transforme as relações espaciais de uma pintura em um mundo onde você pode se virar e se mover. A pintura original é a base para a composição e a modelagem; as extensões além da tela são criações e não podem ser atribuídas à intenção original do artista.

A condição de conclusão é verificar cada pintura, uma a uma, quanto à composição original, espaço circundante, céu/acima, detalhes do sujeito, efeitos de iluminação e navegabilidade. A iluminação não deve ser omitida, nem deixada para ser solicitada pelo usuário. Uma página web que abre, coordenadas válidas, taxa de quadros normal, aumento no número de objetos ou shadowMap.enabled=true não substituem essas verificações. Se algum item falhar, o mundo permanece como needs-work, e a série inteira não pode ser relatada como concluída.

Primeiro Passo: Gerar Imagens de Visualização para as Três Direções Adicionais

Primeiro, visualize a imagem real para confirmar a obra, ano, instituição e versão específica. O mesmo tema geralmente tem múltiplas composições; não substitua as cores de outra ponte, estação ferroviária ou parlamento pela versão atual. A busca deve priorizar páginas de acervo de museus e suas interfaces de imagem abertas; salve o link de origem, URL de download e informações de licença. Se a imagem de origem incluir bordas brancas ou texto explicativo, use um retângulo de pixels explícito ou corte CSS para manter apenas a pintura em si; não redesenhe a suposta imagem original.

Antes de modelar e listar formalmente os objetos, gere três imagens de visualização reais com base na pintura original: lado esquerdo, lado direito e vista traseira. A pintura original é a vista frontal a 0°; com posição de observação fixa padrão, altura dos olhos e escala da lente, gire 90° à esquerda, 90° à direita e 180° para trás, gerando o conteúdo além da tela para o mesmo mundo. Use ferramentas de geração/edição de imagem disponíveis, preservando o estilo artístico, época, iluminação e conexões espaciais de objetos adjacentes; revise e corrija inconsistências uma a uma. Antes de executar, leia as restrições de geração e modelos de prompts em references/directional-concepts.md. Apenas escrever descrições textuais das três direções não conta como conclusão desta etapa.

Salve a pintura original e as três imagens geradas como um conjunto de referência de quatro direções, indicando a direção e a natureza da imagem gerada; as imagens além da tela são referências de design espacial, não a obra original do pintor ou evidência de renderização 3D real. Objetos já existentes na pintura original devem manter identidade, posição e forma consistentes quando expostos entre direções. Se um mundo existente não possui as três referências direcionais, complete-as primeiro; referências já existentes e consistentes podem ser reutilizadas, mas atualize as direções afetadas se o design espacial for alterado.

Segundo Passo: Análise das Quatro Direções, Inventário de Quantidades e Criação de Módulos

Antes de modelar, escreva o primeiro plano, plano médio, fundo, horizonte, contorno principal, relações de oclusão e proporções de blocos de cores. Selecione 3-6 pontos de referência identificáveis, como picos de montanhas, casas rurais, cabeceiras de pontes, molduras de janelas ou grupos de personagens; registre suas coordenadas normalizadas na imagem original. Primeiro, combine a perspectiva inicial na mesma proporção da imagem original e, em seguida, projete para a tela do celular. Telas pequenas podem ter um campo de visão ligeiramente ampliado; se isso expor céu vazio, solo vazio ou reduzir o sujeito a um pequeno modelo central, adicione espaço e escolha um corte/ângulo de observação razoável, em vez de mover o objeto principal ou aumentar ainda mais o campo de visão.

Após verificar as imagens geradas das três direções, escreva um plano espacial unificado para cada pintura: combinando a pintura original e as imagens esquerda, direita e traseira para explicar o que existe em cada direção e acima, que partes identificáveis o sujeito tem, e onde estão o percurso de navegação e os limites. Para externas, explique como o primeiro plano, plano médio e fundo se conectam em cada direção horizontal; para internas, explique as paredes, portas, janelas, móveis e espaços adjacentes correspondentes. Ao planejar, leia references/world-acceptance.md, unifique as quatro imagens em um único layout de mundo, resolva contradições entre imagens em estradas, margens, edifícios ou vegetação e, em seguida, modele em lote.

Antes de modelar, crie um inventário de objetos das quatro direções: para cada tipo de objeto, conte separadamente o número visível ou faixa estimada nas vistas frontal, esquerda, direita e traseira; registre o total após deduplicação em toda a cena, o ID do objeto, a base da imagem, posição e tamanho próximo/distante, cobertura por direção, cores principais e secundárias e componentes-chave. O mesmo objeto que aparece em várias imagens é modelado apenas uma vez; o total em toda a cena não pode ser simplesmente a soma dos números visíveis nas quatro direções. Primeiro, crie e renderize itens individuais ou grupos representativos parciais, compare com as imagens de referência da direção correspondente para corrigir e, em seguida, organize e combine por tipo de acordo com o inventário. Após a combinação, verifique a quantidade real visível, iluminação e oclusão em cada direção; não use "já tem muitas gramas/lírios no código" como substituto para o efeito visível. A tabela de estatísticas específicas e os marcos de itens individuais e combinados estão em references/component-inventory.md; leia ao criar o inventário ou ajustar quantidade/densidade/cor do material.

Selecione módulos de entidade com base na cena real: terreno contínuo e caminhos, superfície de água e margem, invólucro completo de edifícios ou interior, volume de plantas, móveis, personagens, céu. Reutilize geometrias base e capacidades de processamento em lote; o terreno, contorno do edifício, layout e perspectiva principal de cada pintura devem ser projetados de forma independente. A produção em série não pode apenas trocar a paleta de cores ou substituir títulos.

Torne o Mundo Válido

Preencha os lados além da frente, a parte traseira e as áreas acessíveis com espaço sob o mesmo clima, época e escala. O volume real, as laterais e costas dos edifícios, troncos e copas de árvores, telhados e margens de água devem suportar navegação ao redor. A pintura original pode servir como referência de contraste ou detalhe de material, mas não pode ser colada como um plano e considerada reconstrução espacial concluída.

A parte traseira deve ter relações espaciais navegáveis e identificáveis. Repetir algumas árvores distantes, colocar um grande gramado ou superfície de água, ou usar neblina densa para cobrir o vazio não conta como conclusão. O mar e os campos podem ser abertos, mas a linha da costa, horizonte, vegetação ou vestígios humanos devem formar uma profundidade de campo intencionalmente projetada. Os limites móveis devem ser consistentes com o terreno sólido; além dos limites, uma faixa de paisagem tampão visível é necessária para evitar que o jogador veja uma borda cênica ao se virar ou chegar perto da borda.

Cada mundo externo deve ter um esquema explícito de cobertura por céu ou copa de árvore. Mesmo que a pintura original não mostre o céu, lide com a vista ao levantar a cabeça e o campo de visão ampliado de telas estreitas; não permita que a omissão da configuração do céu faça o mundo voltar silenciosamente para uma cor sólida padrão. Projete um céu com sombra, nuvens ou camadas de luz de acordo com o clima da pintura e conecte-o à copa da árvore. Um céu claro pode permanecer simples; um jardim com copa densa deve adicionar galhos, lacunas na copa e o céu atrás deles. Não use um bloco de fundo sem conteúdo como espaço superior supostamente completo.

Grade do solo, pontos de apoio de edifícios, raízes de plantas e câmera de caminhada compartilham regras de altura. Superfícies de ponte, água e solo devem ser superfícies independentes distintas; o controlador seleciona a camada transitável com base na área atual; verifique rampas de cabeceira de ponte e guarda-corpos para evitar que a superfície da água acompanhe o arco da ponte ou que a câmera salte abruptamente de camada. Defina colisão ou limites transitáveis consistentes com a forma para paredes, troncos de árvores, móveis e margens; o ponto de spawn e as rotas principais devem ser claros. Pinturas com vista aérea podem usar um modo de voo livre explícito ou construir uma plataforma de observação real; não trate uma câmera suspensa como caminhada no solo.

Primeiro, ajuste o contorno principal, composição e blocos de cores; depois, adicione pinceladas e pequenos enfeites. Iluminação, mapeamento de tom, neblina e texturas alteram as cores da pintura original; avalie na renderização real, não apenas verificando as cores hexadecimais dos materiais. Superfícies geométricas podem usar texturas de pinceladas, diferenças de cor de face ou pinceladas curtas instanciadas; mantenha as formas de entidade legíveis.

Cada cena deve ter iluminação agendada explicitamente no plano de produção e ser validada como um marco visual independente. Determine a fonte e direção da luz principal, luz ambiente, superfícies que recebem sombras e claro/escuro nos contatos com base na pintura original; em internas, verifique especialmente a luz da janela, embaixo dos móveis e cantos. Use iluminação próxima à cena final durante a fase de renderização de itens individuais; após a composição, verifique as camadas de luz realmente visíveis, projeções de objetos e sensação de ancoragem no solo. Não use iluminação global uniforme, sombreamento próprio de texturas ou luz ambiente muito forte para achatar o volume; não transforme uma pintura original brilhante em um quarto escuro para enfatizar sombras. Dias nublados e luz difusa podem ser suaves; não force manchas de luz solar com bordas nítidas. Para implementação e solução de problemas, consulte a referência de iluminação "Iluminação Interna e Verificação Final de Cor".

Distinga cor base do material, luz/sombra na superfície, projeção de objetos e reflexos na superfície da água. Sombreamento cozido nos vértices não substitui projeções reais; ondulações repetitivas na água não substituem reflexos de pontes, barcos ou árvores. Se a pintura original tem paredes brancas como característica identificável, a imagem final ainda deve ser lida como paredes brancas, em vez de uma casa amarela padrão; verifique o contraste entre realces, superfícies voltadas para trás em cores frias e áreas florestais circundantes. Ao fazer correções envolvendo iluminação, paisagens aquáticas ou florestas densas, leia references/light-water-vegetation.md e selecione um esquema real de luz, sombra e reflexo baseado na pintura.

A densidade da vegetação depende da oclusão e dos blocos de cores, não do número total de árvores. Se a pintura original for uma floresta contínua densa, use copas de árvores irregulares, arbustos no sub-bosque e massa florestal de fundo para fechar o volume do solo à copa; verifique se ainda é possível ver o céu diretamente entre os troncos. Bosques abertos e vazios intencionais preservam as lacunas originais. Camadas por primeiro plano, plano médio e fundo, mantendo o sujeito principal, paredes brancas, aberturas de pontes e rotas; evite apenas uma fileira de troncos igualmente espaçados. Se a extremidade de um canal lateral parecer vazia, use margens florestais contínuas, margens curvas ou colinas baixas para organizar o fundo; novas colinas são adicionadas apenas como extensões justificadas ou aprovadas pelo usuário além da tela, não impostas a todas as planícies ou superfícies de água abertas.

Crie o sujeito principal camada por camada: "contorno, componentes estruturais, material de superfície, conexão com o ambiente"; extraia pelo menos três características identificadoras da pintura original adequadas ao enquadramento atual. Pontes, barcos, edifícios e móveis que serão vistos de perto devem ter detalhes estruturais que sustentem sua escala e função. Aberturas de ponte, volume e material cinza são apenas o estágio de modelo bruto; lide com arcos/suportes, pilares, bordas, guarda-corpos e variações de pedra de acordo com o original; verifique a cabeceira da ponte e a vista sob a ponte. Barcos devem ter casco, borda, convés e cordame/pau correspondentes visíveis; evite usar grandes blocos para representar estruturas visíveis. Os componentes específicos são selecionados de acordo com o original; não force os mesmos enfeites em todas as pinturas. Exemplos detalhados estão na referência de aceitação "Detalhes do Sujeito".

Quando um projeto já tem uma versão corrigida aprovada pelo usuário, use sua forma do sujeito, densidade de detalhes e integridade espacial como referência de qualidade para trabalhos subsequentes. Não reduza arbitrariamente todo o lote a modelos brutos uniformemente minimalistas e depois declare conclusão com "estilização". Registre os resultados por contorno/oclusão, proporção do sujeito, blocos de cores principais e componentes-chave; não invente uma pontuação geral de similaridade.

Primeiro, conclua e valide visualmente uma obra representativa e, em seguida, expanda a série. O kit de ferramentas compartilhado pode ser reutilizado, mas a composição, extensão circundante e forma do sujeito devem ser projetadas para cada pintura individualmente. Após corrigir céu, terreno, renderização ou lógica de câmera compartilhados, verifique novamente cada pintura afetada.

Por padrão, use uma interface modesta: título, pintura original no canto superior direito que pode ser expandida e recolhida, e joystick de toque necessário; no desktop, movimento WASD/setas, arrastar para olhar ao redor, R para retornar à visão original. Siga a seleção atual do usuário; não force a adição de mapa, tour guiado, camadas ou ferramentas de tela cheia. Quando oculta, deve poder ser reaberta; os controles de toque devem permanecer clicáveis.

Quando o Dinamismo é Necessário

Primeiro, distinga no inventário de objetos entre estruturas fixas, plantas enraizadas, tecidos com bordas fixas, ações articuladas e objetos completos que se movem ao longo de uma rota. Preserve a pose de referência estática da pintura original; o dinamismo não deve perturbar continuamente a composição inicial. Para personagens, primeiro verifique roupas, postura sentada/em pé, proporção cabeça-corpo e objetos segurados; depois, decida quais articulações podem se mover, evitando substituir todos os personagens uniformemente pelo mesmo modelo. Para hierarquia específica, pontos fixos, sombras e validação de ciclo, leia references/living-worlds.md; leia ao adicionar vento, personagens, veículos, pássaros ou movimentos de barcos.

Verificação e Entrega

Abra o projeto no servidor real e aguarde a geometria e texturas carregarem. Tire capturas de tela na proporção original e na viewport do celular; compare lado a lado com a pintura original: tamanho e posição do sujeito, proporção céu/solo, contorno, oclusão, camadas de primeiro/meio/fundo, paleta de cores e densidade de detalhes. Ao verificar a composição, oculte o painel da pintura original; salve capturas de tela separadas com o painel expandido para evitar que a sobreposição bloqueie pontos de referência. Se a pintura original corta a extremidade da ponte, o corte pode continuar; a captura do celular mantém a estratégia de enquadramento para o sujeito principal, sem exigir que todos os pontos de referência estejam no quadro simultaneamente. Corrija primeiro os grandes desvios visíveis; não substitua a correção da composição pelo aumento do número de árvores. Quando a projeção quantificada for necessária, use scripts/project-landmarks.py; seu erro mede apenas pontos de referência selecionados, não representa similaridade visual geral.

Compare a renderização real da vista frontal com a pintura original; compare as renderizações reais das vistas esquerda, direita e traseira com as imagens de visualização geradas no primeiro passo, respectivamente; preencha as quantidades visíveis reais/cobertura e diferenças no inventário das quatro direções. Salve as imagens de visualização geradas e as capturas de tela finais do navegador separadamente; as primeiras não podem servir como evidência de conclusão para as últimas.

Execute a seguinte aceitação para cada pintura individualmente; não substitua a aceitação em lote por amostragem:

  1. Tire capturas de tela de renderização real a partir do ponto de spawn nas seguintes direções: frente, cerca de 90° à esquerda, cerca de 90° à direita, cerca de 180° para trás e inclinação para cima de pelo menos 55°; essas perspectivas mantêm a posição da câmera consistente. Para externas, tire também uma captura de pelo menos 75° em direção ao zênite; para cenas com copa de árvore, tire capturas da borda/lacuna da copa e sua conexão com o céu. A visão principal é usada apenas para comparação de composição com a pintura original; as outras visões são usadas para encontrar céu vazio, fundo vazio, quebras e modelos de face única.
  2. Ao longo de pelo menos duas rotas acessíveis, mova-se continuamente com teclado/mouse ou toque real e tire capturas de tela. As rotas devem incluir andar além da pintura original e aproximar-se/contornar o lado ou a parte traseira da estrutura principal; verifique o solo, margens, cabeceiras de ponte e conexões de modelos. Para internos, escolha lados de portas/móveis realmente acessíveis. Para locais com mudança de camada, como cabeceiras de ponte, escadas ou margens, salve evidências intermediárias e registre se houve salto de camada ou colisão. Apenas definir a posição da câmera ou voar de volta para a visão original não prova a passagem pela rota.
  3. Abra e inspecione visualmente cada captura de tela; registre o conteúdo visível específico e defeitos. Espaços em branco, super simplificação, desvio claro do original ou validade apenas na vista frontal devem ser corrigidos primeiro e depois refotografados. A existência de arquivos de captura com nomes como rear não significa que a verificação foi aprovada.
  4. Verifique a composição no desktop e celular, ocultação/restauração da pintura original, movimento/redefinição, toque, redimensionamento de janela, carregamento de recursos e console do navegador. Verifique coordenadas limitadas, intervalo de índices, ponto de spawn, altura do solo e caminhos de colisão. Registre verificações de execução e verificações visuais separadamente.
  5. Registre a validação de iluminação de forma independente: aponte a direção da luz principal, áreas claras/escuras, projeções de objetos representativos e sombras de contato a partir das capturas de tela reais; após o movimento, confirme a estabilidade. Se a iluminação esperada não for visível, verifique primeiro os materiais/sombras finais, caminhos de luz e oclusão; não use a existência de objetos de luz ou a alternância de sombras como critério de aprovação. Reutilize as capturas de tela das direções, rotas e celular mencionadas acima; não crie um conjunto separado de evidências formais.

Se houver conteúdo correspondente, verifique adicionalmente nas capturas de tela e rotas acima: se as paredes brancas ainda parecem amareladas/acinzentadas, se a borda inferior da floresta distante vaza céu, se o horizonte lateral é fechado, se guarda-sóis/velas finas vazam projeções e se os reflexos estão alinhados com a linha d'água dos objetos, variam com a perspectiva e são quebrados por ondulações. Após o movimento, verifique a estabilidade das sombras; no celular, verifique o custo de reflexos e a taxa de quadros real; não substitua os resultados do celular pelos do desktop. Para julgamento detalhado, consulte a referência de iluminação e paisagens aquáticas.

Salve o plano, características do sujeito e evidências de captura de tela para cada pintura de acordo com a referência de aceitação. Você pode executar python3 scripts/validate-world-evidence.py <manifest.json> --require-passed para verificar itens ausentes, ângulos incorretos, capturas repetidas, arquivos faltantes e itens não aprovados; este script verifica apenas a estrutura das evidências; o conteúdo da imagem ainda deve ser inspecionado visualmente.

A entrada da série exibe uma capa real de cada mundo, obra e autor, categoria e um link para entrar. Na entrega, distinga entre "pode ser executado", "composição frontal feita" e "validação espacial completa aprovada"; relate honestamente mundos não aprovados e seus problemas. Marque os problemas como defeitos visuais confirmados, evidências insuficientes ou evidências de versões antigas; sem capturas de tela, não é possível inferir que a cena não foi feita, nem considerá-la aprovada. Somente quando todas as evidências para cada pintura estiverem completas e os problemas visuais resolvidos, o lote inteiro pode ser marcado como concluído. Entregue o endereço local executável e o conteúdo específico concluído; a publicação ainda deve seguir o escopo de autorização do usuário.

Quando o contorno, densidade de vegetação ou câmera sempre se desviam da imagem original, consulte references/fidelity-lessons.md, que registra experiências de correção reais para "Montanha Sainte-Victoire" e "Ponte em Argenteuil".

Habilidades Relacionadas