第11.3章：着色器优化技术详解

掌握着色器优化技术是提升游戏性能的关键。本教程将深入介绍各种着色器优化策略，帮助你编写高效的GPU代码。

🎯 学习目标

  • 掌握GPU架构和着色器执行原理
  • 学会分析和优化着色器性能瓶颈
  • 了解各种着色器优化技术
  • 掌握移动端特有的优化策略

📋 前置知识

  • 熟悉着色器编程基础
  • 理解GPU渲染管线
  • 了解基本的计算机图形学概念

🔧 GPU架构基础

GPU执行模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// GPU并行执行示例
CCProgram gpu_execution_model %{
    // GPU以Warp/Wavefront为单位执行
    // 通常32个线程同时执行相同指令
    
    void main() {
        // 好的做法：所有线程执行相同代码路径
        vec4 color = texture(mainTexture, v_uv);
        color.rgb *= 2.0;
        
        // 坏的做法：分支导致执行分歧
        if (v_uv.x > 0.5) {
            color.rgb *= 2.0;  // 一半线程执行这里
        } else {
            color.rgb *= 0.5;  // 另一半线程执行这里
        }
        
        fragColor = color;
    }
}%

内存层次结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// GPU内存访问性能对比
interface GPUMemoryHierarchy {
    registers: {
        latency: '0 cycles',
        bandwidth: 'Very High',
        size: 'Very Small',
        usage: '局部变量'
    };
    
    constantMemory: {
        latency: '1-2 cycles (cached)',
        bandwidth: 'High',
        size: 'Medium', 
        usage: 'Uniform变量'
    };
    
    textureMemory: {
        latency: '100-200 cycles',
        bandwidth: 'Medium',
        size: 'Large',
        usage: '纹理采样'
    };
    
    globalMemory: {
        latency: '200-400 cycles',
        bandwidth: 'Low', 
        size: 'Very Large',
        usage: '顶点缓冲、帧缓冲'
    };
}

🧮 计算优化技术

1. 减少复杂数学运算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 数学运算优化对比
CCProgram math_optimization %{
    // 未优化版本
    vec3 slowVersion(vec3 input) {
        float result = pow(input.x, 2.0);           // 昂贵的幂运算
        result += sqrt(input.y);                    // 昂贵的开方运算
        result *= sin(input.z * 3.14159);          // 昂贵的三角函数
        return vec3(result);
    }
    
    // 优化版本
    vec3 fastVersion(vec3 input) {
        float result = input.x * input.x;           // 使用乘法替代平方
        result += pow(input.y, 0.5);               // 或使用查找表
        result *= sinLUT(input.z);                 // 使用预计算的查找表
        return vec3(result);
    }
    
    // 查找表实现
    uniform sampler2D sinLUT;
    float sinLUT(float x) {
        float normalized = x / (2.0 * 3.14159);   // 归一化到[0,1]
        return texture(sinLUT, vec2(normalized, 0.5)).r;
    }
}%

2. 向量化操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 向量化优化
CCProgram vectorization %{
    // 标量操作（慢）
    void scalarVersion() {
        float r = texture(tex, uv).r * color.r;
        float g = texture(tex, uv).g * color.g; 
        float b = texture(tex, uv).b * color.b;
        float a = texture(tex, uv).a * color.a;
        fragColor = vec4(r, g, b, a);
    }
    
    // 向量操作（快）
    void vectorVersion() {
        vec4 texColor = texture(tex, uv);
        fragColor = texColor * color;           // 单个向量操作
    }
    
    // SIMD友好的操作
    void simdFriendly() {
        vec4 a = texture(texA, uv);
        vec4 b = texture(texB, uv);
        vec4 c = texture(texC, uv);
        
        // 多个向量同时计算
        vec4 result = a * b + c;               // Fused Multiply-Add
        fragColor = result;
    }
}%

🖼️ 纹理优化技术

1. 纹理采样优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 纹理采样优化
CCProgram texture_optimization %{
    // 多次重复采样
    void redundantSampling() {
        vec4 color1 = texture(mainTex, uv);
        vec4 color2 = texture(mainTex, uv + offset1);  // 重复采样
        vec4 color3 = texture(mainTex, uv + offset2);
        
        fragColor = (color1 + color2 + color3) / 3.0;
    }
    
    // 减少采样次数
    void optimizedSampling() {
        // 使用双线性插值减少采样
        vec4 color = texture(mainTex, uv);
        vec4 neighbor = texture(mainTex, uv + offset);
        
        fragColor = mix(color, neighbor, blendFactor);
    }
    
    // 合并纹理采样
    void packedTextures() {
        // 将多个单通道纹理打包到一个RGBA纹理中
        vec4 packed = texture(packedTex, uv);
        float roughness = packed.r;
        float metallic = packed.g; 
        float ao = packed.b;
        float height = packed.a;
    }
}%

