WebGL之shaderToy初使用

　　做图形就要玩shader，我的shader进阶之路，从学习怎么使用shaderToy开始。首先介绍我是看哪篇文章学习的，给出参考文章地址：https://blog.csdn.net/xufeng0991/article/details/78076824，由于本菜鸟是第一次玩shaderToy，就完全根据丿寒灬风丨博主的脚步往前走，一步一步学。

　　第一步，咱来注册一个账号哈。简单方便，有账号了，我的shaderToy账号就是ccentry，截图一张

　　好了，我们已经可以看到，有很多demo可供学习，那么我们就来做一个我们自己的小demo吧。我们新建一个demo，我们看到新建的demo给出了示例代码，如下图

在右侧的editor中我们可以看到，片段着色器的主函数是mainImage，带2个参数 fragColor和fragCoord，其中fragColor是out vec4思维向量，fragCoord是in vec2二维向量，前者代表rgba颜色，后者代表屏幕XY的坐标。我们来看看片段着色器对这两个参数都做了什么事。下面先把代码贴出来。

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = 0.1 + 0.5*cos(iTime+uv.xyx+vec3(,,));

    // Output to screen
    fragColor = vec4(col,1.0);
}

　　我们看到第一句注释//Normalized pixel coordinates (from 0 to 1)，这句是说单位化片段的XY坐标，使片段XY处于0到1区间内，这是怎么做到的呢，他是通过将片段坐标去除以iResolution分辨率的xy，这就很讨巧了，不管你屏幕分辨率怎么变化，都能将你的片段坐标单位化到空间(0, 1)区间内，这样就能统一空间坐标系了不是。

　　接下来的第二件事就和时间轴有关系了我们在第二句代码中一点一点来分析，第二句代码是变色的关键，我们先来看这个0.1，这个我把他理解为环境光，当该值为0.1时，我们来看看显式的效果是怎么样的，如下图所示。

我们可以看到，画布的颜色是偏暗的，接下来就要满足我的好奇心，我们把他改成0.7看看会怎么样，请看修改后的结果如下图所示。

我们看到，画布整个变亮了，这说明就是这个参数调节整个画布的明暗程度，此参数越大，画布越亮，越小越暗。

　　接下来我们看看第二句代码还做了什么事，我们看到0.5*cos()，那么这个0.5所代表的是啥，这里做个实验，我改成0.1试试啥效果，请看下图。

我们再把他改成0.7试试看，效果如下。

我们对比一下发现，这是透明度的参数，越小越透明，越大越不透明。接下去我们看cos()内部的操作。我们在cos()内部是这样写的

iTime*0.3+uv.xyx+vec3(,,)

这里的iTime是帧刷新率，这个数越大，动画速度越快，也就是同样的操作帧速越高。这里*0.3就是减缓速度。uv.xyx是片段的坐标，很多小伙伴问，为啥是xyx不是xxx也不是xyy呢，那么我做了一下实验，这个xyx是横向纵向横向绘制，xyy是横向纵向纵向绘制，xxx是横向横向横向绘制，最后的vec3()是绘制的颜色。不好理解，我就是靠自己不断的改参数实验出来的结论。接下来这个cos我也改成sin，发现也是呈渐变的绘制，所以这个数学函数可以改成任意的三角函数，就是一个时间曲线，类似bezier曲线。控制绘制时间周期的
　　最后我们来看看最后一句代码

// Output to screen
    fragColor = vec4(col,1.0);

很简单，如注释所言，输出绘制的片段到屏幕上。
　　这是我第一次尝试shaderToy，谨以此篇记录第一步，再接再厉，给自己打打气。感谢J.C大佬，继续学习shader。如需引用本文，请注明出处：https://www.cnblogs.com/ccentry/p/10049113.html