Three.js中實(shí)現(xiàn)Bloom效果及完整示例
在 Three.js 中實(shí)現(xiàn) Bloom 效果
Bloom 是一種常用于游戲和電影場(chǎng)景中的后期特效,用于模擬相機(jī)透鏡光暈的效果。它可以使圖像看起來更加真實(shí)、生動(dòng),并且增強(qiáng)視覺體驗(yàn)。在 Three.js 中,我們可以使用 UnrealBloomPass
和 ShaderPass
來實(shí)現(xiàn)這個(gè)效果。本文將介紹如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Bloom 效果。
準(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);
接下來,我們需要?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 效果
接下來,我們需要添加 UnrealBloomPass
和 ShaderPass
來實(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
的顏色值,并相加起來。最后,我們將 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();
結(jié)論
通過添加 UnrealBloomPass
和 ShaderPass
,我們可以在 Three.js 中實(shí)現(xiàn) Bloom 效果。這種攝影技術(shù)能夠顯著提高場(chǎng)景的真實(shí)感和視覺體驗(yàn)。
同時(shí),我們還學(xué)習(xí)了如何創(chuàng)建 EffectComposer
以及添加和組合不同的 Pass
。在這個(gè)過程中,我們理解了 Bloom 效果是如何實(shí)現(xiàn)的,以及如何使用 GLSL 編寫自定義著色器和 Uniform 變量來擴(kuò)展 Three.js 的渲染功能。
最后,需要注意的是,在使用 Bloom 效果時(shí),我們需要計(jì)算和處理額外的像素信息,因此可能會(huì)對(duì)性能產(chǎn)生一定的影響。通常情況下,我們可以通過調(diào)整 resolution
、strength
、radius
等參數(shù)來平衡效果和性能。
以上就是Three.js中實(shí)現(xiàn)Bloom效果及完整示例的詳細(xì)內(nèi)容,更多關(guān)于Three.js實(shí)現(xiàn)Bloom效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧總結(jié)
這篇文章主要介紹了js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧,以實(shí)例形式分析總結(jié)了JavaScript針對(duì)table表格進(jìn)行行列的增加與刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11js中setTimeout()與clearTimeout()用法實(shí)例淺析
這篇文章主要介紹了js中setTimeout()與clearTimeout()用法,以實(shí)例形式分析了setTimeout()與clearTimeout()的功能與使用技巧,需要的朋友可以參考下2015-05-05contains和compareDocumentPosition 方法來確定是否HTML節(jié)點(diǎn)間的關(guān)系
一個(gè)很棒的 blog 文章,是 PPK 兩年前寫的,文章中解釋了 contains() 和 compareDocumentPosition() 方法運(yùn)行在他們各自的瀏覽器上。2011-09-09js實(shí)現(xiàn)前端分頁(yè)頁(yè)碼管理
本文主要介紹了js實(shí)現(xiàn)前端分頁(yè)頁(yè)碼管理的具體方法。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01baidu博客的編輯友情鏈接的新的層窗口!經(jīng)典~支持【FF】
baidu博客的編輯友情鏈接的新的層窗口!經(jīng)典~支持【FF】...2007-02-02js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載 提升網(wǎng)頁(yè)打開速度
這篇文章主要為大家介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載,提升網(wǎng)頁(yè)打開速度,感興趣的小伙伴們可以參考一下2016-01-01JavaScript中通過閉包解決只能取得包含函數(shù)中任何變量最后一個(gè)值的問題
JavaScript中解決閉包只能取得包含函數(shù)中任何變量最后一個(gè)值的問題2010-08-08HTML+JS實(shí)現(xiàn)3D倒計(jì)時(shí)爆炸特效
這篇文章主要為大家詳細(xì)介紹了如何結(jié)合HTML與JS實(shí)現(xiàn)3D倒計(jì)時(shí)爆炸特效,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-01-01