2. 纹理压缩和格式选择

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 纹理格式优化
class TextureOptimizer {
    public selectOptimalFormat(usage: TextureUsage): TextureFormat {
        switch (usage) {
            case 'albedo':
                return sys.platform === sys.Platform.MOBILE ? 
                    'ETC2_RGB' : 'BC1_RGB';
                    
            case 'normal':
                return sys.platform === sys.Platform.MOBILE ?
                    'ETC2_RG11' : 'BC5_RG';  // 只存储XY，重构Z
                    
            case 'roughnessMetallicAO':
                return 'RGB8';  // 打包存储
                
            case 'heightmap':
                return 'R8';    // 单通道足够
                
            default:
                return 'RGBA8';
        }
    }
    
    public optimizeTextureSize(originalSize: number, usage: TextureUsage): number {
        const maxSizes = {
            'ui': 2048,
            'character': 1024, 
            'environment': 512,
            'effects': 256
        };
        
        return Math.min(originalSize, maxSizes[usage] || 512);
    }
}

3. Mipmap优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Mipmap优化技术
CCProgram mipmap_optimization %{
    // 手动Mipmap级别选择
    float calculateMipmapLevel(vec2 uv, vec2 textureSize) {
        vec2 dx = dFdx(uv * textureSize);
        vec2 dy = dFdy(uv * textureSize);
        float maxDelta = max(dot(dx, dx), dot(dy, dy));
        return 0.5 * log2(maxDelta);
    }
    
    // 优化的纹理采样
    vec4 optimizedTextureSample(sampler2D tex, vec2 uv) {
        float level = calculateMipmapLevel(uv, textureSize);
        return textureLod(tex, uv, level);
    }
    
    // 各向异性过滤优化
    vec4 anisotropicSample(sampler2D tex, vec2 uv) {
        // 计算各向异性比率
        vec2 dx = dFdx(uv * textureSize);
        vec2 dy = dFdy(uv * textureSize);
        
        float maxAniso = max(length(dx), length(dy));
        float minAniso = min(length(dx), length(dy));
        float ratio = maxAniso / minAniso;
        
        // 限制各向异性级别以提高性能
        ratio = min(ratio, 4.0);
        
        return texture(tex, uv);  // GPU自动处理各向异性
    }
}%

🔀 分支优化技术

1. 避免动态分支

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 分支优化对比
CCProgram branch_optimization %{
    // 动态分支（GPU执行效率低）
    vec3 dynamicBranch(vec3 color, float condition) {
        if (condition > 0.5) {
            return color * 2.0;      // 分支A
        } else {
            return color * 0.5;      // 分支B
        }
    }
    
    // 使用step函数消除分支
    vec3 eliminateBranch(vec3 color, float condition) {
        float factor = mix(0.5, 2.0, step(0.5, condition));
        return color * factor;
    }
    
    // 使用lerp消除分支
    vec3 lerpBranch(vec3 color, float condition) {
        vec3 resultA = color * 2.0;
        vec3 resultB = color * 0.5;
        return mix(resultB, resultA, step(0.5, condition));
    }
}%

2. 静态分支优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 静态分支和宏定义
CCProgram static_branches %{
    // 使用宏定义创建静态分支
    #if defined(ENABLE_NORMAL_MAPPING)
        vec3 calculateNormal() {
            vec3 normal = texture(normalTexture, v_uv).xyz * 2.0 - 1.0;
            return normalize(normal);
        }
    #else
        vec3 calculateNormal() {
            return normalize(v_worldNormal);
        }
    #endif
    
    // 特性级别静态分支
    #if FEATURE_LEVEL >= 3
        // 高端设备：完整PBR
        vec3 pbrLighting() {
            return calculateFullPBR();
        }
    #elif FEATURE_LEVEL >= 2  
        // 中端设备：简化PBR
        vec3 pbrLighting() {
            return calculateSimplifiedPBR();
        }
    #else
        // 低端设备：Blinn-Phong
        vec3 pbrLighting() {
            return calculateBlinnPhong();
        }
    #endif
}%

