webgl实现发光线框(glow wireframe)效果

简介: 在之前这篇文章,WebGL 单通道wireframe渲染我们介绍了webgl如何实现单通道wireframe的效果。本篇文章就是在此技术原理基础之上,来实现发光的wireframe效果。

要实现发光的效果


所谓的发光的效果,就是颜色的渐变。渐变越慢,发光的效果越明显,渐变越快,发光效果越不明显。


其实wireframe本身就是在两种颜色之间进行渐变,从代码也可以看出

gl_FragColor.rgb = mix(vec3(.0,.0,.0), vec3(1.0,1.0,1.0),edgeFactor3());


其中edgeFactor3() 就是通过重心坐标的变换计算出来的一个渐变过度的参数。

但是由于这种渐变的效果不够慢,所以 发光的效果不是很明显,因此我们可以改进如下效果,把渐变的参数通过pow函数进行处理,代码如下:


float interopter = edgeFactor3();
 interopter = pow(interopter, uPower);
gl_FragColor.rgb = mix(vec3(1.0,.0,.0), vec3(1.0,1.0,1.0),interopter);


其中uPower表示pow函数的次方,此处取值范围0~1,通过uniform变量传递该变量的数值,最终的效果如下:


微信图片_20220424124140.png

image.png


上面是既有线框部分,也有面的部分。如果想实现只有线框的效果,可以启用透明的机制,并对颜色的透明度也进行渐变插值运算,透明设置代码如下:


// 启用混合功能
      gl.enable(gl.DEPTH_TEST);
      gl.enable(gl.BLEND);
      gl.disable(gl.DEPTH_WRITEMASK);
      // 设置混合函数
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);


shader代码增加以下的这行代码:


gl_FragColor.a = mix(1.0, .0,interopter);


效果如下图所示:


微信图片_20220424124144.png

发光的线框


如果模型替换成球形,效果如下:


微信图片_20220424124147.png

发光的线框-球体


加载模型的效果如下:


微信图片_20220424124151.png

发光的线框-模型


如果修改shader中的edgeFactor3函数,把计算最小值,改为计算平均值,代码如下:


float edgeFactor3(){
        vec3 d = fwidth(vBarycentric);
        vec3 a3 = smoothstep(vec3(0.0), d * 30.0 , vBarycentric);
      //return min(min(a3.x, a3.y), a3.z);
       return (a3.x + a3.y + a3.z) / 3.0;
  }


得到最终的效果如下图所示(立方体):


微信图片_20220424124156.png

发光的线框-立方体


替换成模型,效果如下:


微信图片_20220424124200.png

发光的线框-模型


如果结合混合模式中的相加混合,加上多个模型的叠加,可以得到更明显的发光叠加的效果,此种效果经常用于智慧园区,智慧楼宇中楼宇的发光效果呈现。

首先把混合模式改成相加混合,代码如下:


// 设置混合函数
      // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE); //相加混合模式


然后同时绘制多个模型,代码如下:


for (var i = 0;i < 10;i ++){
            gl.uniform1f(normalProgram.uScale, 1 - i/10)
            gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
           }


最终的效果如下所示:


微信图片_20220424124204.png

叠加效果


微信图片_20220424124207.png

叠加效果


微信图片_20220424124210.png

叠加效果

相关文章
|
数据可视化 物联网
Threejs物联网,工厂3D可视化
Threejs物联网,工厂3D可视化
1061 15
Threejs物联网,工厂3D可视化
|
编解码 图形学 C++
如何在Blender中压缩/减小GLTF模型的大小
Blender是一款功能强大的开源软件,旨在创建3D图形,动画和视觉效果。它支持多种文件格式的导入和导出,包括GLB,GLTF,DAE,OBJ,ABC,USD,BVH,PLY,STL,FBX和X3D。这种适应性使其成为各种3D项目和工作流程的宝贵工具。(https://www.blender.org/download/)。
979 0
|
存储 JSON Cloud Native
C++ QT获取本机公网IP和IP所在地
C++ QT获取本机公网IP和IP所在地
|
编解码 缓存 算法
Three.js如何降低3D模型的大小以便更快加载
为加快600MB的3D模型在Three.js中的加载速度,可采用多种压缩方法:1) 减少顶点数,使用简化工具或LOD技术;2) 压缩纹理,降低分辨率或转为KTX2等格式;3) 采用高效文件格式如glTF 2.0及draco压缩;4) 合并材质减少数量;5) 利用Three.js内置优化如BufferGeometry;6) 按需分批加载模型;7) Web Workers后台处理;8) 多模型合并减少绘制;9) 使用Texture Atlas及专业优化工具。示例代码展示了使用GLTFLoader加载优化后的模型。
1410 12
|
存储 运维 算法
蚂蚁Raft一致性算法库SOFAJRaft深入分析
大家好,我是 V 哥。SOFAJRaft 是蚂蚁金服开源的一款基于 Raft 共识算法的 Java 实现,特别适合高负载、低延迟的分布式系统。它支持 Multi-Raft-Group,能同时处理多个 Raft 集群,具备扩展性和强一致性保障。项目源自百度的 braft,并在性能和功能上进行了优化。本文将深入探讨 SOFAJRaft 的核心源码实现,包括 Leader 选举、日志复制、一致性维护、日志管理和快照机制等。通过关键代码展示其在节点初始化、日志复制、一致性维护等方面的设计思路。希望帮助大家更好地理解 Raft 算法,求关注和点赞,感谢!
207 2
蚂蚁Raft一致性算法库SOFAJRaft深入分析
|
编解码 算法 程序员
老程序员分享:OpenGL学习进程(10)第七课:四边形绘制与动画基础
老程序员分享:OpenGL学习进程(10)第七课:四边形绘制与动画基础
|
开发者
如何在游戏中实现一个好看的金币效果
如何在游戏中实现一个好看的金币效果
328 1
|
算法 决策智能 流计算
网络流问题
网络流问题
249 1
|
存储 消息中间件 监控
从软件复杂度的角度去理解DDD
从我们作为业务开发主要的职责深入到DDD的本质是什么?复杂度应处理?规范设计怎么做?本文将全方位为大家解答。
6347 0
从软件复杂度的角度去理解DDD
|
Java API Android开发
Android10.0(Q) 6765 USB 摄像头调试记录
Android10.0(Q) 6765 USB 摄像头调试记录
640 0