Shader 魔法的学习之路 #2 - 笑脸威力加强版

作者:mnikn
2022-05-27
5 1 6

上篇文章中我们画出来了一个笑脸,但是看起来很粗糙,这次我们玩大一点,画一个能够让别人看不出是用代码画出来的笑脸吧!

一张脸简化为脸、眼睛、嘴巴和眉毛,我们就依次去画吧! 本次文章内容可能看上去有点复杂,不懂的同学可以自己模拟一下,调一下参数慢慢思考。

先画脸

首先我们先按照之前的方式设置一下基础的代码:

vec4 face(vec2 uv) {
    vec4 color = vec4(1.0, 0.6, 0.3, 1.0);
    float d = length(uv);
    color.a = smoothstep(0.5, 0.495, d);

    // 边缘渐变
    float gradient = smoothstep(0.45, 0.5, d);
    // 多次相乘让 gradient 能够让颜色从中心到边缘的衰弱感加深, 参考 y=x^2 函数图形
    gradient *= gradient;
    color.rgb = mix(color.rgb, color.rgb * 0.6, gradient);

    return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec4 color = vec4(0.0, 0.0, 0.0, 1.0);
    vec2 uv = fragCoord/iResolution.xy;
    uv -= 0.5;
    // 让画布变为正方形
    uv.x *= iResolution.x / iResolution.y;

    vec4 face_c = face(uv);
    color.rgb = mix(color.rgb, face_c.rgb, face_c.a);

    fragColor = color;
}

代码和之前相似,不过不同点是:

  • 我们添加了 uv.x *= iResolution.x / iResolution.y 让我们整个画布能够标准化成正方形,而上次文章因为没有这步,画布是长方形,所以画出来的是一个椭圆
  • 使用了 mix 函数而不是直接相乘来混色,mix 函数的作用是接受前两个参数,第三个参数作为比例,根据比例返回处于前两个参数之间的值。使用 mix 函数而不是直接相乘的原因,是因为接下来我们要画很多个圆,直接相乘的话会让这些圆之间的颜色相互干扰,而 mix 函数用 alpha 做比例保证之间不会相互影响
  • 我们多添加了脸部边缘的渐变,其中我们处理完后利用 y=x^2 的函数图形让这个值快速上升,从而让边缘颜色衰退不是线性的,衰退感更强


接下来我们逐步添加细节:

float sat(float t) {
    return clamp(t, 0.0, 1.0);
}
float remap01(float a, float b, float t) {
    return sat((t - a) / (b - a));
}
float remap(float a, float b, float c, float d, float t) {
    return remap01(a, b, t) * (d - c) + c;
}
vec4 face(vec2 uv) {
    vec4 color = vec4(1.0, 0.6, 0.3, 1.0);
    float d = length(uv);
    color.a = smoothstep(0.5, 0.495, d);

    // 边缘渐变
    float gradient = smoothstep(0.45, 0.5, d);
    // 多次相乘让 gradient 能够让颜色从中心到边缘的衰弱感加深, 参考 y=x^2 函数图形
    gradient *= gradient;
    color.rgb = mix(color.rgb, color.rgb * 0.6, gradient);

    // 脸部高光
    float highlight = smoothstep(0.45, 0.447, d);
    // 使用 remap 让高光只画在脸的上半部分
    highlight *= remap(0.45, 0.05, 0.8, 0.0, uv.y); 
    color.rgb = mix(color.rgb, vec3(1.0), highlight);

    // 描边
    color.rgb = mix(color.rgb, vec3(0.5, 0.1, 0.1), smoothstep(0.487, 0.495, d));

    // 脸颊
    // 让脸颊能够镜像
    uv.x = abs(uv.x);
    vec2 cheek_uv = uv + vec2(-0.2, 0.2);
    float cheek_d = length(cheek_uv);
    float cheek = smoothstep(0.2, 0.05, cheek_d) * 0.3;
    color.rgb = mix(color.rgb, vec3(0.9, 0.2, 0.1), cheek);


    return color;
}

这里我们添加了几个帮助函数:

  • sat:clamp 的进一步封装,返回值限制在 [0,1],超过或者小于这个范围就限制为 1 或者 0
  • remap01:mix 的相反版本,根据前两个参数的相差比例,把第三个参数固定在 [0,1] 滑动
  • remap:区域映射,前两个参数和后两个参数表示两个不同区域,最好一个参数作为比例,把第一个区域按照比例映射到第二个区域上,所以返回值范围 [c, d],详细说明:https://zhuanlan.zhihu.com/p/158039963

同时我们添加了脸部的上边高光,描边和脸颊,思路和之前类似,一些特殊操作在代码上有相关说明。

画个眼睛

