three.js 如何使用后期處理

很多three.js應(yīng)用程序是直接將三維物體渲染到屏幕上的。 有時(shí)，你或許希望應(yīng)用一個(gè)或多個(gè)圖形效果，例如景深、發(fā)光、膠片微?；蚴歉鞣N類型的抗鋸齒。 后期處理是一種被廣泛使用、用于來(lái)實(shí)現(xiàn)這些效果的方式。 首先，場(chǎng)景被渲染到一個(gè)渲染目標(biāo)上，渲染目標(biāo)表示的是一塊在顯存中的緩沖區(qū)。 接下來(lái)，在圖像最終被渲染到屏幕之前，一個(gè)或多個(gè)后期處理過(guò)程將濾鏡和效果應(yīng)用到圖像緩沖區(qū)。

three.js通過(guò)EffectComposer（效果合成器），提供了一個(gè)完整的后期處理解決方案來(lái)實(shí)現(xiàn)這樣的工作流程。

工作流程

首先，我們要做的是從示例（examples）文件夾導(dǎo)入所有必需的文件。本指南假設(shè)你正在使用three.js官方npm包（npm package）。 在本指南的基礎(chǔ)示例中，我們需要下列文件。

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

當(dāng)這些文件被成功導(dǎo)入后，我們便可以通過(guò)傳入一個(gè)WebGLRenderer的實(shí)例，來(lái)創(chuàng)建我們的合成器了。

const composer = new EffectComposer( renderer );

在使用合成器時(shí)，我們需要對(duì)應(yīng)用程序的動(dòng)畫循環(huán)進(jìn)行更改。 現(xiàn)在我們不再調(diào)用WebGLRenderer的render方法，而是使用EffectComposer中對(duì)應(yīng)的render方法。

function animate() {

	requestAnimationFrame( animate );

	composer.render();

}

我們的合成器已經(jīng)準(zhǔn)備好了，現(xiàn)在我們就可以來(lái)配置后期處理過(guò)程鏈了。 這些過(guò)程負(fù)責(zé)創(chuàng)建應(yīng)用程序的最終視覺(jué)輸出，它們按照添加/插入的順序來(lái)進(jìn)行處理。 在我們的示例中，首先執(zhí)行的是RenderPass實(shí)例，然后是GlitchPass。在鏈中的最后一個(gè)過(guò)程將自動(dòng)被渲染到屏幕上。 這些過(guò)程的設(shè)置類似這樣：

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

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

RenderPass通常位于過(guò)程鏈的開始，以便將渲染好的場(chǎng)景作為輸入來(lái)提供給下一個(gè)后期處理步驟。 在我們的示例中，GlitchPass將會(huì)使用這些圖像數(shù)據(jù)，來(lái)應(yīng)用一個(gè)瘋狂的故障效果。參見(jiàn)這個(gè)示例： live example來(lái)看一看它的實(shí)際效果。

內(nèi)置過(guò)程

你可以使用由本引擎提供的各種預(yù)定義好的后期處理過(guò)程， 它們位于postprocessing目錄中。

自定義過(guò)程

有時(shí)你或許想要自己寫一個(gè)自定義后期處理著色器，并將其包含到后期處理過(guò)程鏈中。 對(duì)于這個(gè)需求，你可以使用ShaderPass。在引入該文件以及你的自定義著色器后，可以使用下列代碼來(lái)設(shè)置該過(guò)程：

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 );

本倉(cāng)庫(kù)中提供了一個(gè)名為CopyShader的文件， 這是你自定義自己的著色器的一個(gè)很好的起始代碼。CopyShader僅僅是拷貝了讀緩沖區(qū)中的圖像內(nèi)容到寫緩沖區(qū)，不會(huì)應(yīng)用任何效果。