threejs 热力图做成材质_three.js后期之自定义shader通道实现扫光效果

如果你还不知道如何在three.js中添加后期渲染通道，请先看一下官方的一个最简单的demo : github。

正如demo中所示的那样，我们的扫光效果，也是一个自定义的ShaderPass。

所以，我们得写一个shader来实现想要的效果，这里介绍一下实现的思路。

1.在自定义通道上，先获取场景原本的uv,然后原样输出；

2.在fs里，降低gl_FragColor的亮度(乘以小于1.0的数，这里取0.3)，这样，画面立马暗了下来；

3.画一条直线 y = -x；在这条直线上的部分颜色亮度为1.0，实际上光束是有宽度的，所以我们取一下abs(dy) < 0.1的时候亮度为1.0，那么光束的宽度为0.2 * 根号2；

4.光束内的abs(dy)，范围是0～0.1，那么可以用smoothstep函数来做一个平滑插值处理，使得光束的亮度由中间向两边平滑过渡；

5.添加uniform参数time实现动画，此时直线函数变为y = -x + time，随着time值的变化，自然y值也会变化，最终的效果就是光束左右移动，如动图所示；

下面上shader代码：

/**

* author:桔子桑

* time:2019.10.13*/THREE.SweepingLightShader={