Shadertoy学习 vol. 1 基本介绍与环境搭建

Link for the Seascape
在知乎上看到这个海洋的着色器时，我被震撼到了。立马去找了出处，然后就发现了Shadertoy这个网站。虽然之前在学习Unity的Shader Graph的时候也听说过，不过没想到有人在上面实现了这么好的效果。所以呢，自己便开始琢磨琢磨，看看能不能学习一下。

Shadertoy的基本原理

在网站里随便点开一个Shader，就能在右边看到它的代码。这些代码是用openGL的着色器语言—GLSL写的，基本的语法跟C++差不多，不过在一些地方会有出入，比如增加了一些向量和数学的方法，还有一些变量修饰符之类的。

Shadertoy并不是一个完整的着色器，它只是一个片元着色器，不涉及顶点的着色和变换，所以在这里你看不见他们导入的模型和Mesh。这里不少3D物体都是靠Ray Marching和SDF函数实现的，所以会和大家导入一个3D模型再编写Material和Shader的流程有些不同。

当然在实际应用时，在片元着色器里实现3D效果的方法基本用不到，如果想要为了掌握3D游戏里的Shader编写，大家还是去UE或者Unity里玩吧，干嘛费这个劲。

在知道了以上这些基本知识后，如果你仍对Shadertoy抱有兴趣的话，就可以接着往后看了

环境搭建

Shadertoy依赖的是openGL的图形api，在浏览器中则多半是webGL，在网站中便可以直接使用。点击右上角的新建，就可以制作你自己的Shader了。

那对于一些不想在网页端实验的同学呢，也有很方便的解决方案，就是去vscode里下一个叫做Shader Toy的插件，再下一个对GLSL语言的支持。

不过要注意的是vscode里的Shader Toy和Shadertoy网站上一部分的变量命名会略有不同，大家可以在文档里看一下。

在之后的教程中，我的代码会以vscode当中的Shader Toy作为标准，所以在Shadertoy上是不能直接运行的，要做出一些修改。

在安装好这两个插件后新建一个文件，命名为test1.frag
粘贴以下代码：

void main()
{
	vec2 st = gl_FragCoord.xy/iResolution.xy;
	gl_FragColor = vec4(st.x,st.y,cos(iTime),1.0);
}

保存后右键，选择Shader Toy: Show GLSL Preview

然后你应该就能看到一张会变换颜色的图片了。