3个实战项目教你彻底搞懂头发的画法与性能优化

配置环境就卡半天，是不是你的常态？明明照着文档抄，头发（Hair）渲染模块就是跑不起来，报错信息看得人头皮发麻。在几个实战项目里，我见过太多开发者把时间浪费在环境配置上，而不是研究核心算法。今天咱们不聊虚的，直接拆解WebGL中头发渲染的核心源码，看看那些大厂是怎么解决毛发蓬松、光影真实以及性能瓶颈的。

入口定位：从Canvas到GPU的像素之旅

很多初学者以为画头发就是画一堆线条，其实不然。在现代WebGL或WebGPU架构中，头发的本质是几何体。我们的入口不在JS业务层，而在渲染管线的初始化阶段。

打开主流图形库（如Three.js或自研引擎）的源码，找到 HairRenderer 或 ParticleSystem 类。你会发现，所有的头发丝（Strands）最终都被打包成顶点缓冲（Vertex Buffer）。

这里有一个关键的认知误区：不要试图用Canvas 2D逐帧绘制每一根头发。在移动端或低端PC上，这会直接导致掉帧。正确的路径是：

CPU端：生成头发的骨架（Spline）和控制点。
传输端：将控制点数据通过 Float32Array 传递给GPU。
GPU端：在Vertex Shader中实时计算每一根头发的曲线形状。

这就是为什么配置环境时，如果缺少WebGL2支持或某些扩展（如 EXT_color_buffer_float），你的头发渲染器会直接罢工。这就是“配置卡半天”的根源之一——硬件驱动与浏览器兼容性。

核心片段：Vertex Shader中的曲线魔法

让我们深入源码，看看头发丝是如何在GPU上“长”出来的。以下是一个简化的 hairVertexShader.glsl 核心片段，这是大多数高性能头发渲染系统的基石。

// 输入属性：每根头发的控制点（Start, Mid, End）
attribute vec3 aStart;
attribute vec3 aMid;
attribute vec3 aEnd;
// 输入属性：0.0到1.0，表示顶点在头发丝上的位置
attribute float aT;
// 输入属性：头发丝的唯一ID，用于查找随机数或特定属性
attribute float aId;// 输出：传递给片元着色器的位置
varying vec3 vWorldPos;
varying vec3 vNormal;
varying float vT;// 核心算法：二次贝塞尔曲线计算
vec3 computeHairPosition(vec3 start, vec3 mid, vec3 end, float t) {// 二次贝塞尔公式: B(t) = (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2// 这种曲线比直线更有弹性，能模拟头发的自然弯曲vec3 p0 = start;vec3 p1 = mid * 2.0; // 控制点放大，增加弯曲力度vec3 p2 = end;float oneMinusT = 1.0 - t;return (oneMinusT * oneMinusT * p0) + (2.0 * oneMinusT * t * p1) + (t * t * p2);
}void main() {// 1. 获取当前顶点在头发丝上的位置vT = aT;// 2. 计算世界坐标// 注意：这里没有使用模型矩阵，因为头发是独立生成的vec3 hairPos = computeHairPosition(aStart, aMid, aEnd, aT);// 3. 添加风场扰动（进阶技巧）// 使用全局时间 uniform 和 ID 产生相位差，避免所有头发同步摆动float time = uTime;float phase = aId * 6.28318;float windStrength = 0.05 * aT; // 发梢摆动幅度更大hairPos.x += sin(time * 2.0 + phase) * windStrength;hairPos.z += cos(time * 1.5 + phase) * windStrength;vWorldPos = hairPos;// 4. 简化法线计算// 在真实引擎中，这里会计算切线并构建坐标系vNormal = normalize(cross(dFdx(vWorldPos), dFdy(vWorldPos)));gl_Position = projectionMatrix * viewMatrix * vec4(hairPos, 1.0);
}

逐行解析与设计思想：

属性分离：aStart, aMid, aEnd 将复杂的几何结构简化为三个点。这是空间换时间的典型应用，CPU只需更新这三个点，GPU处理成千上万次插值。
贝塞尔曲线：为什么用二次而不是线性？因为头发有惯性。线性连接显得僵硬，二次曲线通过控制点 aMid 模拟了头发的物理弹性。
风场扰动的相位差：aId * 6.28318 是关键。如果所有头发使用相同的正弦波，它们会像僵尸一样整齐划一地摆动。引入ID作为相位偏移，制造出自然的“乱序”美感。
发梢放大：windStrength = 0.05 * aT。物理上，固定点（头皮）不动，自由端（发梢）动得最厉害。这个简单的乘法让动画瞬间真实感倍增。

手写简化版：用Three.js实现基础头发渲染

理解了原理，我们动手写一个最小可行产品（MVP）。这段代码基于Three.js，你可以直接复制到浏览器控制台运行。

