先上圖對比方案1-2-3不同點，本文是方案2
方案1(旋轉場景情況下發光體不應該遮住另一個，但是遮住了)
方案2（層次正常，發光正常）
方案3（層次正常，發光正常，但是轉動場景時候部分輝光會被遮擋，但是還算OK）
方案二，解決分層渲染場景轉動時顯示不正常，修復了深度信息丟失導致的層級問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="x-shader/x-vertex" id="vertexshader">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform sampler2D baseTexture;
uniform sampler2D bloomTexture;
varying vec2 vUv;
void main() {
gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
}
</script>
<script type="module">
import * as THREE from "./build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from "./jsm/controls/OrbitControls.js"; // 軌道控制
import { EffectComposer } from "./jsm/postprocessing/EffectComposer.js"; // 效果合成器--EffectComposer依賴RenderPass.js、ShaderPass.js、CopyShader.js庫
import { UnrealBloomPass } from "./jsm/postprocessing/UnrealBloomPass.js"; // 虛幻效果通道
import { RenderPass } from "./jsm/postprocessing/RenderPass.js"; // 渲染通道
import { ShaderPass } from "./jsm/postprocessing/ShaderPass.js"; // 着色器通道
import { FXAAShader } from "./jsm/shaders/FXAAShader.js"; // 抗鋸齒着色器
let scene, camera, renderer, bloomComposer, finalComposer;
const ENTIRE_SCENE = 0,// 全部的，整個的場景
BLOOM_SCENE = 1; // 光暈場景
const bloomLayer = new THREE.Layers();// 光暈層次-創建一個圖層對象
bloomLayer.set(BLOOM_SCENE);// 先把光暈層次設置光暈場景的層次1
const darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });// 跟輝光光暈有關的變量
const materials = {};// 跟輝光光暈有關的變量
const params = {
exposure: 0,// 暴露
bloomStrength: 1.5,// 光暈強度
bloomThreshold: 0,// 光暈閾值
bloomRadius: 0,// 光暈半徑
};
const init = () => {
// 場景
scene = new THREE.Scene();
// 相機
camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
1,
100000
);
camera.position.set(50, 50, 50);
camera.position.y = 50;
// 渲染器
renderer = new THREE.WebGLRenderer({
antialias: true, // 抗鋸齒
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ReinhardToneMapping;
document.body.appendChild(renderer.domElement);
// 環境光
const light = new THREE.AmbientLight(0xffffff, 0.6);
light.layers.enable(0);
light.layers.enable(1);
scene.add(light);
// 控制器
const controls = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.AxesHelper(100));
window.onresize = () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
};
let bloomPass
const initComposer = () => {
// 去掉鋸齒---1
// 通過ShaderPass構造函數把FXAAShader着色器和uniforms構成的對象作為參數，創建一個鋸齒通道FXAAShaderPass,然后把鋸齒通道插入到composer中。
const effectFXAA = new ShaderPass(FXAAShader);
effectFXAA.uniforms["resolution"].value.set(
0.6 / window.innerWidth,
0.6 / window.innerHeight
); // 渲染區域Canvas畫布寬高度 不一定是全屏，也可以是區域值
effectFXAA.renderToScreen = true;
// 去掉鋸齒---1
const renderScene = new RenderPass(scene, camera);// RenderPass這個通道會在當前場景（scene）和攝像機（camera）的基礎上渲染出一個新場景，新建：
// 添加光暈效果---2
bloomPass = new UnrealBloomPass( // UnrealBloomPass通道可實現一個泛光效果。
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5,
0.4,
0.85
);
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
// 添加光暈效果---2
// 着色器通道容器--放進容器里
bloomComposer = new EffectComposer(renderer); // EffectComposer可以理解為着色器通道容器，着色器通道按照先后順序添加進來並執行
bloomComposer.renderToScreen = false;
bloomComposer.addPass(renderScene);
bloomComposer.addPass(bloomPass); // 添加光暈效果
bloomComposer.addPass(effectFXAA);// 去掉鋸齒
// 着色器通道容器--放進容器里
const finalPass = new ShaderPass(
new THREE.ShaderMaterial({
uniforms: {
baseTexture: { value: null },
bloomTexture: { value: bloomComposer.renderTarget2.texture },
},
vertexShader: document.getElementById("vertexshader").textContent,
fragmentShader: document.getElementById("fragmentshader")
.textContent,
defines: {},
}),
"baseTexture"
);
finalPass.needsSwap = true;
finalComposer = new EffectComposer(renderer);
finalComposer.addPass(renderScene);
finalComposer.addPass(finalPass);
finalComposer.addPass(effectFXAA);
};
const render1 = () => {
scene.traverse((obj) => {
if (obj.isMesh && bloomLayer.test(obj.layers) === false) {
materials[obj.uuid] = obj.material;
obj.material = darkMaterial;
}
});
bloomComposer.render();
scene.traverse((obj) => {
if (materials[obj.uuid]) {
obj.material = materials[obj.uuid];
delete materials[obj.uuid];
}
});
finalComposer.render();
requestAnimationFrame(render);
};
const render = () => {
scene.traverse(darkenNonBloomed); // 隱藏不需要輝光的物體
bloomComposer.render();
scene.traverse(restoreMaterial); // 還原
finalComposer.render();
requestAnimationFrame(render);
};
const bloomIgnore = [];// 跟輝光光暈有關的變量
function darkenNonBloomed(obj) {
if (obj instanceof THREE.Scene) { // 此處忽略Scene，否則場景背景會被影響
materials.scene = obj.background;
obj.background = null;
return;
}
if (
obj instanceof THREE.Sprite || // 此處忽略Sprite
bloomIgnore.includes(obj.type) ||
(obj.isMesh && bloomLayer.test(obj.layers) === false) // 判斷與輝光是否同層
) {
materials[obj.uuid] = obj.material;
obj.material = darkMaterial;
}
}
function restoreMaterial(obj) {
if (obj instanceof THREE.Scene) {
obj.background = materials.scene;
delete materials.scene;
return;
}
if (materials[obj.uuid]) {
obj.material = materials[obj.uuid];
delete materials[obj.uuid];
}
}
const main = () => {
init();
initComposer();
addCubes()
addCubes1()
changeBloom()
};
function addCubes1() {
const geometry = new THREE.BoxGeometry(20, 20, 10);
// 正常方塊
const normalMtl = new THREE.MeshLambertMaterial({ color: 0x35c5ea });
const normalBox = new THREE.Mesh(geometry, normalMtl);
normalBox.position.z = -5;
// normalBox.layers.set(0); // 這行代碼其實沒有卵用，如果沒有創建layer他會自動創建 設置圖層為0，網格模型1默認圖層是0，對應掩碼是1
console.log('查看網格模型默認圖層掩碼值normalBox', normalBox.layers.mask);
scene.add(normalBox);
// 通過Three.js渲染器渲染場景的時候，場景中的模型對象圖層必須和相機對象的圖層一樣，模型對象才會被渲染出來，一般默認情況下，網格Mesh等模型對象和相機對象Camera默認的圖層都是0，具體點說就是它們的圖層屬性.layers值Layers對象表示的圖層都是0，0層對應的.mask屬性值是1.
// 發光方塊
const bloomMtl = new THREE.MeshLambertMaterial({ color: 0x9d94ea });
const bloomBox = new THREE.Mesh(geometry, bloomMtl);
bloomBox.position.z = 5;
bloomBox.layers.enable(1);
console.log('查看網格模型默認圖層掩碼值bloomBox', normalBox.layers.mask);
scene.add(bloomBox);
}
function addCubes() {
// 創建兩個box， 將box進行layers進行分層是重要代碼，camera默認渲染0層
let texture = new THREE.TextureLoader().load("./backav9.jpg")
let texture1 = new THREE.TextureLoader().load("./py.png")
var geometry1 = new THREE.BoxGeometry(20, 20, 20);
var material1 = new THREE.MeshBasicMaterial({
map: texture
});
var cube1 = new THREE.Mesh(geometry1, material1);
// 重要代碼，將當前創建的box分配到0層
cube1.layers.set(0)// 這行代碼其實沒有卵用，如果沒有創建layer他會自動創建 設置圖層為0，網格模型1默認圖層是0，對應掩碼是1
console.log('查看網格模型默認圖層掩碼值cube1', cube1.layers.mask);
cube1.position.set(60, 0, 0)
scene.add(cube1);
// 通過Three.js渲染器渲染場景的時候，場景中的模型對象圖層必須和相機對象的圖層一樣，模型對象才會被渲染出來，一般默認情況下，網格Mesh等模型對象和相機對象Camera默認的圖層都是0，具體點說就是它們的圖層屬性.layers值Layers對象表示的圖層都是0，0層對應的.mask屬性值是1.
// 發光方塊
var geometry2 = new THREE.BoxGeometry(20, 20, 20);
var material2 = new THREE.MeshBasicMaterial({
map: texture1
});
var cube2 = new THREE.Mesh(geometry2, material2);
cube2.position.set(30, 0, 0)
cube2.layers.enable(1);
console.log('查看網格模型默認圖層掩碼值cube2', cube2.layers.mask);
scene.add(cube2);
}
main();
render();
function changeBloom() {
const gui = new GUI();
gui.add(params, 'exposure', 0.1, 2).onChange(function (value) {
renderer.toneMappingExposure = Math.pow(value, 4.0);
});
gui.add(params, 'bloomThreshold', 0.0, 1.0).onChange(function (value) {
bloomPass.threshold = Number(value);
});
gui.add(params, 'bloomStrength', 0.0, 3.0).onChange(function (value) {
bloomPass.strength = Number(value);
});
gui.add(params, 'bloomRadius', 0.0, 1.0).step(0.01).onChange(function (value) {
bloomPass.radius = Number(value);
});
}
// Layers 對象為 Object3D 分配 1個到 32 個圖層。32個圖層從 0 到 31 編號標記。 在內部實現上，每個圖層對象被存儲為一個 bit mask， 默認的，所有 Object3D 對象都存儲在第 0 個圖層上。
// 圖層對象可以用於控制對象的顯示。當 camera 的內容被渲染時與其共享圖層相同的物體會被顯示。每個對象都需要與一個 camera 共享圖層。
// 每個繼承自 Object3D 的對象都有一個 Object3D.layers 對象。
// 構造函數
// Layers()
// 創建一個新的圖層對象，該對象默認與第 0 圖層關聯。
// 屬性
// ###.mask : Integer
// 用 bit mask 表示當前圖層對象與 0 - 31 中的哪些圖層相對應。所屬層所對應的比特位為 1，其他位位 0。
// 方法
// .disable ( layer : Integer ) : null
// layer - 一個 0 - 31 的整數。
// 刪除圖層對象與參數指定圖層的對應關系。
// .enable ( layer : Integer ) : null
// layer - 一個 0 - 31 的整數。
// 增加圖層對象與參數指定圖層的對應關系。
// .set ( layer : Integer ) : null
// layer - 一個 0 - 31 的整數。
// 刪除圖層對象已有的所有對應關系，增加與參數指定的圖層的對應關系。
// .test ( layers : Layers ) : Boolean
// layers - 一個圖層對象。
// 如果傳入圖層對象與當前對象屬於相同的一組圖層，則返回 true，否則返回 false。
// .toggle ( layer : Integer ) : null
// layer - 一個 0 - 31 的整數。
// 根據參數切換對象所屬圖層。
</script>
</body>
</html>
