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变量传递该变量的数值,最终的效果如下:
上面是既有线框部分,也有面的部分。如果想实现只有线框的效果,可以启用透明的机制,并对颜色的透明度也进行渐变插值运算,透明设置代码如下:
// 启用混合功能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);
效果如下图所示:
如果模型替换成球形,效果如下:
加载模型的效果如下:
如果修改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;}
得到最终的效果如下图所示(立方体):
替换成模型,效果如下:
如果结合混合模式中的相加混合,加上多个模型的叠加,可以得到更明显的发光叠加的效果,此种效果经常用于智慧园区,智慧楼宇中楼宇的发光效果呈现。
首先把混合模式改成相加混合,代码如下:
// 设置混合函数// 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);}
最终的效果如下所示:
本文也发表在我的webgl专栏,相关代码可以在专栏中获取:
https://xiaozhuanlan.com/topic/0614325798
案例视频 可以关注视频号 "ITman彪叔"观看,也欢迎关注公众号。
webgl实现发光线框(glow wireframe)效果相关推荐
- AE502 112种创意视频字幕动画呼出线框文字标题效果包括PR预设与扩展脚本ae模板
AE502 112种创意视频字幕动画呼出线框文字标题效果包括PR预设与扩展脚本ae模板 [模板介绍] 分辨率:1920×1080 文件大小:1.38 GB 文件格式:.Mogrt(PR预设),.AEP ...
- GraphicsLab Project之辉光(Glare,Glow)效果
作者:i_dovelemon 日期:2016 / 07 / 02 来源:CSDN 主题:Render to Texture, Post process, Glare, Glow, Multi-pass ...
- unity 代码边缘发光_Shader案例之内发光和边缘泛光效果
在很多游戏都可以看到这种效果,具体怎么去实现呢,其实超级简单.首先呢,我们先去把内发光的效果给做出了,然后再去实现外发光的效果. 1,我们最开始先实现一个显示再屏幕上的颜色: pass{CGPROGR ...
- unity3d 不规则外发光描边_Shader案例之内发光和边缘泛光效果
在很多游戏都可以看到这种效果,具体怎么去实现呢,其实超级简单.首先呢,我们先去把内发光的效果给做出了,然后再去实现外发光的效果. 1,我们最开始先实现一个显示再屏幕上的颜色: pass{CGPROGR ...
- CSS3发光字体几种效果
<!DOCTYPE html> <html> <head> <!-- 超酷炫的CSS3发光字体,可自定义喔!!--> <meta http-equ ...
- 换脸效果媲美GAN!一文解析OpenAI最新流生成模型「Glow」
在碎片化阅读充斥眼球的时代,越来越少的人会去关注每篇论文背后的探索和思考. 在这个栏目里,你会快速 get 每篇精选论文的亮点和痛点,时刻紧跟 AI 前沿成果. 点击本文底部的「阅读原文」即刻加入社区 ...
- Ae 效果详解:发光
效果/风格化/发光 Effects/Stylize/Glow 发光 Glow效果可找到图像中的较亮部分,然后使那些像素和周围的像素变亮,以创建漫射的发光光环. 可以创建两种颜色(颜色 A 和颜色 B ...
- 梦幻摩天轮——用CSS写一个元素发光以及圆盘旋转的效果
标题当然是我自创的啦,这个效果是我偶然做出来的,并没有人严肃地起过名字.那我为什么会偶然做出这个东西呢? 最近做一个PC端官网的项目,首页的banner迟迟没有定下来,感觉客户想搞个大文章.果然后来客 ...
- css 边缘闪光_CSS 文字发光效果
CSS 文字的发光效果通过 text-shadow 实现起来很方便的. text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 0 -1px 1px #8 ...
最新文章
- IE9会颠覆传统的上网模式?
- 【VMCloud云平台】SCO(七)如何使用集成包
- G - Mike and gcd problem
- GDCM:gdcm::CompositeNetworkFunctions的测试程序
- 案例:演示pageContext对象的使用及源码分析获取属性方法
- ES11新特性_绝对全局对象globalThis---JavaScript_ECMAScript_ES6-ES11新特性工作笔记067
- 嵌入式系统——系统安全之常见病毒漏洞刷题整理
- 拓端tecdat|Stata估算观测数据的风险比
- python怎么替换主干网络_无法将关键字“model”解析到字段中。活塞主干网.js
- 《FLUENT 14流场分析自学手册》——1.5 湍流模型
- 破解Excel受保护文件
- JS数字正则表达式验证(全全全!!!)
- echarts制图详解
- QT项目--简易音乐播放器
- 千万级大V独家合作,西瓜视频用什么吸引创作人?
- html第四天网站首页的布局设计到实施
- 阿里的敏捷组织和中台策略有何不同?
- 黑马程序员————高新技术————动态代理
- left join的基本用法以及on与where的区别
- XDOJ 363 输出快速排序递归算法隐含递归树的后序遍历序列 AC