javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!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';
		import { OutputPass } from 'three/addons/postprocessing/OutputPass.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. 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:
		</p>

		<code>
		const renderPass = new RenderPass( scene, camera );
		composer.addPass( renderPass );

		const glitchPass = new GlitchPass();
		composer.addPass( glitchPass );

		const outputPass = new OutputPass();
		composer.addPass( outputPass );
		</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. 
			 `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.
		</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>