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

2022-04-24 517

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在之前这篇文章，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);
           }