实现动态卡通笑脸的着色器实现

大家好！我是 [数擎 AI]，一位热爱探索新技术的前端开发者，在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！
开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、ThreeJs、WebGL、Go
经验经验：6 年+ 前端开发经验，专注于图形渲染和 AI 技术
开源项目：智简未来、晓智元宇宙、数字孪生引擎 、源码地址

演示地址：https://shader.shuqin.cc/lscczl
源码地址：https://github.com/dezhizhang/shadertoy

效果概述

本文通过使用 Three.js 实现的动态卡通笑脸着色器，解析其核心实现原理。该效果具有以下特性：

• 😃 基础笑脸轮廓
• 👀 眨动的眼睛（带动态偏移）
• 👄 周期性开合的嘴巴
• 🍎 动态变化的红晕脸颊
• ⏱️ 基于时间的动画效果

核心实现原理

1. 坐标系处理

vec2 uv = vUv;
uv -= 0.5;                // 坐标系中心移到画布中心
uv.x *= iResolution.x/iResolution.y; // 保持宽高比

通过坐标变换实现：

• 中心点(0,0)对应屏幕中心
• 消除屏幕宽高比变形

2. 基础图形函数

float rect(vec2 uv, vec2 pos, float width, float height) {return (step(pos.x-width, uv.x) - step(pos.x+width, uv.x)) *(step(pos.y-height, uv.y) - step(pos.y+height, uv.y));
}

利用 step 函数实现：

• 横向范围：pos.x±width
• 纵向范围：pos.y±height

圆形绘制函数

float Circle(vec2 uv, vec2 pos, float rad, float blur) {float d = length(uv-pos);return smoothstep(rad, rad-blur, d);
}

特点：

• 支持边缘模糊效果
• 半径控制精度达 0.01

2. 动态元素实现

眼睛动画

float v = abs(clamp(sin(iTime), 0.0, 0.07));
Mask = mix(Mask, black, Circle(uv, vec2(0.05 + v, 0.07), 0.03, 0.01));

• sin(iTime)产生周期性运动
• clamp 限制移动范围在[0,0.07]
• 通过位置偏移实现眨眼效果

嘴巴动画

float w = abs(clamp(sin(iTime*3.0), 0.0, 0.03));
Mask = mix(Mask, vec3(3.0), rect(uv, vec2(0.00, 0.13-w), 0.15, 0.03));

• 3 倍速动画（iTime*3.0）

• 垂直方向位置偏移实现嘴巴开合

Mask = mix(Mask, red, Circle(uv, vec2(0.05+v, -0.05), 0.04, 0.01));

• 与眼睛动画联动的位置偏移

• 圆形叠加实现渐变效果

4. 颜色混合策略

使用 mix 函数层级叠加：

Mask = mix(baseColor, overlayColor, alpha);

混合顺序：

• 黄色基础轮廓

• 眼睛黑点

• 嘴巴线条

• 脸颊红晕

5. 完整代码

import * as THREE from 'three';class ShaderEffect {constructor() {this.renderer = new THREE.WebGLRenderer({ antialias: true });this.renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(this.renderer.domElement);this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);this.scene = new THREE.Scene();this.uniforms = {iTime: { value: 0 },iResolution: { value: new THREE.Vector2() },};this.init();this.animate();window.addEventListener('resize', () => this.onResize());}init() {const geometry = new THREE.PlaneGeometry(2, 2);const material = new THREE.ShaderMaterial({uniforms: this.uniforms,vertexShader: `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelMatrix * viewMatrix * vec4(position, 1.0);}`,fragmentShader: `uniform vec2 iResolution;uniform float iTime;varying vec2 vUv;float rect(vec2 uv, vec2 pos, float width, float height) {float square = (step(pos.x - width, uv.x) - step(pos.x + width, uv.x)) *(step(pos.y - height, uv.y) - step(pos.y + height, uv.y));return square;}float Circle(vec2 uv, vec2 pos, float rad, float blur) {float d = length(uv - pos);float t = smoothstep(rad, rad - blur, d);return t;}void main() {vec3 red = vec3(0.8, 0.0, 0.0);vec3 white = vec3(1.0);vec3 yellow = vec3(0.9, 0.9, 0.3);vec3 blue = vec3(0.5, 0.8, 0.9);vec3 black = vec3(0.0);vec3 green = vec3(0.0, 1.0, 0.0);vec2 uv = vUv;uv -= 0.5;uv.x *= iResolution.x / iResolution.y;vec3 Mask = mix(black, vec3(3.0, 3.0, 0.0), Circle(uv, vec2(0.0, 0.01), 0.2, 0.01));Mask = mix(Mask, vec3(3.0, 3.0, 0.0), Circle(uv, vec2(-0.13, 0.15), 0.07, 0.01));Mask = mix(Mask, vec3(3.0, 3.0, 0.0), Circle(uv, vec2(0.13, 0.15), 0.07, 0.01));float v = abs(clamp(sin(iTime), 0.0, 0.07));Mask = mix(Mask, black, Circle(uv, vec2(0.05 + v, 0.07), 0.03, 0.01));Mask = mix(Mask, black, Circle(uv, vec2(-0.10 + v, 0.07), 0.03, 0.01));float w = abs(clamp(sin(iTime * 3.0), 0.0, 0.03));Mask = mix(Mask, vec3(3.0, 3.0, 0.0), rect(uv, vec2(0.00, 0.13 - w), 0.15, 0.03));Mask = mix(Mask, black, rect(uv, vec2(-0.02 + v, -0.05), 0.03, 0.010));vec3 Mouth = mix(black, vec3(-10.0), rect(uv, vec2(-0.02 + v, -0.05), 0.08, 0.015));Mask = mix(Mouth, blue, Mask);Mask = mix(Mask, red, Circle(uv, vec2(0.05 + v, -0.05), 0.04, 0.01));Mask = mix(Mask, red, Circle(uv, vec2(-0.09 + v, -0.05), 0.04, 0.01));gl_FragColor = vec4(Mask, 1.0);}`,});this.mesh = new THREE.Mesh(geometry, material);this.scene.add(this.mesh);this.onResize();}animate() {requestAnimationFrame(() => this.animate());this.uniforms.iTime.value = performance.now() / 1000;this.renderer.render(this.scene, this.camera);}onResize() {const width = window.innerWidth;const height = window.innerHeight;this.renderer.setSize(width, height);this.uniforms.iResolution.value.set(width, height);}
}new ShaderEffect();