import * as THREE from 'three';class SimpleHairSystem {constructor(scene) {this.scene = scene;this.hairCount = 1000; // 1000根头发丝this.verticesPerStrand = 10; // 每根头发10个顶点// 1. 创建几何体this.geometry = new THREE.BufferGeometry();this.positions = new Float32Array(this.hairCount * this.verticesPerStrand * 3);this.ids = new Float32Array(this.hairCount * this.verticesPerStrand);this.tValues = new Float32Array(this.hairCount * this.verticesPerStrand);// 2. 生成头发数据（随机分布在头部区域）this.generateHairData();// 3. 设置属性this.geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3));this.geometry.setAttribute('aId', new THREE.BufferAttribute(this.ids, 1));this.geometry.setAttribute('aT', new THREE.BufferAttribute(this.tValues, 1));// 4. 创建材质与网格// 注意：这里使用PointsMaterial简化，实际项目应用ShaderMaterialthis.material = new THREE.PointsMaterial({color: 0x2c1b0e, // 深棕色size: 0.02,transparent: true,opacity: 0.8});this.mesh = new THREE.Points(this.geometry, this.material);this.scene.add(this.mesh);this.clock = new THREE.Clock();}generateHairData() {let idx = 0;for (let i = 0; i < this.hairCount; i++) {// 随机生成头顶位置const theta = Math.random() * Math.PI * 2;const radius = Math.random() * 0.5;const startX = Math.cos(theta) * radius;const startY = 0.5 + Math.random() * 0.2; // 头顶高度const startZ = Math.sin(theta) * radius;// 随机生成末端位置（模拟垂落）const endX = startX + (Math.random() - 0.5) * 0.5;const endY = -0.5 - Math.random() * 0.3;const endZ = startZ + (Math.random() - 0.5) * 0.5;// 中间控制点const midX = (startX + endX) / 2 + (Math.random() - 0.5) * 0.2;const midY = (startY + endY) / 2 + (Math.random() - 0.5) * 0.2;const midZ = (startZ + endZ) / 2 + (Math.random() - 0.5) * 0.2;for (let j = 0; j < this.verticesPerStrand; j++) {const t = j / (this.verticesPerStrand - 1);// 简化计算：这里直接在CPU做插值，为了演示方便// 实际项目中应放入Shaderconst x = (1-t)*(1-t)*startX + 2*(1-t)*t*midX + t*t*endX;const y = (1-t)*(1-t)*startY + 2*(1-t)*t*midY + t*t*endY;const z = (1-t)*(1-t)*startZ + 2*(1-t)*t*midZ + t*t*endZ;this.positions[idx * 3] = x;this.positions[idx * 3 + 1] = y;this.positions[idx * 3 + 2] = z;this.ids[idx] = i;this.tValues[idx] = t;idx++;}}}animate() {const time = this.clock.getElapsedTime();// 实际项目中，此处应触发GPU更新或仅更新Uniformthis.mesh.rotation.y = Math.sin(time * 0.5) * 0.1;}
}// 使用示例
// const hair = new SimpleHairSystem(scene);
// 在渲染循环中调用 hair.animate();

代码要点解析：

数据布局：positions 数组的内存布局是 [Hair0_V0, Hair0_V1... Hair1_V0...]。这种连续内存布局有利于CPU缓存命中。
CPU vs GPU权衡：上面的示例为了简洁，在CPU端做了插值。在真正的实战项目中，如果头发数量超过1万根，CPU插值会成为瓶颈。必须将 computeHairPosition 逻辑移至Vertex Shader，CPU只负责更新 aStart/aMid/aEnd 这三个基础点。
透明度排序：头发是半透明的，且相互穿插。Three.js默认按对象排序，但点云内部无法自动排序。这在渲染时会导致视觉瑕疵（Z-Fighting或透明错误）。高级方案是使用排序点云或双层渲染（先画背景头发，再画前景头发）。

进阶技巧与避坑：性能与真实感的平衡

在真实的实战项目中，头发渲染往往是性能杀手。以下是几个经过验证的优化策略和避坑指南。

1. 实例化渲染（Instancing）

不要为每根头发创建单独的Mesh。使用 THREE.InstancedBufferGeometry。

原理：一次Draw Call绘制成千上万根头发。
实现：将 aStart, aMid, aEnd 作为实例属性（Instance Attributes），而不是普通顶点属性。
收益：Draw Call从 N 降为 1，CPU开销降低90%以上。

2. 视锥体剔除与层级细节（LOD）

远距离：当用户拉远视角时，头发细节不再重要。可以切换到更少的顶点数（如从10个点降到3个点），甚至使用Billboard（面片）代替真实几何体。
近距离：只有头部在视锥体中心且距离较近时，才启用完整的风场和物理模拟。

3. 光照模型的选择

Anisotropic Lighting（各向异性光照）：头发具有方向性，光线沿着头发丝方向反射最强。标准的Phong或Blinn-Phong模型无法表现这种丝状光泽。
推荐模型：使用 Kajiya-Kay 或 Reitsma 模型。
MDN Web Docs 参考：虽然MDN主要涵盖Web标准，但在讨论WebGL光照时，可以参考其关于 WebGLRenderingContext 和着色器规范的文档，确保你的GLSL版本与浏览器兼容。对于具体光照公式，建议查阅《Real-Time Rendering》一书或相关图形学论文，因为MDN侧重于API接口而非艺术算法。

4. 避坑指南

坑1：Z-Fighting。头发丝非常细，深度缓冲区精度不足时会出现闪烁。解法：启用 depthWrite: false 并手动排序，或使用 alphaTest 丢弃透明像素。
坑2：移动端性能。iOS Safari对WebGL2的支持有限。解法：检测 WEBGL_lose_context 和 EXT_color_buffer_half_float，若不支持则降级为静态贴图头发。
坑3：内存泄漏。频繁创建/销毁 BufferAttribute。解法：预分配最大容量的Buffer，通过 setDrawRange 控制实际渲染数量，复用内存。