Three.js中實(shí)現(xiàn)Bloom效果及完整示例

更新時(shí)間：2023年04月24日 14:56:23 作者：Data_Adventure

這篇文章主要為大家介紹了Three.js中實(shí)現(xiàn)Bloom效果及完整示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

在 Three.js 中實(shí)現(xiàn) Bloom 效果

Bloom 是一種常用于游戲和電影場景中的后期特效，用于模擬相機(jī)透鏡光暈的效果。它可以使圖像看起來更加真實(shí)、生動，并且增強(qiáng)視覺體驗(yàn)。在 Three.js 中，我們可以使用 UnrealBloomPass 和 ShaderPass 來實(shí)現(xiàn)這個(gè)效果。本文將介紹如何實(shí)現(xiàn)一個(gè)簡單的 Bloom 效果。

準(zhǔn)備工作

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

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

然后，我們需要在畫布中添加一個(gè)渲染器，以便能夠看到 Three.js 場景：

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

接下來，我們需要創(chuàng)建一個(gè)場景和一個(gè)相機(jī)：

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

然后，我們需要在場景中添加幾何體和材質(zhì)：

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

實(shí)現(xiàn) Bloom 效果

接下來，我們需要添加 UnrealBloomPass 和 ShaderPass 來實(shí)現(xiàn) Bloom 效果。這兩個(gè) pass 都是從 EffectComposer 類中派生的。EffectComposer 是 Three.js 中用于渲染后期特效的類。

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

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

然后，在渲染循環(huán)中創(chuàng)建一個(gè) 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);

在上述代碼中，我們首先創(chuàng)建了一個(gè) RenderPass 對象，并將其添加到 composer 中。然后，我們創(chuàng)建了一個(gè) UnrealBloomPass 對象，并將其添加到 composer 中。UnrealBloomPass 用于生成 Bloom 紋理。參數(shù) new THREE.Vector2(window.innerWidth, window.innerHeight) 是指 Bloom 紋理的分辨率大小，1.5 是 Bloom 效果的強(qiáng)度，0.4 是閾值，0.85 是模糊程度。

接著，我們創(chuàng)建了一個(gè) ShaderPass 對象，并將其添加到 composer 中。它用于將 Bloom 紋理和場景紋理相加，以生成最終的圖像。ShaderMaterial 是用于渲染 ShaderPass 的材質(zhì)。在這里，我們定義了兩個(gè) uniform 變量：baseTexture 和 bloomTexture 分別表示場景紋理和 Bloom 紋理。然后，在頂點(diǎn)著色器中，我們將 vUv 聲明為一個(gè) varying 類型的變量，并將其賦值為當(dāng)前頂點(diǎn)的紋理坐標(biāo)。在片段著色器中，我們使用 texture2D() 函數(shù)獲取 baseTexture 和 bloomTexture 的顏色值，并相加起來。最后，我們將 finalPass 添加到 composer 中，并指定需要將結(jié)果渲染到屏幕上。

完整代碼

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

結(jié)論

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

同時(shí)，我們還學(xué)習(xí)了如何創(chuàng)建 EffectComposer 以及添加和組合不同的 Pass。在這個(gè)過程中，我們理解了 Bloom 效果是如何實(shí)現(xiàn)的，以及如何使用 GLSL 編寫自定義著色器和 Uniform 變量來擴(kuò)展 Three.js 的渲染功能。

最后，需要注意的是，在使用 Bloom 效果時(shí)，我們需要計(jì)算和處理額外的像素信息，因此可能會對性能產(chǎn)生一定的影響。通常情況下，我們可以通過調(diào)整 resolution、strength、radius 等參數(shù)來平衡效果和性能。

以上就是Three.js中實(shí)現(xiàn)Bloom效果及完整示例的詳細(xì)內(nèi)容，更多關(guān)于Three.js實(shí)現(xiàn)Bloom效果的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: