three.js 如何使用后期處理

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

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

工作流程

首先，我們要做的是從示例（examples）文件夾導入所有必需的文件。本指南假設(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';

當這些文件被成功導入后，我們便可以通過傳入一個WebGLRenderer的實例，來創(chuàng)建我們的合成器了。

const composer = new EffectComposer( renderer );

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

function animate() {

	requestAnimationFrame( animate );

	composer.render();

}

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

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

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

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

內(nèi)置過程

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

自定義過程

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

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

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