ShaderToy(2)——ShaderToy基础入门

void mainImage()函数简介

什么是void mainImage()函数？
void mainImage( out vec4 fragColor, in vec2 fragCoord )是Shader的入口，也就是ShaderToy的程序入口。
在了解这个函数之前我们需要明确vecn这个类型是什么，在GLSL语言中规定了一些方便GPU帮我们计算的一些变量类型，vec即vector(向量)，后面的n表示这是一个n维向量。
在了解了向量这个类型之后我们需要明确，在ShaderToy上我们编写的是片段着色器，片段着色器会对我们的每一个像素点运行一次，所以我们的void mainImage(out vec4 fragColor, in vec2 fragCoord ) 这个函数会对我们每个像素点都运行一次，in表示这个变量是片段着色器的输入（输入像素点的向量x,y），out表示这个变量是这个片段着色器的输出（片段着色器的输出在屏幕上，vec4代表当前像素点的颜色RGBA(A是透明度)），所以fragColor是当前像素点的输出颜色，fragCoord是当前像素点坐标。

iResolution

什么是iResolution呢？
iResolution是当前画布的大小。这个量对我们有什么用呢。我们可以使用这个量对坐标进行标准化。在OpenGL中，输入的坐标必须介于-1~1之间，但是ShaderToy中的输入的fragCoord是对应画布的大小的，也就是说输入的fragCoord.x是从0 ~ iResolution.x, fragCoord.y是从0 ~ iResolution.y的，这对我们使用会造成很大的麻烦，比如在画布中间我们画出了一个正方形，但是如果我们改变iResolution的大小，会发现我们的正方形会随着画布的变化而偏离的画布中央。
我们可以用fragCoord/iResolution来使我们的坐标变换为0 ~ 1 ； 我们可以给这个值乘2将其变换到0 ~ 2这个区间，然后减去1将其变换到-1~1。
即： vec2 uv = (2.*fragCoord - iResolution.xy) / iResolution.y; /*由于没有float到int的隐式转换所以浮点数的计算所以2必须写为2.
这样我们就可以将坐标中心固定在画布中间。

画一个简单的正方形

不使用坐标变换
我们在vscode中新建文件后缀名为.glsl，写完代码后按下ctrl+shift+p 输入shader Toy show GLSL Preview 可以看到我们画出的图形。

void mainImage(out vec4 fragColor,in vec2 fragCoord){
    vec3 col=vec3(0.2,0.4,0.3);
    if(fragCoord.x>400.&&fragCoord.x<800.&&fragCoord.y>400.&&fragCoord.y<800.)
        fragColor=vec4(col,1.0);
}

使用坐标变换

void mainImage(out vec4 fragColor,in vec2 fragCoord){
    vec2 uv = (2.*fragCoord -  iResolution.xy) / iResolution.y; 
    vec3 col=vec3(0.2,0.4,0.3);
    if(uv.x>-.5&&uv.x<.5&&uv.y>-.5&&uv.y<.5)
        fragColor=vec4(col,1.0);
}

在上述两个运行结果中看起来是相同的，其实我们在拉动画布时会发现区别。

我们使这个正方形的颜色与它的坐标相关

void mainImage(out vec4 fragColor,in vec2 fragCoord){
    vec2 uv = (2.*fragCoord -  iResolution.xy) / iResolution.y; 
    vec3 col=vec3(0.5647, 0.6, 0.5294);
    if(uv.x>-.5&&uv.x<.5&&uv.y>-.5&&uv.y<.5)
        fragColor=vec4(uv,.2,1.0);//使用uv的xy作为颜色的RG
    else
        fragColor=vec4(col,1.);
}