3. 分支预测优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 动态着色器变体管理
class ShaderVariantManager {
    private variants: Map<string, Shader> = new Map();
    
    public getOptimalShader(context: RenderContext): Shader {
        const key = this.generateVariantKey(context);
        
        if (!this.variants.has(key)) {
            this.variants.set(key, this.compileVariant(context));
        }
        
        return this.variants.get(key)!;
    }
    
    private generateVariantKey(context: RenderContext): string {
        const features = [];
        
        if (context.hasNormalMap) features.push('NORMAL_MAP');
        if (context.lightCount > 4) features.push('MANY_LIGHTS');
        if (context.enableShadows) features.push('SHADOWS');
        if (context.enableSSAO) features.push('SSAO');
        
        return features.join('|');
    }
    
    private compileVariant(context: RenderContext): Shader {
        const defines = this.generateDefines(context);
        return this.shaderCompiler.compile(this.baseShader, defines);
    }
}

📊 内存带宽优化

1. 减少内存访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 内存访问优化
CCProgram memory_optimization %{
    // 重复的内存访问
    void redundantAccess() {
        vec3 normal = normalize(v_worldNormal);
        vec3 lightDir = normalize(lightPosition - v_worldPos);
        vec3 viewDir = normalize(cameraPosition - v_worldPos);
        
        // v_worldPos被多次访问
        float dist1 = distance(lightPosition, v_worldPos);
        float dist2 = distance(cameraPosition, v_worldPos);
    }
    
    // 缓存频繁访问的值
    void cachedAccess() {
        vec3 worldPos = v_worldPos;  // 缓存到寄存器
        vec3 normal = normalize(v_worldNormal);
        
        vec3 lightDir = lightPosition - worldPos;
        vec3 viewDir = cameraPosition - worldPos;
        
        float lightDist = length(lightDir);
        float viewDist = length(viewDir);
        
        lightDir /= lightDist;  // 复用长度计算结果
        viewDir /= viewDist;
    }
}%

2. 数据打包技术

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 数据打包优化
CCProgram data_packing %{
    // 未打包的数据
    struct UnpackedData {
        float roughness;    // 4 bytes
        float metallic;     // 4 bytes  
        float ao;          // 4 bytes
        float height;      // 4 bytes
        // 总计: 16 bytes
    };
    
    // 打包的数据
    struct PackedData {
        vec4 packed;       // 4 bytes
        // R: roughness, G: metallic, B: ao, A: height
    };
    
    // 法线向量打包
    vec2 packNormal(vec3 normal) {
        // 球面坐标打包，节省一个分量
        return normal.xy / (normal.z + 1.0);
    }
    
    vec3 unpackNormal(vec2 packed) {
        vec2 f = packed;
        float f2 = dot(f, f);
        float g = sqrt(1.0 - f2 / 4.0);
        return vec3(f * g, 1.0 - f2 / 2.0);
    }
    
    // 颜色打包到更少位数
    uint packColor(vec3 color) {
        uvec3 c = uvec3(color * 255.0);
        return (c.r << 16) | (c.g << 8) | c.b;  // RGB888
    }
}%

🎯 LOD和可见性优化

1. 着色器LOD系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 着色器LOD实现
CCProgram shader_lod %{
    uniform float distanceToCamera;
    uniform float lodBias;
    
    // 计算LOD级别
    float calculateShaderLOD() {
        float distance = distanceToCamera;
        float lod = log2(distance) + lodBias;
        return clamp(lod, 0.0, 3.0);
    }
    
    // 基于LOD的着色器选择
    vec3 calculateLighting() {
        float lod = calculateShaderLOD();
        
        if (lod < 1.0) {
            // LOD 0: 完整PBR光照
            return calculateFullPBR();
        } else if (lod < 2.0) {
            // LOD 1: 简化PBR
            return calculateSimplifiedPBR();
        } else if (lod < 3.0) {
            // LOD 2: Blinn-Phong
            return calculateBlinnPhong();
        } else {
            // LOD 3: 环境光只
            return calculateAmbientOnly();
        }
    }
}%

2. 动态质量调节

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 自适应质量系统
@ccclass('AdaptiveQualityManager')
export class AdaptiveQualityManager extends Component {
    @property
    targetFrameTime: number = 16.67; // 60 FPS
    
    @property
    qualityLevel: number = 2; // 0-3
    
    private frameTimeHistory: number[] = [];
    
