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

這篇文章主要介紹了Three.js中如何實(shí)現(xiàn)Bloom效果的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Three.js中如何實(shí)現(xiàn)Bloom效果文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

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

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

準(zhǔn)備工作

首先，我們需要引入 Three.js 庫(kù)：

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

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

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

接下來(lái)，我們需要?jiǎng)?chuàng)建一個(gè)場(chǎng)景和一個(gè)相機(jī)：

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

然后，我們需要在場(chǎng)景中添加幾何體和材質(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 效果

接下來(lái)，我們需要添加 UnrealBloomPass 和 ShaderPass 來(lái)實(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 對(duì)象：

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

關(guān)于“Three.js中如何實(shí)現(xiàn)Bloom效果”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Three.js中如何實(shí)現(xiàn)Bloom效果”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。