# Como usar o pós-processamento

Muitas aplicações three.js renderizam seus objetos 3D diretamente na tela. Às vezes, no entanto, você deseja aplicar um ou mais efeitos gráficos como Depth-Of-Field, Bloom, Film Grain ou vários tipos de Anti-aliasing. O pós-processamento é uma abordagem amplamente utilizada para implementar tais efeitos. Primeiro, a cena é renderizada para um render target que representa um buffer na memória da placa de vídeo. Na próxima etapa, um ou mais passos de pós-processamento aplicam filtros e efeitos ao buffer de imagem antes que ele seja renderizado para a tela.

three.js fornece uma solução completa de pós-processamento via [page:EffectComposer] para implementar esse workflow.

## Workflow

A primeira etapa do processo é importar todos os arquivos necessários do diretório de exemplos. Este guia assume que você está usando o pacote [link:https://www.npmjs.com/package/three npm] do three.js. Para nossa demonstração básica, precisamos dos seguintes arquivos.

`import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';`

Depois que todos os arquivos forem importados com sucesso, podemos criar nosso composer passando uma instância de [page:WebGLRenderer].

`const composer = new EffectComposer( renderer );`

Ao usar um composer, é necessário alterar o loop de animação da aplicação. Em vez de chamar o método render de [page:WebGLRenderer], agora usamos a respectiva contraparte de [page:EffectComposer].

`function animate() { requestAnimationFrame( animate ); composer.render(); }`

Nosso composer já está pronto para que seja possível configurar a cadeia de passos de pós-processamento. Esses passos são responsáveis ​​por criar a saída visual final do aplicativo. Eles são processados ​​na ordem de sua adição/inserção. In our example, the instance of `RenderPass` is executed first, then the instance of `GlitchPass` and finally `OutputPass`. A última passagem habilitada na cadeia é renderizada automaticamente na tela. A configuração dos passos fica assim:

`const renderPass = new RenderPass( scene, camera ); composer.addPass( renderPass ); const glitchPass = new GlitchPass(); composer.addPass( glitchPass ); const outputPass = new OutputPass(); composer.addPass( outputPass );`

O `RenderPass` é normalmente colocado no início da cadeia para fornecer a cena renderizada como entrada para a próxima etapa de pós-processamento. No nosso caso, o `GlitchPass` usará esses dados de imagem para aplicar um efeito de glitch selvagem. `OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping. Confira este [link:https://threejs.org/examples/webgl_postprocessing_glitch exemplo] para vê-lo em ação.

## Passes integrados

Você pode usar uma ampla variedade de passos de pós-processamento predefinidos fornecidos pela engine. Estão localizados no diretório [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].

## Passos Personalizados

Às vezes, você deseja escrever um shader de pós-processamento personalizado e incluí-lo na cadeia de passos de pós-processamento. Para este cenário, você pode utilizar o `ShaderPass`. Depois de importar o arquivo e seu shader personalizado, você pode usar o código a seguir para configurar o passo.

`import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js'; // later in your init routine const luminosityPass = new ShaderPass( LuminosityShader ); composer.addPass( luminosityPass );`

O repositório fornece um arquivo chamado [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] que é um bom código inicial para seu próprio shader personalizado. `CopyShader` apenas copia o conteúdo da imagem do buffer de leitura do [page:EffectComposer] para seu buffer de gravação sem aplicar nenhum efeito.