利用着色器网站制作各种酷炫效果

自从前两天学了着色器的相关代码后，终于恍然大悟，之前做网页轮播的时候看到threejs写的酷炫效果，却不知道它的实现原理，而且从源代码里往往看到一堆无法修改的代码，现在终于知道个大概了。

从上次提到的着色器网站www.shadertoy.com上找了两个效果，一个是大海翻腾的效果（https://www.shadertoy.com/view/Ms2SD1），一个是鱼在海里游动的效果（https://www.shadertoy.com/view/llcSz8）。直接将这两个效果放到我的小房间里，最终效果如下：

大概实现方式是：

新建了两个立方体放到相应位置，分别导出为两个模型。

根据之前提到的步骤，新建各自的着色器代码。

下面是大海翻腾的着色器代码：

根据GLSL语法调整着色器代码：

入口函数mainImage改为main

由于GLSL有内置输出变量gl_FragColor和内置输入变量gl_FragCoord，去掉入口函数的参数fragColor 和 fragCoord

fragCoord 替换为内置输入变量 gl_FragCoordfragClolr 替换为内置输出变量 gl_FragColor

使用uniform变量来放外部程序传递来的环境数据

在THREE.ShaderMaterial中用uniform变量：

顶点着色器代码：

调整相应参数

通过update更新动画

这样就可以调整各种酷炫效果啦。