shaderToy初学笔记（一）（​转载自最简单的ShaderToy入门 - 笑脸渲染_亨利王的博客-CSDN博客_shadertoy）

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    uv-=.5;
    float d = length(uv);
    float c = d;
       
   if(d<0.3) c=1.0; else c = 0.0;
 fragColor = vec4(vec3(c), 1.0);
uv.x *= iResolution.x/iResolution.y;
 
}

1.注意出现黑白干预时的代码顺序问题,代码如上

2.椭圆变圆居中显示

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    
     uv-=.5;//决定椭圆居中显示
    
   uv.x *= iResolution.x/iResolution.y;//椭圆变圆，放在居中显示的下面
    float d = length(uv);
    float c = d;
       
   if(d<0.3) c=1.0; else c = 0.0;
 fragColor = vec4(vec3(c), 1.0);

 
}

3.加入边缘平滑处理

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    
     uv-=.5;//决定椭圆居中显示
    
   uv.x *= iResolution.x/iResolution.y;//椭圆变圆，放在居中显示的下面
   
    float d = length(uv);
    float c = d;
    float r = .3;


c = smoothstep(r, r-0.02, d);//边缘平滑处理
 fragColor = vec4(vec3(c), 1.0);


 
}

继续生成笑脸

float Circle(vec2 uv, vec2 p, float r, float blur) {
    float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

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

vec2 p = vec2(.2, -.1);
float c = Circle(uv, p, .4, .05);//这行有没有不影响效果，因为这是第一个圆，被第二个覆盖

 c = Circle(uv, vec2(-.5, .2), .1, .01);

fragColor = vec4(vec3(c), 1.0);
}

c += Circle(uv, vec2(-.5, .2), .1, .01);

 接着加眼睛

float Circle(vec2 uv, vec2 p, float r, float blur) {
    float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

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

float c = Circle(uv, vec2(0.), .4, .05);
c -= Circle(uv, vec2(-.13, .2), .07, .01);
c -= Circle(uv, vec2(.13, .2), .07, .01);

fragColor = vec4(vec3(c), 1.0);
}

加颜色

float Circle(vec2 uv, vec2 p, float r, float blur) {
    float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

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

float c = Circle(uv, vec2(0.), .4, .05);
c -= Circle(uv, vec2(-.13, .2), .07, .01);
c -= Circle(uv, vec2(.13, .2), .07, .01);
float mask = Circle(uv, vec2(0.), .4, .05);

//fragColor = vec4(vec3(c), 1.0);


mask -= Circle(uv, vec2(-.13, .2), .07, .01);
mask -= Circle(uv, vec2(.13, .2), .07, .01);

vec3 col = vec3(1., 1., 0.) * mask;
fragColor = vec4(col, 1.0);//加颜色
}

加嘴巴

float Circle(vec2 uv, vec2 p, float r, float blur) {
    float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

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

float c = Circle(uv, vec2(0.), .4, .05);
c -= Circle(uv, vec2(-.13, .2), .07, .01);
c -= Circle(uv, vec2(.13, .2), .07, .01);
float mask = Circle(uv, vec2(0.), .4, .05);

//fragColor = vec4(vec3(c), 1.0);


mask -= Circle(uv, vec2(-.13, .2), .07, .01);
mask -= Circle(uv, vec2(.13, .2), .07, .01);
float mouth = Circle(uv, vec2(0.), .3, .02);

mouth -= Circle(uv, vec2(0.,0.1), .3, .02);
mask-=mouth;
vec3 col1 = vec3(1., 1., 0.) * mask;


fragColor = vec4(col1, 1.0);//加颜色


}

优化代码，通过UV来实现

float Circle(vec2 uv, vec2 p, float r, float blur) {
	float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

float Smiley(vec2 uv, vec2 p, float size) {
    uv -= p;
    uv /= size;
    
    float mask = Circle(uv, vec2(0.), .4, .05); 
    mask -= Circle(uv, vec2(-.13, .2), .07, .01);
    mask -= Circle(uv, vec2(.13, .2), .07, .01);
    
    float mouth = Circle(uv, vec2(0., 0.), .3, .02);
    mouth -= Circle(uv, vec2(0., .1), .3, .02);
    
    mask -= mouth;

    return mask;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv -=0.5;
    uv.x *= iResolution.x / iResolution.y;
    
    vec3 col = vec3(0.);
    float mask = Smiley(uv, vec2(0.02), .5);
    col = vec3(1., 1., 0.)*mask;
    
    fragColor = vec4(col,1.0);
}

 动起来

float Circle(vec2 uv, vec2 p, float r, float blur) {
	float d = length(uv-p);
    float c = smoothstep(r, r-blur, d);
    
    return c;
}

float Smiley(vec2 uv, vec2 p, float size) {
    uv -= p;
    uv /= size;
    
    float mask = Circle(uv, vec2(0.), .4, .05);
    
    mask -= Circle(uv, vec2(-.13, .2), .07, .01);
    mask -= Circle(uv, vec2(.13, .2), .07, .01);
    
    float mouth = Circle(uv, vec2(0., 0.), .3, .02);
    mouth -= Circle(uv, vec2(0., .1), .3, .02);
    mouth = clamp(mouth, 0., 1. );//加一句让眼睛变圆
    mask -= mouth;

    return mask;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
	
    uv -=0.5;
    uv.x *= iResolution.x / iResolution.y;
    
    vec3 col = vec3(0.);
    
    float t = iTime;
    vec2 p = vec2(sin(t)*.7, cos(t)*0.3);
    
    float mask = Smiley(uv, p, .3);
    
    
    col = vec3(1., 1., 0.)*mask;
    
    fragColor = vec4(col,1.0);
}

 转载自

最简单的ShaderToy入门 - 笑脸渲染_亨利王的博客-CSDN博客_shadertoy

平滑阶梯函数：

Shader实验室: smoothstep函数 - 知乎