专栏首页计算机图形学 前端可视化 WebGLwebgl实现发光线框(glow wireframe)效果 要实现发光的效果

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WebGL2系列之多采样渲染缓冲对象

    在很久很久以前,使用WebGL1的时候,只能在默认的绘制的缓冲区上面使用MSAA,而不能在帧缓冲区上面实现,更加形象的说就是:MSAA不能用于离屏渲染。 如果需...

    用户3158888
  • WebGL2系列之多采样渲染缓冲对象

    在很久很久以前,使用WebGL1的时候,只能在默认的绘制的缓冲区上面使用MSAA,而不能在帧缓冲区上面实现,更加形象的说就是:MSAA不能用于离屏渲染。 如果需...

    用户3158888
  • WebGL2系列之顶点数组对象

    顶点数组对象( VAO )是这样一种对象: 它封装了与顶点处理器有关的所有数据,它记录了顶点缓存区和索引缓冲区的引用,以及顶点的各种属性的布局而不是实际的数据。

    用户3158888
  • 最简WebGL教程,仅需 75 行代码

    现代 OpenGL(以及名为WebGL的扩展)与我过去学习的传统 OpenGL 有很大不同。我了解栅格化的工作原理,所以对这些概念很满意。但是我所阅读的每篇教程...

    疯狂的技术宅
  • three.js 着色器材质内置变量

    他们或者单个出现在着色器中,或者组团出现在着色器中,是着色器的灵魂。下面来分别说一说他们的意义和用法。

    郭先生的博客
  • WebGL2系列之多采样渲染缓冲对象

    在很久很久以前,使用WebGL1的时候,只能在默认的绘制的缓冲区上面使用MSAA,而不能在帧缓冲区上面实现,更加形象的说就是:MSAA不能用于离屏渲染。 如果需...

    用户3158888
  • WebGL2系列之多采样渲染缓冲对象

    在很久很久以前,使用WebGL1的时候,只能在默认的绘制的缓冲区上面使用MSAA,而不能在帧缓冲区上面实现,更加形象的说就是:MSAA不能用于离屏渲染。 如果需...

    用户3158888
  • webGL隐式迭代计算温度场的shader[显卡风扇不能停]

    隐式(implicitly)求解泊松方程(Poisson Equations),例如理想流体的流动,静态电场,溶质扩散,常物性参数的稳态导热方程。

    周星星9527
  • WebGL2系列之顶点数组对象

    顶点数组对象( VAO )是这样一种对象: 它封装了与顶点处理器有关的所有数据,它记录了顶点缓存区和索引缓冲区的引用,以及顶点的各种属性的布局而不是实际的数据。

    用户3158888
  • 用Web音频API来做一个音频可视化工具

    如果你曾经想过像MilkDrop这样的音乐可视化工具是怎么做的,那么这篇文章就是为你准备的。我们将从使用Canvas API来做简单的可视化入手,然后慢慢转移到...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券