    public update() {
        this.updateFrameTimeHistory();
        this.adjustQuality();
    }
    
    private adjustQuality() {
        const avgFrameTime = this.getAverageFrameTime();
        
        if (avgFrameTime > this.targetFrameTime * 1.2) {
            // 性能不足，降低质量
            this.qualityLevel = Math.max(0, this.qualityLevel - 1);
            this.applyQualitySettings();
        } else if (avgFrameTime < this.targetFrameTime * 0.8) {
            // 性能充足，提高质量
            this.qualityLevel = Math.min(3, this.qualityLevel + 1);
            this.applyQualitySettings();
        }
    }
    
    private applyQualitySettings() {
        const settings = this.getQualitySettings(this.qualityLevel);
        
        // 应用着色器LOD
        rendering.setGlobalMacro('SHADER_LOD', this.qualityLevel);
        
        // 调整光源数量
        rendering.setGlobalInt('MAX_LIGHTS', settings.maxLights);
        
        // 调整阴影质量
        rendering.setGlobalFloat('SHADOW_DISTANCE', settings.shadowDistance);
    }
}

🔍 性能分析工具

1. GPU性能分析器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// GPU性能分析器
class GPUProfiler {
    private queries: Map<string, WebGLQuery> = new Map();
    private results: Map<string, number> = new Map();
    
    public beginProfile(name: string) {
        const gl = this.device.gl;
        const query = gl.createQuery();
        gl.beginQuery(gl.TIME_ELAPSED_EXT, query);
        this.queries.set(name, query);
    }
    
    public endProfile(name: string) {
        const gl = this.device.gl;
        gl.endQuery(gl.TIME_ELAPSED_EXT);
    }
    
    public getProfileResult(name: string): number {
        const query = this.queries.get(name);
        if (!query) return 0;
        
        const gl = this.device.gl;
        const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
        
        if (available) {
            const time = gl.getQueryParameter(query, gl.QUERY_RESULT);
            this.results.set(name, time / 1000000); // 转换为毫秒
            return this.results.get(name)!;
        }
        
        return this.results.get(name) || 0;
    }
    
    public generateReport(): PerformanceReport {
        const report = {
            totalGPUTime: 0,
            passes: [] as PassProfile[]
        };
        
        for (const [name, time] of this.results) {
            report.passes.push({ name, time });
            report.totalGPUTime += time;
        }
        
        return report;
    }
}

