Three.js中實現Bloom效果及完整示例

Posted on by

在 Three.js 中實現 Bloom 效果

Bloom 是一種常用於遊戲和電影場景中的後期特效，用於模擬相機透鏡光暈的效果。它可以使圖像看起來更加真實、生動，並且增強視覺體驗。在 Three.js 中，我們可以使用 UnrealBloomPass 和 ShaderPass 來實現這個效果。本文將介紹如何實現一個簡單的 Bloom 效果。

準備工作

首先，我們需要引入 Three.js 庫：

<script src="./build/three.min.js"></script>

然後，我們需要在畫佈中添加一個渲染器，以便能夠看到 Three.js 場景：

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

接下來，我們需要創建一個場景和一個相機：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

然後，我們需要在場景中添加幾何體和材質：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

實現 Bloom 效果

接下來，我們需要添加 UnrealBloomPass 和 ShaderPass 來實現 Bloom 效果。這兩個 pass 都是從 EffectComposer 類中派生的。EffectComposer 是 Three.js 中用於渲染後期特效的類。

首先，我們需要引入 UnrealBloomPass 和 ShaderPass：

<script src="./examples/jsm/postprocessing/UnrealBloomPass.js"></script>
<script src="./examples/jsm/postprocessing/ShaderPass.js"></script>

然後，在渲染循環中創建一個 EffectComposer 對象：

const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);
const finalPass = new THREE.ShaderPass(
  new THREE.ShaderMaterial({
    uniforms: {
      baseTexture: { value: null },
      bloomTexture: { value: composer.renderTarget2.texture },
    },
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      uniform sampler2D baseTexture;
      uniform sampler2D bloomTexture;
      varying vec2 vUv;
      void main() {
        gl_FragColor = texture2D(baseTexture, vUv) + texture2D(bloomTexture, vUv);
      }
    `,
    defines: {},
  }),
  "baseTexture"
);
finalPass.needsSwap = true;
composer.addPass(finalPass);

在上述代碼中，我們首先創建瞭一個 RenderPass 對象，並將其添加到 composer 中。然後，我們創建瞭一個 UnrealBloomPass 對象，並將其添加到 composer 中。UnrealBloomPass 用於生成 Bloom 紋理。參數 new THREE.Vector2(window.innerWidth, window.innerHeight) 是指 Bloom 紋理的分辨率大小，1.5 是 Bloom 效果的強度，0.4 是閾值，0.85 是模糊程度。

接著，我們創建瞭一個 ShaderPass 對象，並將其添加到 composer 中。它用於將 Bloom 紋理和場景紋理相加，以生成最終的圖像。ShaderMaterial 是用於渲染 ShaderPass 的材質。在這裡，我們定義瞭兩個 uniform 變量：baseTexture 和 bloomTexture 分別表示場景紋理和 Bloom 紋理。然後，在頂點著色器中，我們將 vUv 聲明為一個 varying 類型的變量，並將其賦值為當前頂點的紋理坐標。在片段著色器中，我們使用 texture2D() 函數獲取 baseTexture 和 bloomTexture 的顏色值，並相加起來。最後，我們將 finalPass 添加到 composer 中，並指定需要將結果渲染到屏幕上。

完整代碼

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);
const finalPass = new THREE.ShaderPass(
  new THREE.ShaderMaterial({
    uniforms: {
      baseTexture: { value: null },
      bloomTexture: { value: composer.renderTarget2.texture },
    },
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      uniform sampler2D baseTexture;
      uniform sampler2D bloomTexture;
      varying vec2 vUv;
      void main() {
        gl_FragColor = texture2D(baseTexture, vUv) + texture2D(bloomTexture, vUv);
      }
    `,
    defines: {},
  }),
  "baseTexture"
);
finalPass.needsSwap = true;
composer.addPass(finalPass);
function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  composer.render();
}
animate();

結論

通過添加 UnrealBloomPass 和 ShaderPass，我們可以在 Three.js 中實現 Bloom 效果。這種攝影技術能夠顯著提高場景的真實感和視覺體驗。

同時，我們還學習瞭如何創建 EffectComposer 以及添加和組合不同的 Pass。在這個過程中，我們理解瞭 Bloom 效果是如何實現的，以及如何使用 GLSL 編寫自定義著色器和 Uniform 變量來擴展 Three.js 的渲染功能。

最後，需要註意的是，在使用 Bloom 效果時，我們需要計算和處理額外的像素信息，因此可能會對性能產生一定的影響。通常情況下，我們可以通過調整 resolution、strength、radius 等參數來平衡效果和性能。

以上就是Three.js中實現Bloom效果及完整示例的詳細內容，更多關於Three.js實現Bloom效果的資料請關註WalkonNet其它相關文章！

推薦閱讀：