ShaderToy(一)入门

ShaderToy

ShaderToy基于C++语言，通过着色器在窗口渲染图像。我在openGL中接触过一些，教程视频

选择右上角“新建”，网页默认输出一幅颜色随时间而改变的图像。

uv = fragCoord/iResolution.xy ;

其中fragCoord为当前片元着色器处理的候选片元窗口相对坐标信息，iResolution是窗口分辨率，uv为像素点在窗口的归一化位置，阈值为：[0,1]

修改代码如下：

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

    float d = length(uv);

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

 函数length(uv)返回向量uv的模长，故越靠近左下角uv坐标系原点，rgb值越接近0，颜色越深。

我们可以通过调整uv来改变原点左边，为每个值减去0.5，使原点移动到屏幕中央：

uv -= 0.5;

 我们可以通过添加if条件语句来控制窗口显示我们想要的图案，通过添加语句绘制圆形：

if (d < 0.3) c = 1.0 ; else c = 0.0;

 由于x轴与y轴代表的实际像素点个数不同，所以我们做出来的图像为椭圆。

修改x轴单位长度代表像素点个数与y轴相同：uv坐标系x可代表范围将增大：

uv.x *= iResolution.x / iResolution.y;

得到标准圆形：

 圆内部为纯白色，外部为纯黑色，颜色转变较大，边缘锯齿效应较为明显，我们可以使用平滑阶梯函数smoothstep(T1,T2,x)来缓解锯齿效应。

c = smoothstep(r, r-0.05, d);   // r is the radius

 整体代码如下：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv -= .5;
    uv.x *= iResolution.x/iResolution.y;
    
    // Time varying pixel color
    //vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
    float d = length(uv);
    float r = 0.3;
    float c = 0.0;
    
    c = smoothstep(r, r-0.05, d);
    //if (d < r) c = 1.0;
    //else c = 0.0;
    
    // Output to screen
    fragColor = vec4(vec3(c),1.0);
}