Three.js中如何实现Bloom效果

栏目分类：前端开发    发布日期：2024-04-22    浏览次数：44次     收藏

这篇文章主要介绍了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();