webgl实现发光线框(glow wireframe)效果 要实现发光的效果
时间:2022-07-22
本文章向大家介绍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
- IOCP反射服务器
- 给PHP开发者讲讲PHP源码-第二部分
- 给PHP开发者讲讲PHP源码-第一部分
- tomcat源码解读一 Digester的解析方式
- Markdown 语法说明(简体中文版)
- C++中_onexit()用法简述
- tomcat请求处理分析(六)servlet的处理过程
- FFmpeg菜鸡互啄#第1篇#一些基本概念
- FFmpeg菜鸡互啄#第2篇#配置VS开发环境
- FFmpeg菜鸡互啄#第3篇#视频解码
- FFmpeg菜鸡互啄#第4篇#音频解码
- FFmpeg菜鸡互啄#第5篇#视频帧格式转换
- tomcat请求处理分析(三) 绑定本地端口监听请求
- 利用FFmpeg对火眼一体摄像机的回调数据进行处理:YUV转H264,H264封装flv,所有输入都是在内存中。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于Android-Skin-Loader实现换肤效果
- 通过 Nginx 实现最简单的Nas服务器(文件分享)
- 解决Android Studio xml 格式化不自动换行的问题
- GitHub代码仓库服务的那些事
- Android之自定义实现BaseAdapter(通用适配器三)
- Android实现音乐播放器锁屏页
- android studio3.3.1代码提示忽略大小写的设置
- Ascgen2可以把图片变成文字的小工具
- 解决android studio卡顿,提升studio运行速度的方法
- Android物理键盘事件解析
- AndroidQ(10)分区存储完美适配方法
- (全局快捷键工具)Power Keys彻底提升码字效率?
- android自定义view实现钟表效果
- 教你如何用OpenVZ限制虚拟机硬盘IO速度
- Android自定义控件实现短信验证码自动填充