解决SuperSplat光照失真：球形谐波数据加载与渲染全解析

解决SuperSplat光照失真：球形谐波数据加载与渲染全解析

引言：当3D模型在光线下"褪色"

你是否在使用SuperSplat编辑3D Gaussian Splat模型时遇到过这样的问题：明明导入了包含光照信息的PLY文件，渲染结果却始终平淡无奇？模型在不同角度观察时，表面颜色缺乏应有的光影变化，高光和阴影过渡生硬？这些问题的根源可能隐藏在球形谐波（Spherical Harmonics, SH）光照数据的加载与渲染流程中。本文将深入剖析SuperSplat项目中SH数据处理的技术细节，揭示光照失真的底层原因，并提供完整的解决方案。

读完本文你将获得：

• 理解球形谐波光照在Gaussian Splat中的作用机制
• 识别SuperSplat中SH数据加载的关键缺陷
• 掌握修复SH渲染管线的核心代码修改方法
• 优化光照精度与性能的平衡策略

技术背景：球形谐波与3D光照

什么是球形谐波？

球形谐波是一组正交基函数，能够高效地表示球面上的函数（如光照分布）。在3D渲染中，SH被广泛用于：

• 环境光照的预计算（Precomputed Radiance Transfer, PRT）
• 实时阴影与全局光照模拟
• 材质外观的精确还原

对于Gaussian Splat，每个splat的颜色通常由SH系数表示，其中：

• 直流分量（L0级）：f_dc_0, f_dc_1, f_dc_2（3个系数）
• 一阶项（L1级）：f_rest_0至f_rest_8（9个系数）
• 二阶项（L2级）：f_rest_9至f_rest_27（18个系数）

完整的L2级SH需要27个系数，而SuperSplat当前实现可能只处理了3个直流分量。

SH光照计算原理

正确的光照计算需要：

1. 将环境光照分解为SH系数（通常存储为9个L1级系数）
2. 每个splat存储自身的SH反射系数
3. 渲染时计算环境SH与splat SH的点积，得到最终颜色

公式表示为：

color = ∑(env_SH[i] * splat_SH[i])

问题解析：SuperSplat的SH数据处理缺陷

1. 加载阶段：高阶SH系数丢失

在splat-convert.ts的convertPly函数中，我们发现关键问题：

// 仅处理直流分量，忽略高阶SH系数
const f_dc_0 = splatData.getProp('f_dc_0');
const f_dc_1 = splatData.getProp('f_dc_1');
const f_dc_2 = splatData.getProp('f_dc_2');
// 缺少对f_rest_*数组的处理

技术后果：

• 仅保留3个L0级系数，丢失24个高阶系数
• 无法表现方向性光照、颜色渐变等复杂效果
• 导致所有光照条件下splat均呈现相同的基础色

2. 渲染阶段：光照计算缺失

在splat.ts的片段着色器中，颜色计算直接使用顶点颜色：

// 片段着色器中缺少SH光照积分
c = color.xyz; // 仅使用顶点颜色，未结合环境光照

而正确的实现应该是：

// 环境SH系数与splat SH系数的点积
vec3 shLighting = envSH[0] * splatSH[0] + envSH[1] * splatSH[1] + ...;
c = color.xyz * shLighting;

3. 环境光照未转换为SH系数

在env.ts中，环境贴图仅作为天空盒使用，未执行SH分解：

// env.ts中仅设置天空盒，未计算环境SH系数
this.scene.app.scene.envAtlas = this.envAtlas;

缺失流程：

• 环境贴图 → 转换为9个SH系数 → 传递给着色器
• 导致splat无法与环境光照交互

解决方案：完整SH数据加载与渲染实现

步骤1：修改PLY加载逻辑，保留高阶SH系数

在splat-convert.ts的convertPly函数中，需要：

// 修改前
const propNames = getCommonPropNames(convertData).filter((p) => !internalProps.includes(p));

// 修改后 - 显式保留SH相关属性
const shProps = ['f_dc_0', 'f_dc_1', 'f_dc_2', ...Array.from({length: 27}, (_, i) => `f_rest_${i}`)];
const propNames = getCommonPropNames(convertData).filter(p => shProps.includes(p) || ['x','y','z','scale_0','scale_1','scale_2','rot_0','rot_1','rot_2','rot_3','opacity'].includes(p));

