一个笑脸

原创于 2021-04-23 11:28:26 发布 · 366 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

shadertoy 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Shadertoy中的`smoothstep`函数创建圆的抗锯齿效果，通过调整透明度通道实现图层融合，展示了如何通过`mix`操作控制不同圆层的叠加。代码实例详细演示了颜色渐变和透明度控制在实时图形处理中的应用。

没什么可说的，很简单通过拼凑出一个笑脸。

通过smoothstep抗锯齿，在圆的边界a值有一个平滑的过渡，而不是0-1的尖锐变化；

控制vec4 fragColor.a来表现透明通道，圆的区域和其他区域唯一的区别就是a值不同；

通过mix来实现图层融合，第二个参数为上层的图层，原理是mix(a,b,t)的返回值是 a(1-t)+bt , 在此处t=a , 将导致b图层有图像的地方（圆的绘制区域a为1）将会覆盖a图层中该范围的颜色信息；

vec4 Circle(vec2 uv,float radius,vec2 orign,float blur,vec3 color)
{
    float d = length( uv - orign );
    float c = smoothstep( radius,radius - blur,d );
    vec4 fragcolor = vec4(color,c);
    return fragcolor;
    
}


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

    vec4 layer1 = Circle(uv , 0.25 , vec2(0,0) , 0.01 , vec3(1.,1.,0.));
    vec4 layer2 = Circle(uv , 0.2 , vec2(0.,-0.001) , 0.01, vec3(0.,0.,0.));
    vec4 layer3 = Circle(uv , 0.22 , vec2(0,0.03) , 0.01 , vec3(1.,1.,0.));
    vec4 layer4 = Circle(uv , 0.05 , vec2(0.1,0.1) , 0.01, vec3(0.,0.,0.));
    vec4 layer5 = Circle(uv , 0.05 , vec2(-0.1,0.1) , 0.01, vec3(0.,0.,0.));
    
    
    fragColor = mix(fragColor,layer1,layer1.a);
    fragColor = mix(fragColor,layer2,layer2.a);
    fragColor = mix(fragColor,layer3,layer3.a);
    fragColor = mix(fragColor,layer4,layer4.a);
    fragColor = mix(fragColor,layer5,layer5.a);
    
}

链接在此： https://www.shadertoy.com/view/fssGWj