Three.js中實現(xiàn)Bloom效果及完整示例
在 Three.js 中實現(xiàn) Bloom 效果
Bloom 是一種常用于游戲和電影場景中的后期特效,用于模擬相機(jī)透鏡光暈的效果。它可以使圖像看起來更加真實、生動,并且增強(qiáng)視覺體驗。在 Three.js 中,我們可以使用 UnrealBloomPass
和 ShaderPass
來實現(xiàn)這個效果。本文將介紹如何實現(xiàn)一個簡單的 Bloom 效果。
準(zhǔn)備工作
首先,我們需要引入 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);
接下來,我們需要創(chuàng)建一個場景和一個相機(jī):
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5;
然后,我們需要在場景中添加幾何體和材質(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);
實現(xiàn) Bloom 效果
接下來,我們需要添加 UnrealBloomPass
和 ShaderPass
來實現(xiàn) Bloom 效果。這兩個 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)建一個 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);
在上述代碼中,我們首先創(chuàng)建了一個 RenderPass
對象,并將其添加到 composer
中。然后,我們創(chuàng)建了一個 UnrealBloomPass
對象,并將其添加到 composer
中。UnrealBloomPass
用于生成 Bloom 紋理。參數(shù) new THREE.Vector2(window.innerWidth, window.innerHeight)
是指 Bloom 紋理的分辨率大小,1.5
是 Bloom 效果的強(qiáng)度,0.4
是閾值,0.85
是模糊程度。
接著,我們創(chuàng)建了一個 ShaderPass
對象,并將其添加到 composer
中。它用于將 Bloom 紋理和場景紋理相加,以生成最終的圖像。ShaderMaterial
是用于渲染 ShaderPass
的材質(zhì)。在這里,我們定義了兩個 uniform 變量:baseTexture
和 bloomTexture
分別表示場景紋理和 Bloom 紋理。然后,在頂點著色器中,我們將 vUv
聲明為一個 varying 類型的變量,并將其賦值為當(dāng)前頂點的紋理坐標(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 中實現(xiàn) Bloom 效果。這種攝影技術(shù)能夠顯著提高場景的真實感和視覺體驗。
同時,我們還學(xué)習(xí)了如何創(chuàng)建 EffectComposer
以及添加和組合不同的 Pass
。在這個過程中,我們理解了 Bloom 效果是如何實現(xiàn)的,以及如何使用 GLSL 編寫自定義著色器和 Uniform 變量來擴(kuò)展 Three.js 的渲染功能。
最后,需要注意的是,在使用 Bloom 效果時,我們需要計算和處理額外的像素信息,因此可能會對性能產(chǎn)生一定的影響。通常情況下,我們可以通過調(diào)整 resolution
、strength
、radius
等參數(shù)來平衡效果和性能。
以上就是Three.js中實現(xiàn)Bloom效果及完整示例的詳細(xì)內(nèi)容,更多關(guān)于Three.js實現(xiàn)Bloom效果的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js操作table元素實現(xiàn)表格行列新增、刪除技巧總結(jié)
這篇文章主要介紹了js操作table元素實現(xiàn)表格行列新增、刪除技巧,以實例形式分析總結(jié)了JavaScript針對table表格進(jìn)行行列的增加與刪除相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11js中setTimeout()與clearTimeout()用法實例淺析
這篇文章主要介紹了js中setTimeout()與clearTimeout()用法,以實例形式分析了setTimeout()與clearTimeout()的功能與使用技巧,需要的朋友可以參考下2015-05-05contains和compareDocumentPosition 方法來確定是否HTML節(jié)點間的關(guān)系
一個很棒的 blog 文章,是 PPK 兩年前寫的,文章中解釋了 contains() 和 compareDocumentPosition() 方法運(yùn)行在他們各自的瀏覽器上。2011-09-09baidu博客的編輯友情鏈接的新的層窗口!經(jīng)典~支持【FF】
baidu博客的編輯友情鏈接的新的層窗口!經(jīng)典~支持【FF】...2007-02-02js實現(xiàn)網(wǎng)頁圖片延時加載 提升網(wǎng)頁打開速度
這篇文章主要為大家介紹了js實現(xiàn)網(wǎng)頁圖片延時加載,提升網(wǎng)頁打開速度,感興趣的小伙伴們可以參考一下2016-01-01JavaScript中通過閉包解決只能取得包含函數(shù)中任何變量最后一個值的問題
JavaScript中解決閉包只能取得包含函數(shù)中任何變量最后一個值的問題2010-08-08