Three.js中实现Bloom效果及完整示例
在 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效果的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序环境下将文件上传到OSS的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
setTimeout函数是一个原生的javascript函数。setTimeout函数会在一个指定的延迟时间之后调用一个函数或执行一段指定的代码。它的应用非常广泛，例如我们希望用户在浏览器某个页面一段时间后弹出一个对话框，或者是鼠标点击某个元素后隔几秒钟在删除这个元素。2017-02-02
这篇文章主要为大家详细介绍了微信小程序实现动态列表项的顺序加载动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要为大家详细介绍了JavaScript实现拖动模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要分享了JavaScript 微任务和宏任务讲解，在js中，我们一般将所有的任务都分成两类，一种是同步任务，另外一种是异步任务。而在异步任务中，又有着更加细致的分类，那就是微任务和宏任务，下面来一起学习js中的微任务和宏任务吧2021-12-12
这篇文章主要为大家详细介绍了小程序tab实现页面切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了js实现查询商品案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
TypeScript中import type与import的区别详析
ES6引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量,下面这篇文章主要给大家介绍了关于TypeScript中import type与import区别的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要为大家介绍了Code Review 方法论与实践总结梳理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章是小编日常收集整理的有关bootstrap 常用组件包括Bootstrap 面板（Panels），Bootstrap 多媒体对象（Media Object）知识，非常不错，需要的朋友参考下吧2017-03-03
最新评论