three.js实现分模块添加梦幻bloom辉光光晕--方案二解决分层渲染场景转动显示不正常，修复深度信息丢失层级问题

已于 2023-03-10 00:37:03 修改
阅读量1.9k 收藏 8
点赞数 3
分类专栏： three.js 文章标签： three.js
于 2021-05-21 19:30:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangdou369098655/article/details/117081044
版权

先上图对比方案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>
tangdou369098655
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Bloom's-Taxonomy布鲁姆认知分类.pdf
09-28
Bloom's-Taxonomy布鲁姆认知分类.pdf
Three.js 后期处理-高亮虚幻效果-UnrealBloomPass-相机分层渲染
qq_39503511的博客
12-10 5883
标题asdasdasdaZx // A code block 阿斯顿撒旦撒旦 this.$Api.CovidSurveyController.post_getCovidSurveyPeoples .request({ data: this.listParams, }) .then((res) => { this.linesData = res; });
关于threejs中设置辉光（也就是bloom）效果后，出现马赛克的问题
dalaomanzou的博客
05-27 552
threejs辉光效果存在马赛克
Bloom-JetPackCompose-Practice:Bloom-JetPack撰写实践
04-11
Bloom-JetPack撰写实践 Bloom-JetPack撰写实践
bloomfilter.js:JavaScript中的Bloom过滤器实现
04-29
bloomfilter.js 布隆过滤器是一种节省空间的概率数据结构。 此实现依赖于以下非加密哈希函数。 Fowler-Noll-Vo哈希函数。 詹金斯哈希函数。 安装 $ npm install bloomfilter.js 用法 var bloom = require( ' bloomfilter.js ' ) ; # constructor-args # arg1: probable number of elements in the filter. # arg2: optional false_postive_tolerance argument var filter = new bloom(100,0.00001) ; filter.add( " test-data 1 " ) ; filter.add( " test-data 2 " ) ; console.log(f
Three.js实现3D城市扫光效果
05-17
特效 使用Obj 模型 + shader 实线 加载 obj 格式文件加载到 scene中； 使用 ShaderMaterial 材质。     var Shader = { vertexShader: ` varying vec3 vp; void main(){ vp = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `,
three.js 实现辉光（原生JS）
dmyc1027的博客
10-07 3679
three.js中实现辉光效果，通过layer图层实现局部辉光
Three.js实现分区Bloom辉光效果
漫漫漫漫的博客
11-23 5479
一、效果展示 辉光效果 二、如何实现 1.基于EffectComposer后期渲染器。 2.借助UnrealBloomPass渲染通道，实现辉光效果。 3.了解three.js中 layers 分层的概念，实现分层渲染。 4.单帧两次渲染，分别渲染两个不同的场景，组合成为需要的场景。 三、代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <
Threejs Bloom(`UnrealBloomPass`通道)
u014291990的博客
11-08 7025
Threejs Bloom(UnrealBloomPass通道) Bloom主要用来模拟生活中的泛光或说眩光效果,通过threejs后期处理的扩展库UnrealBloomPass通道可实现一个泛光效果。 如果你不了解Bloom的相关知识，可以查看下面链接提供的文章，本文主要讲解threejs中如何实现Bloom效果。 OpenGL Bloom WebGL学习之HDR与Bloom OpenGL-H...
three.js后处理之bloom 泛光
A873054267的博客
06-16 2143
引入文件 <script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script> <script src="../../plugins/CopyShader.js"></script> <script src=".
threejs 局部泛光、局部发光使用
08-01
threejs 场景内有局部是发光体 其余是不发光体 这种情况下可以使用局部泛光解决 用到bloom 适用场景挺多得 两个小球 一个发光 一个不发光 逻辑清晰明了 工业场景 室内场景大多会遇到 能制作出一些酷炫得效果 结合线框模型使用更美好 结合了模型得使用加载
论文研究-利用Bloomfilter实现长流识别.pdf
07-22
给出了利用Bloom filter识别长流的算法。提出了使用分层哈希的方法，减少了在哈希过程中的冲突。采用带有部分主机信息的哈希函数，利用哈希串的重叠和数量上的一致性，使在识别长流的过程中能够很方便地还原出主机的信息；给每个哈希函数独立的存储空间，也在很大程度上减少了哈希过程中所带来的内部冲突。
bloom-filter-scala：Scala的Bloom过滤器，对于JVM最快
02-05
Scala的Bloom过滤器 总览 “ Bloom过滤器是一种节省空间的概率数据结构，用于测试元素是否为集合的成员。可能会出现假阳性匹配，但否定否定匹配。换句话说，查询返回“集合”或“绝对不在集合中。”可以将元素添加到集合中，但不能删除。”说。 简而言之，什么是Bloom过滤器： 优化内存。 当您无法将整个设备放入内存时，它就会发挥作用。 解决会员问题。 它可以回答一个问题：元素是否属于集合？ 概率（有损）数据结构。 它可以回答元素可能以某种概率属于集合。 入门 libraryDependencies + = " com.github.alexandrnikitin " %% " bl
node-bloom-control:适用于Node的Bloom Control集成。 与HTTP REST API缓存中间件Bloom结合使用
05-10
节点开花控制 适用于Node的Bloom Control集成。 与HTTP REST API缓存中间件Bloom一起使用。 Bloom Control使您可以从NodeJS代码控制Bloom缓存。 每当您的API工作者更新数据库模型或执行某些要求使缓存数据无效的操作时，便应按需清除API缓存。 :France: 在法国布列斯特（Brest）制造。 谁使用它？ 脆 :waving_hand: 您使用bloom-control，并且想要在此处列出吗？ 。 如何安装？ 在您的package.json依赖项中包含bloom-control 。 或者，您可以运行npm install bloom-control --save 。 如何使用？ 1.创建连接 可以像下面这样实例化node-bloom-control ： var BloomControl = require ( "bloom-control" ) . Bl
Go-布隆过滤器的一个Go实现参考bloomfilter.js
08-14
布隆过滤器的一个Go实现，参考bloomfilter.js
neo4j-bloom-1.9.1.tgz
03-03
neo4j-bloom-1.9.1.tgz
行业分类-设备装置-基于带有存储结构的Bloom过滤器的关键词可搜索加密方法.zip
09-07
行业分类-设备装置-基于带有存储结构的Bloom过滤器的关键词可搜索加密方法.zip
phpredis-bloom:RedisBloom 模块的 PHP 客户端
05-30
表中的内容代码示例命令PhpRedisBloom 命令Phpredis 命令原始命令测试在安装了 RedisBloom 模块和 Redis 扩展 5 的本地 Redis 服务器 4.0+ 上码头工人例子执照 介绍PhpRedisBloom 提供了RedisBloom Module的全套命令...
threejs 局部辉光
热门推荐
出埃及记
03-21 1万+
首先看一下局部辉光的效果。 困扰很久的问题，终于解决了！！！ 具体找到解决的方法是看了这里和这里2。也是看了这两个帖子之后才找到解决方法。 这种辉光效果也是用后期处理方法，大家可以先看官网上的这个例子。 renderer.autoClear = false; obj.layers.set(0); objBack.layers.set(1); function render(){ ...
2.使用 bitarray mmh3 实现 BloomFilter字符串测试
最新发布
03-07
可以回答这个问题。使用 bitarray mmh3 实现 BloomFilter 字符串测试可以提高字符串...而 mmh3 是一种高效的哈希函数，可以快速地将字符串映射为一个固定长度的二进制序列，从而方便地进行 BloomFilter 的实现和查询。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值