共计 2165 个字符，预计需要花费 6 分钟才能阅读完成。
背景与性能挑战
在移动端 3D 应用中，动态光源渲染始终是性能瓶颈。当场景中出现多个点光源时，传统的前向渲染（Forward Rendering）会导致片元着色器的计算量呈指数级增长。尤其在实现光线从点源扩散的效果时，Android 设备的帧率常常会从 60FPS 骤降至 20FPS 以下。
主要性能消耗来自两个方面：
- 光照计算频率：每个受光影响的像素都需要单独计算衰减和高光
- 精度转换开销：移动 GPU 处理全精度浮点数时存在显著性能损耗
光照模型技术对比
| 特性 | Phong 模型 | PBR 模型 |
|---|---|---|
| 计算复杂度 | 低（3- 5 次向量运算） | 高（包含 BRDF 积分计算） |
| 点光源衰减 | 手动控制（1/d²） | 物理正确衰减（1/d²） |
| 高光表现 | 固定镜面反射指数 | 基于粗糙度的动态反射 |
| 移动端适用性 | 推荐 | 需简化版本 |
核心实现原理
1. 光线衰减数学模型
点光源的光照强度遵循平方反比定律：
$$I = \frac{I_0}{d^2}$$
其中 $I_0$ 为光源初始强度，$d$ 为照射距离。实际实现时需要加入最小阈值防止分母过小：
float calculateAttenuation(vec3 lightPos, vec3 fragPos, float radius) {float distance = length(lightPos - fragPos);
return clamp(1.0 - pow(distance/radius, 4.0), 0.0, 1.0) / (distance * distance + 1.0);
}2. 着色器分工优化
顶点着色器 预计算：
– 光源到顶点的方向向量
– 基于距离的衰减系数初值
片元着色器 精确计算：
– 最终光照强度
– 镜面反射高光
完整 GLSL 实现
// WebGL 2.0 GLSL 300 es
struct PointLight {
vec3 position;
vec3 color;
float intensity;
float radius;
};
uniform PointLight uLights[4];
vec3 calculatePointLight(PointLight light, vec3 normal, vec3 fragPos, vec3 viewDir) {
// 距离衰减
vec3 lightDir = normalize(light.position - fragPos);
float distance = length(light.position - fragPos);
float attenuation = 1.0 / (distance * distance);
// 漫反射
float diff = max(dot(normal, lightDir), 0.0);
vec3 diffuse = diff * light.color;
// 镜面反射（Blinn-Phong 优化）vec3 halfwayDir = normalize(lightDir + viewDir);
float spec = pow(max(dot(normal, halfwayDir), 0.0), 32.0);
return (diffuse + spec) * light.color * attenuation * light.intensity;
}Three.js 集成示例
const material = new THREE.ShaderMaterial({
uniforms: {
uLights: {
value: [
{position: new THREE.Vector3(1, 2, 0),
color: new THREE.Vector3(1, 0.8, 0.6),
intensity: 2.0,
radius: 5.0
}
]
}
},
vertexShader: `...`, // 预计算代码
fragmentShader: `...` // 完整光照计算
});性能优化策略
- 距离剔除：在 JavaScript 层预先过滤超出范围的光源
function updateVisibleLights(camera) {
return lights.filter(light => {return camera.position.distanceTo(light.position) < light.radius * 2;
});
}-
精度控制：在片元着色器顶部声明精度
precision mediump float; -
分支优化 ：用 step() 代替 if 语句
// 优于 if(distance < radius) float influence = step(distance, radius);
常见问题解决方案
Android 精度问题：
– 避免在循环中使用高精度计算
– 对 UV 坐标使用 highp 限定符
多光源颜色溢出：
vec3 totalLight = vec3(0.0);
for(int i=0; i<4; i++) {totalLight += calculatePointLight(uLights[i], normal, fragPos, viewDir);
}
totalLight = min(totalLight, vec3(2.0)); // 钳制最大值WebGL 1.0 兼容方案：
– 改用#version 100
– 用 uniform vec3 数组模拟结构体
未来演进方向
WebGPU 提供了更高效的光照计算方式：
– 使用计算管线批量处理光照
– 基于图块的延迟渲染(TBDR)
– 硬件加速的光线求交
通过本文介绍的技术路径，开发者可以构建出移动端 60FPS 流畅运行的点光源扩散效果。实际项目中建议结合场景复杂度，在视觉效果和性能之间找到平衡点。
正文完
