Three.js 几种着色器效果


在Three.js中使用着色器时,片段着色器所需的最小计算如下:

varying vec2 vUv;的意思是,声明了一个叫vUv的变量,它的类型为vec2,该变量是为了将顶点着色器中的信息传递到片元着色器中。那么它传递了什么信息呢?我们看到与之相关的只有vUv = uv;可是uv都没声明过啊!这是哪里来的?

uv是Three.js帮你传进来的一个很有用的属性,它代表了该顶点在UV映射时的横纵坐标。简单地说,一个物体的模型可能很复杂,对其贴图的一个简单有效的方法就是UV映射,将每个面片贴的图统一映射到一张纹理上,记录每个面片贴图在纹理上对应的位置。得到这样的效果:

单色效果


着色器将显示更改为单色(黑白)。通过计算红色,绿色和蓝色的三原色并消除饱和度,则为单色。
首先,从每种RGB颜色计算亮度。(r + g + b) / 3.0 得到亮度值,将其乘以黑白。

反转效果


正如其名称所示,通过反转颜色的数值达到效果。具体来说,像素颜色值将为“0.0到1.0”,因此您只需通过从1.0中减去颜色值即可简单地反转颜色。顺便说一下,颜色值是“x”是红色,“y”是蓝色,“z”是绿色。

回忆效果


这个着色器会将显示更改为棕褐色调,类似经常在电影回忆场景中看到的效果。

马赛克效果


– 通过任意像素水平和垂直分割当前屏幕
– 通过查看分割中的中心像素来设置像素颜色
– 最初,最好在分割像素内设置平均值
以下代码fMosaicScale是着色器外部的镶嵌设置的像素数。

磨砂玻璃


思路是从相邻像素中随机获取像素:

旋涡效果


使用三角函数可以很容易地实现螺旋,参考涡旋的中心位置将像素颜色设置在一点一点地进行旋转的位置处,离中心越远位移越大。

阈值效果


仅用黑白表示图像颜色,此顶点亮度大于0.533333,将其填充为白色,否则将其填充为黑色。

随机抖动效果


随机抖动是阈值的改进。它也用白色和黑色表示,但如果要比阈值看似均匀一些。它并不是直接将一点填充为白/黑,而是在某个范围内随机混合白/黑。顺便说一下,GLSL没有随机功能,所以我们需要自己实现它。

拜耳抖动效果


拜耳抖动比上面的阈值化更清晰地显示阴影。我们将使用4像素×4像素的阈值表来确定每个像素的颜色。将当前像素的亮度与阈值表进行比较,亮度高为白色较小则变为黑色。此外,由于需要获取像素位置,例如每4个像素而不是UV位置,我们将着色器外部的屏幕尺寸设置为vScreenSize。