102.3K+Baixar
Ir para o guia de uso
Three.js Post-Processingpor CloudAI-X

Three.js Post-Processing Skill.

Trate os efeitos de tela como um pipeline de renderização ordenado, e não como filtros independentes.

  • 3D
  • Three.js
Baixar OpenDesignVer guia de uso
Revisão da fonte · Three.js Post-ProcessingSKILL.md
Tarefa 3D Produz • Uma cadeia ordenada de passes do composer • Configurações de efeito ligadas a um propósito visual • Tratamento de redimensionamento e comparação do custo dos efeitos Antes de começar Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.
Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Three.js Post-Processing: Crie um pipeline de efeitos de tela

Configuração do composer, efeitos em espaço de tela, passes personalizados, render targets e redimensionamento.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Three.js Post-Processing abrange o EffectComposer e passes que transformam uma cena renderizada. Os exemplos incluem brilho, antialiasing, oclusão ambiente, profundidade de campo, contornos, correção de cor e shaders personalizados em espaço de tela.

A diferença em relação ao trabalho com materiais é o escopo: o pós-processamento atua sobre a imagem renderizada e pode afetar toda a composição. A ordem dos passes, a resolução dos targets, o tratamento de redimensionamento e a comparação com a cena sem tratamento devem constar do plano de implementação. Verifique os construtores dos exemplos e o suporte do renderer na versão instalada do Three.js antes de usá-los.

Entregas esperadas

  • Uma cadeia ordenada de passes do composer
  • Configurações de efeito ligadas a um propósito visual
  • Tratamento de redimensionamento e comparação do custo dos efeitos
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Escolha a intenção

    Especifique o que deve brilhar, permanecer em foco ou receber destaque.

  2. 02
    Monte os passes

    Comece com a renderização da cena e adicione apenas os passes necessários para o tratamento pretendido.

  3. 03
    Compare e meça

    Verifique a visualização sem efeitos, a saída redimensionada e o custo de renderização na resolução-alvo.

02 Quando usar

Quando usar

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

Boa opção para

  • Acabamento de apresentaçãoAplique brilho ou foco controlado depois que a cena base já estiver funcionando.
  • Destaque de seleçãoContorne a geometria selecionada sem substituir o material base.

Limites a verificar

  • Trabalho de renderização adicionalCada passe pode aumentar o custo e pode esconder, em vez de resolver, um problema da cena.
  • API exige verificaçãoA fonte capturada contém construtores sensíveis à versão e padrões de WebGPU.

Traga estes insumos

  • Cena baseForneça uma renderização funcional antes dos efeitos.
  • Tratamento visualDescreva o brilho, foco, contorno ou correção de cor desejado.
  • Meta de desempenhoInforme resolução, pixel ratio e dispositivos-alvo.

03 Decisões importantes

Decisões importantes

  1. Raciocínio de pipeline

    A ordem explica interações que o ajuste isolado de efeitos pode deixar passar.

  2. Efeitos reversíveis

    Uma comparação com a versão base ajuda a remover passes caros que não servem à cena.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Use o diretório relevante de threejs-skills como orientação para o agente. Ele não é o runtime do Three.js e não instala assets de cena.

Arquivo da fonte original
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use threejs-postprocessing para adicionar um contorno sutil e bloom opcional a esta cena. Mantenha uma comparação sem efeitos, explique a ordem dos passes, verifique o redimensionamento e meça o custo adicional. Confira os construtores na versão instalada antes de usar.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

  • O composer é o caminho final de renderização pretendido.
  • Os efeitos sobrevivem a mudanças de tamanho e de pixel ratio.
  • Cada passe ativado tem um propósito claro.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída ou que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLeia o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos da fonte original podem mudar.

Proprietário da fonte
CloudAI-X
Repositório
CloudAI-X/threejs-skills
Arquivo da skill
skills/threejs-postprocessing/SKILL.md
Licença
Não confirmada — revise os termos originais antes de reutilizar.
Versão revisada
2026-10-07 · b1c623076c66
Resumo editorial da fonte
Configuração do composer, efeitos em espaço de tela, passes personalizados, render targets e redimensionamento.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

O bloom aqui é uma propriedade de material?

Não. Esta skill apresenta o bloom como um passe de pós-processamento.

Por que atualizar a resolução ao redimensionar?

Os targets do composer e os uniforms específicos de cada passe precisam permanecer alinhados com a saída.

A compatibilidade atual com WebGPU é garantida?

Não. É preciso verificar o renderer e a versão instalada.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, material de origem e trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignVer skills de design
Arquivo da fonte original
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md