You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
4.4 KiB
112 lines
4.4 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="pt-br">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Como usar o pós-processamento</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
three.js fornece uma solução completa de pós-processamento via [page:EffectComposer] para implementar esse workflow.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Workflow</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
||
|
|
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
||
|
|
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Depois que todos os arquivos forem importados com sucesso, podemos criar nosso composer passando uma instância de [page:WebGLRenderer].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
const composer = new EffectComposer( renderer );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
function animate() {
|
||
|
|
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
|
||
|
|
composer.render();
|
||
|
|
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
const renderPass = new RenderPass( scene, camera );
|
||
|
|
composer.addPass( renderPass );
|
||
|
|
|
||
|
|
const glitchPass = new GlitchPass();
|
||
|
|
composer.addPass( glitchPass );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Passes integrados</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Passos Personalizados</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
À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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
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 );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|