three.js实现分模块添加梦幻bloom辉光光晕方案--详细注释版本~~方案二解决分层渲染场景转动时显示不正常，修复了深度信息丢失导致的层级问题

先上图对比方案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>
posted @   糖~豆豆  阅读(1618)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
历史上的今天：
2019-05-27 ***免费服务器体验
Live2D
欢迎阅读『three.js实现分模块添加梦幻bloom辉光光晕方案--详细注释版本~~方案二解决分层渲染场景转动时显示不正常，修复了深度信息丢失导致的层级问题』
点击右上角即可分享
微信分享提示
AI IDE Trae