ShaderToy简明教程

Posted on In Views:

引言

Shadertoy.com is an online community and tool for creating and sharing shaders through WebGL, used for both learning and teaching 3D computer graphics in a web browser.

简介以及坐标操作

1
2
3
4
5
6
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord / iResolution.xy;
  
    fragColor = vec4(uv, 1., 1);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.xx;
  
    float c = 0.;
    float r = 0.3;
  
    if(length(uv) < r)
    {
        c = 1;
    }
  
    fragColor = vec4(vec3(c), 1);
}

坐标系统绘制与fwidh函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
vec3 NumberPlane(vec2 uv)
{
    vec3 color = vec3(0.);

    vec2 cell = fract(uv);
    if(cell.x < fwidth(uv.x))
    {
        color = vec3(1.);
    }
    if(cell.y < fwidth(uv.y))
    {
        color = vec3(1.);
    }

    if(abs(uv.y) < fwidth(uv.y))
    {
        color = vec3(1., 0., 0.);
    }
    if(abs(uv.x) < fwidth(uv.x))
    {
        color = vec3(0., 1., 0.);
    }

    return color;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = (2. * fragCoord - iResolution.xy) / min(iResolution.x, iResolution.y);
  

    fragColor = vec4(NumberPlane(uv), 1.);
}

线段绘制、clamp与mix函数

smoothstep函数

函数绘制的优化、mod与超采样

2D符号距离函数

Ray Marching

3D摄像机设置

矩阵的SDF函数

多物体与阴影

软阴影的实现原理

多物体着色与棋盘贴图

布尔运算

Smooth Minimum

环境光遮蔽

贴图

2D分形绘制