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.
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';
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. Em nosso exemplo, a instância de `RenderPass` é executada primeiro e depois a instância de `GlitchPass`. 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 );
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. Confira este [link:https://threejs.org/examples/webgl_postprocessing_glitch exemplo] para vê-lo em ação.
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].
À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.