2. 着色器复杂度分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 着色器复杂度分析器
class ShaderComplexityAnalyzer {
    public analyzeShader(shaderSource: string): ComplexityReport {
        const report = {
            instructionCount: 0,
            textureReads: 0,
            mathOperations: 0,
            branches: 0,
            loops: 0,
            complexity: 'Low' as 'Low' | 'Medium' | 'High'
        };
        
        // 分析纹理采样
        const textureRegex = /texture\w*\s*\(/g;
        report.textureReads = (shaderSource.match(textureRegex) || []).length;
        
        // 分析数学运算
        const mathRegex = /(sin|cos|tan|pow|sqrt|exp|log)\s*\(/g;
        report.mathOperations = (shaderSource.match(mathRegex) || []).length;
        
        // 分析分支
        const branchRegex = /\b(if|switch)\b/g;
        report.branches = (shaderSource.match(branchRegex) || []).length;
        
        // 分析循环
        const loopRegex = /\b(for|while|do)\b/g;
        report.loops = (shaderSource.match(loopRegex) || []).length;
        
        // 计算总体复杂度
        const score = report.textureReads * 2 + 
                     report.mathOperations * 3 + 
                     report.branches * 5 + 
                     report.loops * 10;
        
        if (score < 20) report.complexity = 'Low';
        else if (score < 50) report.complexity = 'Medium';
        else report.complexity = 'High';
        
        return report;
    }
}

🎮 实际优化案例

案例1：水面着色器优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 优化前：复杂水面着色器
CCProgram water_unoptimized %{
    void main() {
        // 多次重复的纹理采样
        vec4 normal1 = texture(normalTex, v_uv + time * 0.1);
        vec4 normal2 = texture(normalTex, v_uv * 2.0 + time * 0.15);
        vec4 normal3 = texture(normalTex, v_uv * 0.5 + time * 0.05);
        
        // 复杂的数学运算
        vec3 finalNormal = normalize(normal1.xyz + normal2.xyz + normal3.xyz);
        
        // 多次三角函数调用
        float wave1 = sin(v_uv.x * 10.0 + time);
        float wave2 = cos(v_uv.y * 8.0 + time * 1.2);
        float wave3 = sin(length(v_uv) * 15.0 + time * 0.8);
        
        float height = (wave1 + wave2 + wave3) / 3.0;
        
        fragColor = vec4(finalNormal, height);
    }
}%

// 优化后：高效水面着色器
CCProgram water_optimized %{
    uniform sampler2D waveDataLUT;  // 预计算的波浪数据
    
    void main() {
        // 减少纹理采样，使用单次采样获取多个数据
        vec4 waveData = texture(waveDataLUT, v_uv + time * 0.1);
        
        // 从预计算数据中提取信息
        vec3 normal = waveData.xyz * 2.0 - 1.0;
        float height = waveData.w;
        
        // 简化的波浪计算
        vec2 offset = v_uv * 10.0 + time;
        float wave = texture(waveDataLUT, offset * 0.1).r;
        
        height += wave * 0.1;
        
        fragColor = vec4(normal, height);
    }
}%

案例2：角色着色器优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 优化前：复杂角色着色器
CCProgram character_unoptimized %{
    void main() {
        // 多个纹理采样
        vec4 albedo = texture(albedoTex, v_uv);
        vec4 normal = texture(normalTex, v_uv);
        vec4 roughness = texture(roughnessTex, v_uv);
        vec4 metallic = texture(metallicTex, v_uv);
        vec4 ao = texture(aoTex, v_uv);
        
        // 复杂的光照计算
        vec3 lighting = calculateComplexPBR(albedo.rgb, normal.xyz, 
                                          roughness.r, metallic.r, ao.r);
        
        fragColor = vec4(lighting, albedo.a);
    }
}%

// 优化后：高效角色着色器
CCProgram character_optimized %{
    void main() {
        // 打包纹理减少采样
        vec4 albedo = texture(albedoTex, v_uv);
        vec4 normalRoughness = texture(normalRoughnessTex, v_uv);
        vec4 metallicAO = texture(metallicAOTex, v_uv);
        
        // 解包数据
        vec3 normal = normalRoughness.xyz * 2.0 - 1.0;
        float roughness = normalRoughness.w;
        float metallic = metallicAO.r;
        float ao = metallicAO.g;
        
        // 简化的光照计算
        vec3 lighting = calculateSimplifiedPBR(albedo.rgb, normal, 
                                             roughness, metallic, ao);
        
        fragColor = vec4(lighting, albedo.a);
    }
}%

📊 性能监控面板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 着色器性能监控组件
@ccclass('ShaderPerformanceMonitor')
export class ShaderPerformanceMonitor extends Component {
    @property(Label)
    statsLabel: Label = null!;
    
    private profiler: GPUProfiler = new GPUProfiler();
    private analyzer: ShaderComplexityAnalyzer = new ShaderComplexityAnalyzer();
    
    public update() {
        this.updatePerformanceStats();
    }
    
    private updatePerformanceStats() {
        const report = this.profiler.generateReport();
        const stats = this.gatherRenderingStats();
        
        const displayText = `
GPU时间: ${report.totalGPUTime.toFixed(2)}ms
Draw Calls: ${stats.drawCalls}
着色器切换: ${stats.shaderSwitches}
纹理绑定: ${stats.textureBinds}
复杂着色器: ${stats.complexShaders}
        `.trim();
        
        this.statsLabel.string = displayText;
    }
    
    private gatherRenderingStats(): RenderingStats {
        return {
            drawCalls: rendering.getDrawCallCount(),
            shaderSwitches: rendering.getShaderSwitchCount(),
            textureBinds: rendering.getTextureBindCount(),
            complexShaders: this.countComplexShaders()
        };
    }
    
    private countComplexShaders(): number {
        let count = 0;
        const activeShaders = rendering.getActiveShaders();
        
        for (const shader of activeShaders) {
            const complexity = this.analyzer.analyzeShader(shader.source);
            if (complexity.complexity === 'High') {
                count++;
            }
        }
        
        return count;
    }
}

🎯 最佳实践总结

1. 开发阶段优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// 着色器开发最佳实践
class ShaderBestPractices {
    // 1. 着色器模板系统
    public createOptimizedShaderTemplate(): ShaderTemplate {
        return {
            // 使用宏控制特性
            defines: [
                'USE_NORMAL_MAP',
                'USE_ROUGHNESS_MAP',
                'LIGHT_COUNT 4'
            ],
            
            // 优化的顶点着色器
            vertex: `
                // 减少varying变量
                out vec3 v_worldPosAndDepth;  // 打包位置和深度
                out vec2 v_uv;
                out vec3 v_normal;
                
                void main() {
                    vec4 worldPos = cc_matWorld * vec4(a_position, 1.0);
                    v_worldPosAndDepth = vec3(worldPos.xy, worldPos.z);
                    v_uv = a_texCoord;
                    v_normal = normalize(cc_matWorldIT * a_normal);
                    
                    gl_Position = cc_matViewProj * worldPos;
                }
            `,
            
            // 优化的片段着色器
            fragment: `
                void main() {
                    // 早期深度测试优化
                    if (earlyDepthTest()) discard;
                    
                    // 减少纹理采样
                    vec4 albedoRoughness = texture(albedoRoughnessTex, v_uv);
                    vec4 normalMetallic = texture(normalMetallicTex, v_uv);
                    
            // 简化光照计算
            vec3 lighting = calculateOptimizedLighting(
                        albedoRoughness.rgb,
                        normalMetallic.xyz,
                        albedoRoughness.a,
                        normalMetallic.a
                    );
                    
                    fragColor = vec4(lighting, 1.0);
                }
            `
        };
    }
    
    // 2. 性能预算管理
    public managePerformanceBudget(): PerformanceBudget {
        return {
            maxInstructions: {
                vertex: 100,
                fragment: 200
            },
            maxTextureReads: 8,
            maxMathOperations: 20,
            maxBranches: 2
        };
    }
}

2. 运行时优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// 运行时着色器优化管理器
@ccclass('RuntimeShaderOptimizer')
export class RuntimeShaderOptimizer extends Component {
    @property
    enableDynamicOptimization: boolean = true;
    
    @property
    performanceThreshold: number = 16.67; // 60 FPS
    
    private currentOptimizationLevel: number = 2;
    private frameTimeHistory: number[] = [];
    
    public update() {
        if (this.enableDynamicOptimization) {
            this.monitorPerformance();
            this.adjustOptimizationLevel();
        }
    }
    
    private monitorPerformance() {
        const frameTime = game.deltaTime * 1000;
        this.frameTimeHistory.push(frameTime);
        
        if (this.frameTimeHistory.length > 60) {
            this.frameTimeHistory.shift();
        }
    }
    
    private adjustOptimizationLevel() {
        const avgFrameTime = this.getAverageFrameTime();
        
        if (avgFrameTime > this.performanceThreshold * 1.2) {
            // 性能不足，提高优化级别
            this.currentOptimizationLevel = Math.min(3, this.currentOptimizationLevel + 1);
            this.applyOptimizations();
        } else if (avgFrameTime < this.performanceThreshold * 0.8) {
            // 性能充足，降低优化级别以提高质量
            this.currentOptimizationLevel = Math.max(0, this.currentOptimizationLevel - 1);
            this.applyOptimizations();
        }
    }
    
    private applyOptimizations() {
        const settings = this.getOptimizationSettings(this.currentOptimizationLevel);
        
        // 应用着色器优化设置
        rendering.setGlobalMacro('OPTIMIZATION_LEVEL', this.currentOptimizationLevel);
        rendering.setGlobalInt('MAX_TEXTURE_SAMPLES', settings.maxTextureSamples);
        rendering.setGlobalFloat('LOD_BIAS', settings.lodBias);
        
        console.log(`应用优化级别: ${this.currentOptimizationLevel}`);
    }
    
    private getOptimizationSettings(level: number): OptimizationSettings {
        const settings = [
            { maxTextureSamples: 16, lodBias: 0.0 },    // 最高质量
            { maxTextureSamples: 12, lodBias: 0.5 },    // 高质量
            { maxTextureSamples: 8, lodBias: 1.0 },     // 中等质量
            { maxTextureSamples: 4, lodBias: 1.5 }      // 低质量
        ];
        
        return settings[level] || settings[2];
    }
}

📝 本章小结

通过本教程，你应该掌握了：

  1. GPU架构理解: 了解GPU的执行模型和内存层次
  2. 计算优化: 掌握数学运算和向量化优化技术
  3. 内存优化: 学会减少内存访问和数据打包
  4. LOD优化: 理解着色器级别的细节控制
  5. 性能分析: 掌握性能监控和分析工具的使用

🚀 下一步学习

继续学习移动端特有的优化策略！🎮✨