vec2 within(vec2 uv, vec4 rect) {
    return (uv - rect.xy) / (rect.zw - rect.xy);
}
vec4 eye(vec2 uv, float dir) {
    uv -= 0.5;
    uv.x *= dir;

    // 基础的圆
    vec4 color = vec4(1.0);
    float d = length(uv);
    color.a = smoothstep(0.4, 0.39, d);

    vec3 iris_color = vec3(0.2, 0.6, 0.9);

    // 眼眶
    float iris = smoothstep(0.27, 0.4 , d) * 0.7;
    iris *= iris;
    color.rgb = mix(color.rgb, iris_color, iris);

    // 眼眶下左边缘描边
    color.rgb *= 1.0 - smoothstep(0.38, 0.4, d) * sat(-uv.x-uv.y);

    // 眼球描边
    color.rgb = mix(color.rgb, vec3(0.0), smoothstep(0.27, 0.26, d));

    // 眼球
    iris_color *= 1.0 + smoothstep(0.26, 0.05, d);
    color.rgb = mix(color.rgb, iris_color, smoothstep(0.26, 0.24, d));

    // 瞳孔
    color.rgb = mix(color.rgb, vec3(0.0), smoothstep(0.15, 0.14, d));

    // 瞳孔高光
    float highligh1 = smoothstep(0.12, 0.11, length(uv+vec2(-0.2,-0.1)));
    color.rgb = mix(color.rgb, vec3(1.0), highligh1);
    float highlight2 = smoothstep(0.07, 0.06, length(uv+vec2(0.15,0.08)));
    color.rgb = mix(color.rgb, vec3(1.0), highlight2);

    return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // ...之前的代码

    // 画眼球
    vec4 eye_c = eye(within(vec2(abs(uv.x), uv.y), vec4(0.04, -0.12, 0.35, 0.22)), dir);
    color.rgb = mix(color.rgb, eye_c.rgb, eye_c.a);
}

大体的思路和画脸的时候差不多,有一些特殊的是我们添加了一个 within 函数,该函数的作用是把画布限制在对应区域,然后我们就可以在 eye 函数里面认为 uv 整个范围是 [0,1],不用再仔细调坐标。 注意一点是,在调用 within 时,我们先让 uv 做了水平镜像然后再传进函数,而不是在函数里面做镜像,因为 eye 函数里面画布已经被限制区域了,如果在函数里面做镜像,就只会在限制区域内做镜像而不是基于脸的中心做镜像。 同时我们使用了个 sign 函数来获得 uv.x 当前是负数还是正数,然后传进函数改变眼睛绘制方向。因为两只眼睛是做了水平镜像,这样眼睛高光的方向是向着脸中心,而我们想要眼睛高光统一向着右边,所以乘上 uv.x 的方向来修正。

画嘴

vec4 mouth(vec2 uv) {
    uv -= 0.5;
    vec4 color = vec4(0.8, 0.3, 0.2, 1.0);

    // 嘴
    uv.y += uv.x*uv.x;
    float d = length(uv);
    color.a = smoothstep(0.4, 0.39, d);

    // 牙齿
    float td = remap(-0.25, 0.25, 0.0, 1.0, uv.y);
    vec3 teeth_col = vec3(smoothstep(0.5, 0.3, d));
    color.rgb = mix(color.rgb, teeth_col, smoothstep(0.05, 0.02, td));

    // 嘴部渐变
    float mtd = 1.0 - remap(-0.25, 0.3, 0.0, 1.0, uv.y);
    color.rgb *= 1.0 - smoothstep(0.4, 0.0, mtd) * 0.2;

    return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // ...之前的代码

    // 画嘴
    vec4 mouth_c = mouth(within(uv, vec4(-0.3, -0.12, 0.3, -0.45)));
    color.rgb = mix(color.rgb, mouth_c.rgb, mouth_c.a);
}

画眉毛

vec4 brow(vec2 uv) {
    uv -= 0.5;

    // 调整眉毛位置
    uv.y -= uv.x * uv.x - uv.x;
    vec4 color = vec4(0.8, 0.4, 0.2, 1.0) * 0.8;
    float d = length(uv);
    color *= 1.0 + smoothstep(0.38, 0.05, d);
    color.a = smoothstep(0.4, 0.39, d);

    // 描边
    color.rgb *= 1.0 - smoothstep(0.37, 0.4, d) * 0.5;

    return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // ...之前的代码

    // 画眉毛
    vec4 brow_c = brow(within(vec2(abs(uv.x), uv.y), vec4(0.04, 0.33, 0.36, 0.24)));
    color.rgb = mix(color.rgb, brow_c.rgb, brow_c.a);
}

总结

这次文章里面的内容较多,但是所有的画法主要是绘制位置的计算和颜色间的各种混合,大家最好自己调一下代码消化一下。 完整代码在:https://www.shadertoy.com/view/stjfDm

本文为用户投稿,不代表 indienova 观点。

近期点赞的会员

 分享这篇文章

您可能还会对这些文章感兴趣

参与此文章的讨论

  1. profhua 2022-05-27

    要不要标注下来源,BigWing?

  2. sdjdasha 2022-05-27

    大佬好!

    • mnikn 2022-05-27

      @sdjdasha:我只是一个菜鸡

您需要登录或者注册后才能发表评论

登录/注册