上篇文章中我们画出来了一个笑脸，但是看起来很粗糙，这次我们玩大一点，画一个能够让别人看不出是用代码画出来的笑脸吧！
一张脸简化为脸、眼睛、嘴巴和眉毛，我们就依次去画吧！
本次文章内容可能看上去有点复杂，不懂的同学可以自己模拟一下，调一下参数慢慢思考。
先画脸
首先我们先按照之前的方式设置一下基础的代码：
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] 滑动
同时我们添加了脸部的上边高光，描边和脸颊，思路和之前类似，一些特殊操作在代码上有相关说明。
画个眼睛
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); }
总结
这次文章里面的内容较多，但是所有的画法主要是绘制位置的计算和颜色间的各种混合，大家最好自己调一下代码消化一下。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。