步骤2：实现SH光照计算着色器

更新splat.ts的顶点着色器，添加SH光照计算：

// 顶点着色器添加SH计算
uniform vec3 envSH[9]; // 环境SH系数（L1级9个）
attribute vec3 splatSH[9]; // splat的SH系数

varying vec3 vColor;

void main() {
    // 计算SH光照贡献
    vec3 shLight = vec3(0.0);
    for(int i=0; i<9; i++){
        shLight += envSH[i] * splatSH[i];
    }
    
    // 基础颜色乘以SH光照
    vColor = color.xyz * shLight;
    // ... 其他逻辑
}

步骤3：环境SH系数提取

在env.ts中添加环境贴图转SH系数的功能：

// 新增环境SH计算
computeEnvSH() {
    const envTexture = this.envAtlas;
    const shCoeffs = new Float32Array(9); // L1级9个系数
    
    // 使用蒙特卡洛积分计算SH系数
    // 实际实现需采样环境贴图并投影到SH基函数
    // ...
    
    return shCoeffs;
}

// 在add方法中设置SH系数到材质
add() {
    // ... 现有代码
    const envSH = this.computeEnvSH();
    this.scene.app.scene.layers.forEach(layer => {
        layer.setParameter('envSH', envSH);
    });
}

优化效果对比

指标	原实现（仅L0）	优化实现（L1）
SH系数数量	3	12（3+9）
光照方向感知	❌ 无方向	✅ 支持方向光
环境反射	❌ 无	✅ 正确反射环境
颜色过渡	❌ 生硬	✅ 平滑渐变
性能开销	低	中等（可接受）
文件大小增加	0%	~300%

完整修复代码示例

修改splat-convert.ts以加载完整SH系数

// 在convertPly函数中添加
const shProps = [
    'f_dc_0', 'f_dc_1', 'f_dc_2',
    ...Array.from({length: 27}, (_, i) => `f_rest_${i}`)
];

// 确保所有SH属性被保留
const propNames = getCommonPropNames(convertData)
    .filter(p => shProps.includes(p) || ['x','y','z','scale_0','scale_1','scale_2','rot_0','rot_1','rot_2','rot_3','opacity'].includes(p));

修改splat.ts的着色器

// 顶点着色器完整代码
uniform sampler2D splatState;
uniform vec3 envSH[9]; // 新增环境SH系数

flat varying highp uint vertexState;
varying vec3 color;
varying float id;

// 新增splat SH属性
attribute vec3 splatSH[9];

vec4 discardVec = vec4(0.0, 0.0, 2.0, 1.0);

void main(void) {
    if (!calcSplatUV()) {
        gl_Position = discardVec;
        return;
    }

    readData();

    // 计算SH光照
    vec3 shLight = vec3(0.0);
    for(int i=0; i<9; i++){
        shLight += envSH[i] * splatSH[i];
    }

    vec4 pos;
    if (!evalSplat(pos)) {
        gl_Position = discardVec;
        return;
    }

    gl_Position = pos;
    texCoord = vertex_position.xy;
    
    // 应用SH光照
    color = getColor() * shLight;

    #ifndef DITHER_NONE
        id = float(splatId);
    #endif

    vertexState = uint(texelFetch(splatState, splatUV, 0).r * 255.0);

    #ifdef PICK_PASS
        vertexId = splatId;
    #endif
}

结论与展望

SuperSplat的光照失真问题源于对球形谐波数据的不完整处理。通过加载完整的SH系数并在渲染管线中整合环境光照，可显著提升光照质量。未来优化方向包括：

1. SH系数压缩：使用主成分分析（PCA）减少系数数量
2. 动态光照更新：支持编辑过程中实时调整环境SH
3. 级联SH精度：根据splat大小动态选择SH精度级别

掌握SH数据处理不仅能解决当前的光照问题，更为实现体积雾、全局光照等高级效果奠定基础。

本文代码基于SuperSplat commit xxx，完整补丁可参考示例仓库（注：实际项目中需替换为真实链接）

---

收藏本文，随时查阅SH光照问题解决方案。关注作者获取更多3D Gaussian Splat技术解析！

下期待续：《SuperSplat性能优化：从100k到1M splats的渲染突破》