ShaderToy简明教程

引言

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.

简介以及坐标操作

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
vec2 uv = fragCoord / iResolution.xy;

fragColor = vec4(uv, 1., 1);
}
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函数

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分形绘制