bloom分层渲染，同时支持光晕效果和普通材质（页面背景透明）-方案二

方案二解决分层渲染场景转动显示不正常，修复深度信息丢失层级问题

<!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>

原文：https://blog.csdn.net/tangdou369098655/article/details/117081044

bloom ThreeJS 特效辉光

WEBGL学习网（WebGLStudy.COM）专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息：
1. 本站部分资源来源于用户上传和网络，如有侵权请邮件联系站长：1218436398@qq.com！我们将尽快处理。
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源打赏售价用于赞助本站提供的服务支出（包括不限服务器、网络带宽等费用支出）！
7.欢迎加QQ群学习交流：549297468 ，或者搜索微信公众号：WebGL学习网
WEBGL学习网 » bloom分层渲染，同时支持光晕效果和普通材质（页面背景透明）-方案二