第11.4章：移动端着色器优化专题

移动设备有着独特的硬件限制和特性。本教程将专门讲解移动端着色器优化的关键技术和最佳实践。

🎯 学习目标

了解移动GPU的架构特点和限制
掌握移动端特有的优化技�?- 学会针对不同移动平台进行优化
理解功耗和性能的平衡策�?

📋 前置知识

已完成前面的着色器优化章节
了解移动设备硬件基础
熟悉移动游戏开�?

📱 移动GPU架构特点

移动GPU vs 桌面GPU

移动GPU采用Tile-Based Deferred Rendering (TBDR)架构，与桌面GPU有显著差异：

统一内存架构: CPU和GPU共享内存
*功耗限�?: 严格的热设计功�?TDP)限制
带宽限制: 内存带宽相对较低
精度优化: 支持多种精度级别以节省功�?

TBDR渲染优化

// TBDR优化着色器
CCProgram tbdr_optimized %{
    precision mediump float;  // 默认使用中等精度
    precision highp vec3;     // 世界坐标需要高精度
    
    in mediump vec2 v_uv;
    in mediump vec3 v_normal;
    in highp vec3 v_worldPos;
    
    uniform mediump sampler2D mainTexture;
    uniform mediump vec4 mainColor;
    
    void main() {
        // 早期Alpha测试
        mediump vec4 baseColor = texture(mainTexture, v_uv);
        if (baseColor.a < 0.1) {
            discard;  // 早期剔除，节省后续计�?        }
        
        // 简化光照计�?        mediump vec3 normal = normalize(v_normal);
        mediump float lighting = max(0.0, dot(normal, vec3(0.0, 1.0, 0.0)));
        
        gl_FragColor = baseColor * mainColor * lighting;
    }
}%

�?移动端优化技�?

1. 精度优化

// 精度优化示例
CCProgram precision_optimization %{
    // 合理的精度使�?    precision mediump float;
    precision highp vec3;  // 只有位置坐标需要高精度
    
    uniform mediump vec4 color;        // 颜色用中精度足够
    uniform mediump sampler2D texture; // 纹理采样用中精度
    
    // 精度范围�?    // lowp:    [-2, 2],     精度 1/256
    // mediump: [-65504, 65504], 精度 1/1024  
    // highp:   [-1e38, 1e38],   精度 1/1048576
    
    void main() {
        highp vec3 worldPos = v_worldPosition;  // 世界坐标高精�?        mediump vec2 uv = v_texCoord;           // UV中精�?        mediump vec4 texColor = texture2D(texture, uv);
        
        gl_FragColor = texColor * color;
    }
}%

2. 带宽优化

// 移动端带宽优�?CCProgram bandwidth_optimization %{
    precision mediump float;
    
    // 减少varying变量数量，打包数�?    in mediump vec4 v_data;  
    // v_data.xy = uv
    // v_data.z = lightIntensity
    // v_data.w = fog
    
    uniform mediump sampler2D mainTexture;
    
    void main() {
        mediump vec2 uv = v_data.xy;
        mediump float lightIntensity = v_data.z;
        mediump float fog = v_data.w;
        
        // 减少纹理采样次数
        mediump vec4 color = texture2D(mainTexture, uv);
        
        // 简化计�?        color.rgb *= lightIntensity;
        color.rgb = mix(color.rgb, vec3(0.5), fog);
        
        gl_FragColor = color;
    }
}%

3. 功耗优�?

// 动态性能调节系统
@ccclass('MobilePowerManager')
export class MobilePowerManager extends Component {
    @property
    targetFPS: number = 30; // 移动端目标帧�?    
    private currentPowerLevel: 'low' | 'medium' | 'high' = 'medium';
    
    public update() {
        this.adjustPowerLevel();
        this.applyPowerSettings();
    }
    
    private adjustPowerLevel() {
        const frameTime = game.deltaTime * 1000;
        
        if (frameTime > (1000 / this.targetFPS) * 1.5) {
            this.currentPowerLevel = 'low';
        } else if (frameTime < (1000 / this.targetFPS) * 0.8) {
            this.currentPowerLevel = 'high';
        } else {
            this.currentPowerLevel = 'medium';
        }
    }
    
    private applyPowerSettings() {
        switch (this.currentPowerLevel) {
            case 'low':
                // 降低着色器质量
                rendering.setGlobalMacro('MOBILE_LOW_POWER', 1);
                // 减少光源数量
                rendering.setGlobalInt('MAX_LIGHTS', 2);
                // 降低目标帧率
                game.frameRate = 20;
                break;
        }
    }
}

📊 性能监控

移动端性能监控

// 移动设备性能监控
@ccclass('MobileProfiler')
export class MobileProfiler extends Component {
    @property(Label)
    statsLabel: Label = null!;
    
    private thermalState: string = 'normal';
    private batteryLevel: number = 1.0;
    
    public update() {
        this.updateStats();
        this.updateDisplay();
    }
    
    private updateDisplay() {
        const fps = Math.round(1000 / (game.deltaTime * 1000));
        const drawCalls = rendering.getDrawCallCount();
        
        const statsText = `
FPS: ${fps}
Draw Calls: ${drawCalls}  
热状�? ${this.thermalState}
电池: ${Math.round(this.batteryLevel * 100)}%
        `.trim();
        
        this.statsLabel.string = statsText;
    }
}

🎮 游戏特定优化

UI着色器优化

// UI专用优化着色器
CCProgram ui_optimized %{
    precision mediump float;
    
    in mediump vec2 v_uv;
    in mediump vec4 v_color;
    
    uniform mediump sampler2D texture;
    
    void main() {
        mediump vec4 texColor = texture2D(texture, v_uv);
        // UI通常不需要复杂光照，简单颜色调制即�?        gl_FragColor = texColor * v_color;
    }
}%

📝 最佳实践总结

移动端着色器编写原则

// 移动端着色器最佳实�?CCProgram mobile_best_practices %{
    // 1. 总是声明精度
    precision mediump float;
    precision highp vec3;  // 只在必要时使用高精度
    
    // 2. 减少varying变量
    in mediump vec4 v_data;  // 打包数据
    
    // 3. 避免复杂数学运算
    void main() {
        // �?使用内置函数
        mediump float fade = smoothstep(0.0, 1.0, distance);
        
        // �?避免复杂的pow/exp运算
        
        // �?使用查找�?        mediump float noise = texture2D(noiseLUT, uv).r;
    }
}%