Threejs Bloom(`UnrealBloomPass`通道)

Threejs Bloom(UnrealBloomPass通道)

Bloom主要用来模拟生活中的泛光或说眩光效果,通过threejs后期处理的扩展库UnrealBloomPass通道可实现一个泛光效果。

如果你不了解Bloom的相关知识，可以查看下面链接提供的文章，本文主要讲解threejs中如何实现Bloom效果。

• OpenGL Bloom
• WebGL学习之HDR与Bloom
• OpenGL-HDR和Bloom

examples相关案例

如果你想了解Threejs关于Bloom的资料资料，可以在threejs
的案例examples搜索窗口中检索关键词Bloom或者说软件包中通过代码编辑器全文检索关键词Bloom，可以看到相关的案例，以threejs R106版本为例，可以查看到webgl_postprocessing_unreal_bloom、webgl_postprocessing_unreal_bloom_selective等案例。

UnrealBloomPass通道

<script src="examples/js/postprocessing/EffectComposer.js"></script>
<script src="examples/js/postprocessing/RenderPass.js"></script>
<!-- 引入可以实现Bloom泛光效果的后期处理通道UnrealBloomPass -->
<script src="examples/js/postprocessing/UnrealBloomPass.js"></script>

var renderScene = new THREE.RenderPass( scene, camera );
//Bloom通道创建
var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.renderToScreen = true;
bloomPass.threshold = 0;
bloomPass.strength = 1.5;
bloomPass.radius = 0;

composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( renderScene );
// 眩光通道bloomPass插入到composer
composer.addPass( bloomPass );

function render() {
  composer.render();
  requestAnimationFrame(render);
}
render();

WebGL技术博客