Three.js中如何實現Bloom效果

這篇文章主要介紹了Three.js中如何實現Bloom效果的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Three.js中如何實現Bloom效果文章都會有所收獲，下面我們一起來看看吧。

在 Three.js 中實現 Bloom 效果

Bloom 是一種常用于游戲和電影場景中的后期特效，用于模擬相機透鏡光暈的效果。它可以使圖像看起來更加真實、生動，并且增強視覺體驗。在 Three.js 中，我們可以使用 UnrealBloomPass 和 ShaderPass 來實現這個效果。

準備工作

首先，我們需要引入 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();

關于“Three.js中如何實現Bloom效果”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Three.js中如何實現Bloom效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。