HarmonyOS游戏开发：GPU调优与硬件加速

核心要点

• GPU渲染管线：理解GPU工作原理，优化渲染流程提高吞吐量
• 硬件加速配置：正确启用和配置GPU硬件加速，发挥硬件性能
• 着色器优化：优化Shader代码，减少GPU计算开销
• 纹理管理：合理管理纹理资源，降低显存占用和带宽消耗

一、背景与动机

在HarmonyOS游戏开发中，GPU是图形渲染的核心硬件。高效的GPU调优能够显著提升游戏帧率、降低功耗、改善用户体验。随着游戏画面复杂度的提升，GPU性能优化变得愈发重要。

1.1 GPU渲染管线概述

flowchart TB
    subgraph GPUPipeline["GPU渲染管线"]
        A["顶点着色器<br/>Vertex Shader"] --> B["图元装配<br/>Primitive Assembly"]
        B --> C["几何着色器<br/>Geometry Shader"]
        C --> D["光栅化<br/>Rasterization"]
        D --> E["片段着色器<br/>Fragment Shader"]
        E --> F["深度/模板测试<br/>Depth/Stencil Test"]
        F --> G["混合<br/>Blending"]
        G --> H["帧缓冲<br/>Frame Buffer"]
    end
    
    classDef stageStyle fill:#667eea,stroke:#5a67d8,color:#fff,stroke-width:2px
    class A,B,C,D,E,F,G,H stageStyle

1.2 硬件加速的价值

flowchart LR
    subgraph CPU["CPU渲染"]
        C1["软件计算"] --> C2["逐像素处理"]
        C2 --> C3["串行执行"]
    end
    
    subgraph GPU["GPU渲染"]
        G1["硬件加速"] --> G2["并行计算"]
        G2 --> G3["批量处理"]
    end
    
    CPU -->|"性能提升<br/>10-100倍"| GPU
    
    classDef cpuStyle fill:#ff6b6b,stroke:#c92a2a,color:#fff,stroke-width:2px
    classDef gpuStyle fill:#48bb78,stroke:#38a169,color:#fff,stroke-width:2px
    
    class C1,C2,C3 cpuStyle
    class G1,G2,G3 gpuStyle

二、核心原理

2.1 硬件加速机制

HarmonyOS通过GPU硬件加速将图形渲染任务从CPU转移到GPU，利用GPU的并行计算能力大幅提升渲染效率。

// GPU硬件加速配置管理
class GPUAccelerationManager {
  private isHardwareAccelerated: boolean = false
  private gpuInfo: GPUInfo | null = null
  
  // 初始化GPU加速
  async initialize(): Promise<void> {
    try {
      // 检测GPU能力
      this.gpuInfo = await this.detectGPUCapabilities()
      
      // 根据设备能力决定是否启用硬件加速
      this.isHardwareAccelerated = this.shouldEnableAcceleration()
      
      if (this.isHardwareAccelerated) {
        await this.configureAcceleration()
        console.info('GPU硬件加速已启用')
      } else {
        console.warn('GPU硬件加速不可用，使用软件渲染')
      }
    } catch (error) {
      console.error('GPU初始化失败:', error)
      this.isHardwareAccelerated = false
    }
  }
  
  // 检测GPU能力
  private async detectGPUCapabilities(): Promise<GPUInfo> {
    // 获取设备GPU信息
    const deviceInfo = await this.getDeviceInfo()
    
    return {
      vendor: deviceInfo.gpuVendor,
      renderer: deviceInfo.gpuRenderer,
      maxTextureSize: deviceInfo.maxTextureSize,
      maxTextureUnits: deviceInfo.maxTextureUnits,
      supportsFloatTextures: deviceInfo.extensions.includes('OES_texture_float'),
      supportsCompressedTextures: this.checkCompressedTextureSupport(deviceInfo),
      estimatedPerformance: this.estimateGPUPerformance(deviceInfo)
    }
  }
  
  // 判断是否应启用硬件加速
  private shouldEnableAcceleration(): boolean {
    if (!this.gpuInfo) return false
    
    // 低端设备可能禁用硬件加速以避免兼容性问题
    if (this.gpuInfo.estimatedPerformance < PerformanceLevel.Low) {
      return false
    }
    
    return true
  }
  
  // 配置硬件加速参数
  private async configureAcceleration(): Promise<void> {
    // 设置渲染配置
    const config: RenderConfig = {
      enableVSync: true,
      antialiasing: this.gpuInfo!.estimatedPerformance >= PerformanceLevel.Medium ? 4 : 0,
      anisotropicFiltering: this.gpuInfo!.estimatedPerformance >= PerformanceLevel.High ? 16 : 0,
      textureCompression: this.gpuInfo!.supportsCompressedTextures
    }
    
    await this.applyRenderConfig(config)
  }
  
  // 获取当前状态
  getStatus(): AccelerationStatus {
    return {
      isEnabled: this.isHardwareAccelerated,
      gpuInfo: this.gpuInfo,
      recommendation: this.getOptimizationRecommendation()
    }
  }
  
  private getOptimizationRecommendation(): string[] {
    const recommendations: string[] = []
    
    if (this.gpuInfo) {
      if (this.gpuInfo.estimatedPerformance < PerformanceLevel.Medium) {
        recommendations.push('建议降低纹理分辨率以提升性能')
      }
      if (!this.gpuInfo!.supportsCompressedTextures) {
        recommendations.push('设备不支持压缩纹理，建议使用标准格式')
      }
    }
    
    return recommendations
  }
  
  private async getDeviceInfo(): Promise<DeviceInfo> {
    // 实际实现中调用系统API获取设备信息
    return {
      gpuVendor: 'ARM',
      gpuRenderer: 'Mali-G78',
      maxTextureSize: 4096,
      maxTextureUnits: 16,
      extensions: ['OES_texture_float', 'OES_texture_half_float'],
      performanceLevel: PerformanceLevel.High
    }
  }
  
  private checkCompressedTextureSupport(info: DeviceInfo): boolean {
    return info.extensions.includes('GL_KHR_texture_compression_astc_ldr') ||
           info.extensions.includes('GL_EXT_texture_compression_s3tc')
  }
  
  private estimateGPUPerformance(info: DeviceInfo): PerformanceLevel {
    // 根据GPU型号和参数估算性能等级
    if (info.maxTextureSize >= 4096 && info.maxTextureUnits >= 16) {
      return PerformanceLevel.High
    } else if (info.maxTextureSize >= 2048) {
      return PerformanceLevel.Medium
    }
    return PerformanceLevel.Low
  }
  
  private async applyRenderConfig(config: RenderConfig): Promise<void> {
    // 应用渲染配置到渲染上下文
    console.info('应用渲染配置:', JSON.stringify(config))
  }
}

// 类型定义
interface GPUInfo {
  vendor: string
  renderer: string
  maxTextureSize: number
  maxTextureUnits: number
  supportsFloatTextures: boolean
  supportsCompressedTextures: boolean
  estimatedPerformance: PerformanceLevel
}

interface DeviceInfo {
  gpuVendor: string
  gpuRenderer: string
  maxTextureSize: number
  maxTextureUnits: number
  extensions: string[]
  performanceLevel: PerformanceLevel
}

interface RenderConfig {
  enableVSync: boolean
  antialiasing: number
  anisotropicFiltering: number
  textureCompression: boolean
}

interface AccelerationStatus {
  isEnabled: boolean
  gpuInfo: GPUInfo | null
  recommendation: string[]
}

enum PerformanceLevel {
  Low = 1,
  Medium = 2,
  High = 3
}

2.2 着色器优化策略

着色器是GPU渲染的核心程序，优化着色器代码能显著提升渲染性能。

// 着色器优化管理器
class ShaderOptimizer {
  private shaderCache: Map<string, CompiledShader> = new Map()
  private uniformBuffer: UniformBuffer
  
  constructor() {
    this.uniformBuffer = new UniformBuffer()
  }
  
  // 编译并缓存着色器
  compileShader(name: string, vertexSource: string, fragmentSource: string): CompiledShader {
    // 检查缓存
    if (this.shaderCache.has(name)) {
      return this.shaderCache.get(name)!
    }
    
    // 优化着色器源码
    const optimizedVertex = this.optimizeShaderSource(vertexSource, 'vertex')
    const optimizedFragment = this.optimizeShaderSource(fragmentSource, 'fragment')
    
    // 编译着色器
    const shader = this.compile(optimizedVertex, optimizedFragment)
    
    // 缓存编译结果
    this.shaderCache.set(name, shader)
    
    return shader
  }
  
  // 着色器源码优化
  private optimizeShaderSource(source: string, type: 'vertex' | 'fragment'): string {
    let optimized = source
    
    // 移除注释（减少解析开销）
    optimized = this.removeComments(optimized)
    
    // 移除多余空白
    optimized = this.removeRedundantWhitespace(optimized)
    
    // 常量折叠优化
    optimized = this.constantFolding(optimized)
    
    // 死代码消除
    optimized = this.deadCodeElimination(optimized)
    
    if (type === 'fragment') {
      // 片段着色器特有优化
      optimized = this.optimizeFragmentShader(optimized)
    }
    
    return optimized
  }
  
  // 片段着色器优化
  private optimizeFragmentShader(source: string): string {
    // 优化纹理采样
    // 使用texture2DLod替代texture2D进行mipmap控制
    // 优化数学运算：用近似函数替代精确计算
    
    return source
      .replace(/pow\(x,\s*2\.0\)/g, 'x * x') // pow(x, 2.0) -> x * x
      .replace(/pow\(x,\s*3\.0\)/g, 'x * x * x') // pow(x, 3.0) -> x * x * x
      .replace(/sqrt\(dot\(n,\s*n\)\)/g, 'length(n)') // sqrt(dot(n,n)) -> length(n)
  }
  
  // 常量折叠
  private constantFolding(source: string): string {
    // 计算编译期可确定的常量表达式
    // 例如：3.14159 * 2.0 -> 6.28318
    return source
  }
  
  // 死代码消除
  private deadCodeElimination(source: string): string {
    // 移除未被使用的uniform和varying变量
    return source
  }
  
  private removeComments(source: string): string {
    return source.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '')
  }
  
  private removeRedundantWhitespace(source: string): string {
    return source.replace(/\s+/g, ' ').trim()
  }
  
  private compile(vertexSource: string, fragmentSource: string): CompiledShader {
    // 实际编译逻辑
    return {
      program: null,
      uniforms: new Map(),
      attributes: new Map()
    }
  }
}

// Uniform缓冲区管理
class UniformBuffer {
  private buffer: Float32Array
  private dirty: boolean = false
  
  constructor(size: number = 256) {
    this.buffer = new Float32Array(size)
  }
  
  // 设置uniform值（批量更新）
  setUniform(offset: number, values: number[]): void {
    for (let i = 0; i < values.length; i++) {
      this.buffer[offset + i] = values[i]
    }
    this.dirty = true
  }
  
  // 批量提交到GPU
  flush(): void {
    if (this.dirty) {
      // 提交缓冲区数据到GPU
      this.dirty = false
    }
  }
}

interface CompiledShader {
  program: WebGLProgram | null
  uniforms: Map<string, number>
  attributes: Map<string, number>
}

2.3 纹理压缩与优化

纹理是GPU显存的主要消耗者，合理的纹理管理能显著降低显存占用和带宽消耗。

// 纹理管理器
class TextureManager {
  private textureCache: Map<string, Texture> = new Map()
  private totalMemoryUsage: number = 0
  private maxMemoryBudget: number = 256 * 1024 * 1024 // 256MB
  
  // 加载纹理（带压缩支持）
  async loadTexture(
    name: string,
    source: string,
    options: TextureLoadOptions = {}
  ): Promise<Texture> {
    // 检查缓存
    if (this.textureCache.has(name)) {
      return this.textureCache.get(name)!
    }
    
    // 检查内存预算
    const estimatedSize = this.estimateTextureSize(options)
    if (this.totalMemoryUsage + estimatedSize > this.maxMemoryBudget) {
      await this.evictTextures(estimatedSize)
    }
    
    // 加载纹理数据
    let textureData = await this.loadTextureData(source)
    
    // 应用压缩
    if (options.compression && options.compression !== TextureCompression.None) {
      textureData = await this.compressTexture(textureData, options.compression)
    }
    
    // 创建GPU纹理
    const texture = this.createGPUTexture(textureData, options)
    
    // 缓存并更新内存统计
    this.textureCache.set(name, texture)
    this.totalMemoryUsage += texture.memorySize
    
    return texture
  }
  
  // 纹理压缩
  private async compressTexture(
    data: TextureData,
    compression: TextureCompression
  ): Promise<TextureData> {
    switch (compression) {
      case TextureCompression.ASTC_4x4:
        return this.compressASTC(data, 4, 4)
      case TextureCompression.ASTC_8x8:
        return this.compressASTC(data, 8, 8)
      case TextureCompression.ETC2:
        return this.compressETC2(data)
      case TextureCompression.S3TC:
        return this.compressS3TC(data)
      default:
        return data
    }
  }
  
  // ASTC压缩（Adaptive Scalable Texture Compression）
  private async compressASTC(data: TextureData, blockX: number, blockY: number): Promise<TextureData> {
    // ASTC是移动端推荐的压缩格式
    // 压缩比：4x4约8:1，8x8约16:1
    console.info(`ASTC ${blockX}x${blockY}压缩中...`)
    
    return {
      ...data,
      compressed: true,
      format: `ASTC_${blockX}x${blockY}`,
      size: Math.ceil(data.width / blockX) * Math.ceil(data.height / blockY) * 16
    }
  }
  
  // ETC2压缩
  private async compressETC2(data: TextureData): Promise<TextureData> {
    // ETC2是OpenGL ES 3.0标准压缩格式
    return {
      ...data,
      compressed: true,
      format: 'ETC2',
      size: Math.ceil(data.width / 4) * Math.ceil(data.height / 4) * 8
    }
  }
  
  // S3TC/DXT压缩
  private async compressS3TC(data: TextureData): Promise<TextureData> {
    // S3TC主要用于桌面平台
    return {
      ...data,
      compressed: true,
      format: 'S3TC',
      size: Math.ceil(data.width / 4) * Math.ceil(data.height / 4) * 8
    }
  }
  
  // 纹理驱逐策略
  private async evictTextures(requiredSize: number): Promise<void> {
    // 按LRU策略驱逐纹理
    const textures = Array.from(this.textureCache.entries())
      .sort((a, b) => a[1].lastAccessTime - b[1].lastAccessTime)
    
    let freedSize = 0
    for (const [name, texture] of textures) {
      if (freedSize >= requiredSize) break
      
      this.textureCache.delete(name)
      this.destroyTexture(texture)
      freedSize += texture.memorySize
      this.totalMemoryUsage -= texture.memorySize
      
      console.info(`驱逐纹理: ${name}, 释放 ${texture.memorySize} 字节`)
    }
  }
  
  // Mipmap生成
  generateMipmaps(texture: Texture): void {
    // Mipmap能改善纹理采样质量和性能
    // 每级mipmap尺寸减半
    const levels = Math.floor(Math.log2(Math.max(texture.width, texture.height)))
    
    for (let level = 1; level <= levels; level++) {
      const width = Math.max(1, texture.width >> level)
      const height = Math.max(1, texture.height >> level)
      
      // 生成该级别mipmap
      this.generateMipmapLevel(texture, level, width, height)
    }
  }
  
  // 预估纹理大小
  private estimateTextureSize(options: TextureLoadOptions): number {
    const width = options.width || 1024
    const height = options.height || 1024
    const channels = options.hasAlpha ? 4 : 3
    
    // 根据压缩格式计算大小
    if (options.compression === TextureCompression.ASTC_4x4) {
      return Math.ceil(width / 4) * Math.ceil(height / 4) * 16
    } else if (options.compression === TextureCompression.ASTC_8x8) {
      return Math.ceil(width / 8) * Math.ceil(height / 8) * 16
    }
    
    return width * height * channels
  }
  
  private async loadTextureData(source: string): Promise<TextureData> {
    // 加载纹理数据
    return {
      width: 1024,
      height: 1024,
      data: new Uint8Array(1024 * 1024 * 4),
      compressed: false,
      format: 'RGBA',
      size: 1024 * 1024 * 4
    }
  }
  
  private createGPUTexture(data: TextureData, options: TextureLoadOptions): Texture {
    return {
      id: Math.random().toString(),
      width: data.width,
      height: data.height,
      memorySize: data.size,
      lastAccessTime: Date.now(),
      hasMipmaps: options.generateMipmaps || false
    }
  }
  
  private generateMipmapLevel(texture: Texture, level: number, width: number, height: number): void {
    // 生成mipmap级别
  }
  
  private destroyTexture(texture: Texture): void {
    // 销毁GPU纹理资源
  }
  
  // 获取内存使用统计
  getMemoryStats(): MemoryStats {
    return {
      totalUsage: this.totalMemoryUsage,
      maxBudget: this.maxMemoryBudget,
      usageRatio: this.totalMemoryUsage / this.maxMemoryBudget,
      textureCount: this.textureCache.size
    }
  }
}

// 枚举和接口定义
enum TextureCompression {
  None = 'none',
  ASTC_4x4 = 'astc_4x4',
  ASTC_8x8 = 'astc_8x8',
  ETC2 = 'etc2',
  S3TC = 's3tc'
}

interface TextureLoadOptions {
  width?: number
  height?: number
  hasAlpha?: boolean
  compression?: TextureCompression
  generateMipmaps?: boolean
}

interface TextureData {
  width: number
  height: number
  data: Uint8Array
  compressed: boolean
  format: string
  size: number
}

interface Texture {
  id: string
  width: number
  height: number
  memorySize: number
  lastAccessTime: number
  hasMipmaps: boolean
}

interface MemoryStats {
  totalUsage: number
  maxBudget: number
  usageRatio: number
  textureCount: number
}

三、代码实战

3.1 游戏渲染循环优化

// 游戏渲染循环管理
@Component
struct GameRenderLoop {
  private renderContext: GameRenderContext | null = null
  private lastFrameTime: number = 0
  private deltaTime: number = 0
  private frameCount: number = 0
  private fps: number = 0
  private fpsUpdateTime: number = 0
  
  // 渲染配置
  @State renderConfig: RenderConfig = {
    enableVSync: true,
    targetFPS: 60,
    qualityLevel: QualityLevel.High,
    enablePostProcessing: true
  }
  
  aboutToAppear(): void {
    this.initRenderContext()
    this.startRenderLoop()
  }
  
  aboutToDisappear(): void {
    this.stopRenderLoop()
  }
  
  build() {
    Stack() {
      // 游戏画布
      Canvas(this.renderContext)
        .width('100%')
        .height('100%')
        .onReady(() => {
          this.onCanvasReady()
        })
      
      // 性能监控UI（调试用）
      if (BuildConfig.DEBUG) {
        this.PerformanceOverlay()
      }
    }
    .width('100%')
    .height('100%')
  }
  
  @Builder
  PerformanceOverlay() {
    Column() {
      Text(`FPS: ${this.fps.toFixed(1)}`)
        .fontSize(12)
        .fontColor('#ffffff')
        .backgroundColor('rgba(0,0,0,0.7)')
        .padding(4)
        .borderRadius(4)
      
      Text(`Delta: ${this.deltaTime.toFixed(2)}ms`)
        .fontSize(12)
        .fontColor('#ffffff')
        .backgroundColor('rgba(0,0,0,0.7)')
        .padding(4)
        .borderRadius(4)
        .margin({ top: 4 })
    }
    .position({ x: 10, y: 10 })
  }
  
  private initRenderContext(): void {
    this.renderContext = new GameRenderContext()
  }
  
  private onCanvasReady(): void {
    // 初始化GPU资源
    this.initGPUResources()
  }
  
  private initGPUResources(): void {
    // 创建着色器程序
    // 加载纹理资源
    // 初始化顶点缓冲
  }
  
  private startRenderLoop(): void {
    const loop = () => {
      const currentTime = performance.now()
      this.deltaTime = currentTime - this.lastFrameTime
      this.lastFrameTime = currentTime
      
      // 渲染帧
      this.renderFrame()
      
      // 更新FPS统计
      this.updateFPS(currentTime)
      
      // 继续循环
      requestAnimationFrame(loop)
    }
    
    requestAnimationFrame(loop)
  }
  
  private renderFrame(): void {
    if (!this.renderContext) return
    
    // 清除缓冲
    this.clearBuffers()
    
    // 更新游戏状态
    this.updateGameState(this.deltaTime)
    
    // 提交渲染命令
    this.submitRenderCommands()
    
    // 后处理
    if (this.renderConfig.enablePostProcessing) {
      this.applyPostProcessing()
    }
    
    this.frameCount++
  }
  
  private clearBuffers(): void {
    // 清除颜色、深度、模板缓冲
  }
  
  private updateGameState(dt: number): void {
    // 更新游戏逻辑
  }
  
  private submitRenderCommands(): void {
    // 提交渲染命令到GPU
  }
  
  private applyPostProcessing(): void {
    // 应用后处理效果
  }
  
  private updateFPS(currentTime: number): void {
    if (currentTime - this.fpsUpdateTime >= 1000) {
      this.fps = this.frameCount * 1000 / (currentTime - this.fpsUpdateTime)
      this.frameCount = 0
      this.fpsUpdateTime = currentTime
    }
  }
  
  private stopRenderLoop(): void {
    // 清理GPU资源
  }
}

// 渲染上下文
class GameRenderContext {
  // Canvas渲染上下文实现
}

interface RenderConfig {
  enableVSync: boolean
  targetFPS: number
  qualityLevel: QualityLevel
  enablePostProcessing: boolean
}

enum QualityLevel {
  Low = 1,
  Medium = 2,
  High = 3,
  Ultra = 4
}

class BuildConfig {
  static DEBUG: boolean = true
}

3.2 批处理渲染优化

// 批处理渲染器
class BatchRenderer {
  private batches: RenderBatch[] = []
  private currentBatch: RenderBatch | null = null
  private maxBatchSize: number = 1000
  
  // 添加渲染对象
  addRenderable(renderable: Renderable): void {
    // 尝试合并到当前批次
    if (this.canBatch(renderable)) {
      this.addToCurrentBatch(renderable)
    } else {
      // 刷新当前批次，创建新批次
      this.flushCurrentBatch()
      this.startNewBatch(renderable)
    }
  }
  
  // 判断是否可批处理
  private canBatch(renderable: Renderable): boolean {
    if (!this.currentBatch) return false
    if (this.currentBatch.items.length >= this.maxBatchSize) return false
    
    // 检查材质、纹理、着色器是否相同
    return (
      this.currentBatch.material.id === renderable.material.id &&
      this.currentBatch.texture?.id === renderable.texture?.id &&
      this.currentBatch.shader.id === renderable.shader.id
    )
  }
  
  // 添加到当前批次
  private addToCurrentBatch(renderable: Renderable): void {
    this.currentBatch!.items.push(renderable)
    this.currentBatch!.vertexCount += renderable.vertexCount
    this.currentBatch!.indexCount += renderable.indexCount
  }
  
  // 开始新批次
  private startNewBatch(renderable: Renderable): void {
    this.currentBatch = {
      material: renderable.material,
      texture: renderable.texture || null,
      shader: renderable.shader,
      items: [renderable],
      vertexCount: renderable.vertexCount,
      indexCount: renderable.indexCount,
      vertexBuffer: null,
      indexBuffer: null
    }
  }
  
  // 刷新当前批次
  private flushCurrentBatch(): void {
    if (!this.currentBatch || this.currentBatch.items.length === 0) return
    
    // 合并顶点数据
    const mergedVertices = this.mergeVertices(this.currentBatch)
    const mergedIndices = this.mergeIndices(this.currentBatch)
    
    // 创建/更新缓冲区
    this.currentBatch.vertexBuffer = this.createVertexBuffer(mergedVertices)
    this.currentBatch.indexBuffer = this.createIndexBuffer(mergedIndices)
    
    // 添加到批次列表
    this.batches.push(this.currentBatch)
    this.currentBatch = null
  }
  
  // 执行所有批次渲染
  render(): void {
    this.flushCurrentBatch()
    
    for (const batch of this.batches) {
      // 设置渲染状态
      this.setRenderState(batch)
      
      // 绑定缓冲区
      this.bindBuffers(batch)
      
      // 执行绘制调用
      this.drawIndexed(batch.indexCount)
    }
    
    // 清空批次
    this.batches = []
  }
  
  private mergeVertices(batch: RenderBatch): Float32Array {
    const vertices = new Float32Array(batch.vertexCount * 9) // pos(3) + uv(2) + normal(3) + color(1)
    let offset = 0
    
    for (const item of batch.items) {
      vertices.set(item.vertices, offset)
      offset += item.vertices.length
    }
    
    return vertices
  }
  
  private mergeIndices(batch: RenderBatch): Uint16Array {
    const indices = new Uint16Array(batch.indexCount)
    let offset = 0
    let vertexOffset = 0
    
    for (const item of batch.items) {
      // 调整索引偏移
      for (let i = 0; i < item.indices.length; i++) {
        indices[offset + i] = item.indices[i] + vertexOffset
      }
      offset += item.indices.length
      vertexOffset += item.vertexCount
    }
    
    return indices
  }
  
  private createVertexBuffer(vertices: Float32Array): GPUBuffer {
    // 创建GPU顶点缓冲
    return { id: 'vb', size: vertices.byteLength }
  }
  
  private createIndexBuffer(indices: Uint16Array): GPUBuffer {
    // 创建GPU索引缓冲
    return { id: 'ib', size: indices.byteLength }
  }
  
  private setRenderState(batch: RenderBatch): void {
    // 设置材质、纹理、着色器状态
  }
  
  private bindBuffers(batch: RenderBatch): void {
    // 绑定顶点和索引缓冲
  }
  
  private drawIndexed(count: number): void {
    // 执行索引绘制
  }
}

// 类型定义
interface RenderBatch {
  material: Material
  texture: Texture | null
  shader: Shader
  items: Renderable[]
  vertexCount: number
  indexCount: number
  vertexBuffer: GPUBuffer | null
  indexBuffer: GPUBuffer | null
}

interface Renderable {
  material: Material
  texture?: Texture
  shader: Shader
  vertices: Float32Array
  indices: Uint16Array
  vertexCount: number
  indexCount: number
}

interface Material {
  id: string
  properties: Map<string, any>
}

interface Shader {
  id: string
}

interface GPUBuffer {
  id: string
  size: number
}

3.3 实例化渲染

// 实例化渲染器（用于大量相同物体的渲染）
class InstancedRenderer {
  private instanceData: Float32Array
  private instanceCount: number = 0
  private maxInstances: number
  private instanceBuffer: GPUBuffer | null = null
  
  constructor(maxInstances: number = 10000) {
    this.maxInstances = maxInstances
    // 每个实例：mat4(16) + color(4) = 20 floats
    this.instanceData = new Float32Array(maxInstances * 20)
  }
  
  // 添加实例
  addInstance(transform: Matrix4, color: Color): number {
    if (this.instanceCount >= this.maxInstances) {
      console.warn('实例数量已达上限')
      return -1
    }
    
    const offset = this.instanceCount * 20
    
    // 写入变换矩阵
    for (let i = 0; i < 16; i++) {
      this.instanceData[offset + i] = transform.elements[i]
    }
    
    // 写入颜色
    this.instanceData[offset + 16] = color.r
    this.instanceData[offset + 17] = color.g
    this.instanceData[offset + 18] = color.b
    this.instanceData[offset + 19] = color.a
    
    return this.instanceCount++
  }
  
  // 更新实例
  updateInstance(index: number, transform: Matrix4, color: Color): void {
    if (index < 0 || index >= this.instanceCount) return
    
    const offset = index * 20
    
    for (let i = 0; i < 16; i++) {
      this.instanceData[offset + i] = transform.elements[i]
    }
    
    this.instanceData[offset + 16] = color.r
    this.instanceData[offset + 17] = color.g
    this.instanceData[offset + 18] = color.b
    this.instanceData[offset + 19] = color.a
  }
  
  // 提交到GPU
  commit(): void {
    if (!this.instanceBuffer) {
      this.instanceBuffer = this.createInstanceBuffer()
    }
    
    // 更新GPU缓冲
    this.updateInstanceBuffer(this.instanceBuffer, this.instanceData, this.instanceCount * 20 * 4)
  }
  
  // 渲染所有实例
  render(): void {
    if (this.instanceCount === 0) return
    
    this.commit()
    
    // 绑定实例缓冲
    this.bindInstanceBuffer(this.instanceBuffer!)
    
    // 执行实例化绘制
    this.drawInstanced(this.instanceCount)
  }
  
  // 清除所有实例
  clear(): void {
    this.instanceCount = 0
  }
  
  private createInstanceBuffer(): GPUBuffer {
    return { id: 'instance_buffer', size: this.instanceData.byteLength }
  }
  
  private updateInstanceBuffer(buffer: GPUBuffer, data: Float32Array, size: number): void {
    // 更新GPU缓冲数据
  }
  
  private bindInstanceBuffer(buffer: GPUBuffer): void {
    // 绑定实例缓冲到着色器
  }
  
  private drawInstanced(count: number): void {
    // 执行实例化绘制调用
  }
}

// 矩阵类
class Matrix4 {
  elements: Float32Array
  
  constructor() {
    this.elements = new Float32Array([
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1
    ])
  }
  
  static identity(): Matrix4 {
    return new Matrix4()
  }
  
  static translation(x: number, y: number, z: number): Matrix4 {
    const m = new Matrix4()
    m.elements[12] = x
    m.elements[13] = y
    m.elements[14] = z
    return m
  }
  
  static scale(x: number, y: number, z: number): Matrix4 {
    const m = new Matrix4()
    m.elements[0] = x
    m.elements[5] = y
    m.elements[10] = z
    return m
  }
  
  static rotationY(angle: number): Matrix4 {
    const m = new Matrix4()
    const c = Math.cos(angle)
    const s = Math.sin(angle)
    m.elements[0] = c
    m.elements[2] = s
    m.elements[8] = -s
    m.elements[10] = c
    return m
  }
  
  multiply(other: Matrix4): Matrix4 {
    const result = new Matrix4()
    const a = this.elements
    const b = other.elements
    const r = result.elements
    
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        r[i * 4 + j] = 
          a[i * 4 + 0] * b[0 * 4 + j] +
          a[i * 4 + 1] * b[1 * 4 + j] +
          a[i * 4 + 2] * b[2 * 4 + j] +
          a[i * 4 + 3] * b[3 * 4 + j]
      }
    }
    
    return result
  }
}

interface Color {
  r: number
  g: number
  b: number
  a: number
}

四、踩坑与注意事项

4.1 常见GPU性能陷阱

flowchart TB
    subgraph Traps["GPU性能陷阱"]
        T1["状态切换频繁<br/>Pipeline Stall"]
        T2["纹理绑定过多<br/>Texture Thrashing"]
        T3["显存带宽瓶颈<br/>Memory Bandwidth"]
        T4["同步等待<br/>GPU-CPU Sync"]
    end
    
    subgraph Solutions["解决方案"]
        S1["状态排序<br/>减少切换"]
        S2["纹理合批<br/>Texture Atlas"]
        S3["压缩纹理<br/>减少带宽"]
        S4["异步提交<br/>避免等待"]
    end
    
    T1 --> S1
    T2 --> S2
    T3 --> S3
    T4 --> S4
    
    classDef trapStyle fill:#ff6b6b,stroke:#c92a2a,color:#fff,stroke-width:2px
    classDef solutionStyle fill:#48bb78,stroke:#38a169,color:#fff,stroke-width:2px
    
    class T1,T2,T3,T4 trapStyle
    class S1,S2,S3,S4 solutionStyle

4.2 GPU性能检测

// GPU性能分析器
class GPUProfiler {
  private metrics: GPUMetrics = {
    drawCalls: 0,
    stateChanges: 0,
    textureBinds: 0,
    shaderSwitches: 0,
    verticesProcessed: 0,
    primitivesRendered: 0,
    gpuTimeMs: 0
  }
  
  private frameStartTime: number = 0
  
  // 开始帧分析
  beginFrame(): void {
    this.frameStartTime = performance.now()
    this.resetMetrics()
  }
  
  // 结束帧分析
  endFrame(): void {
    this.metrics.gpuTimeMs = performance.now() - this.frameStartTime
    this.analyzeMetrics()
  }
  
  // 记录绘制调用
  recordDrawCall(vertexCount: number, primitiveCount: number): void {
    this.metrics.drawCalls++
    this.metrics.verticesProcessed += vertexCount
    this.metrics.primitivesRendered += primitiveCount
  }
  
  // 记录状态变化
  recordStateChange(): void {
    this.metrics.stateChanges++
  }
  
  // 记录纹理绑定
  recordTextureBind(): void {
    this.metrics.textureBinds++
  }
  
  // 记录着色器切换
  recordShaderSwitch(): void {
    this.metrics.shaderSwitches++
  }
  
  // 获取性能报告
  getReport(): GPUProfileReport {
    return {
      metrics: { ...this.metrics },
      warnings: this.generateWarnings(),
      recommendations: this.generateRecommendations()
    }
  }
  
  private resetMetrics(): void {
    this.metrics = {
      drawCalls: 0,
      stateChanges: 0,
      textureBinds: 0,
      shaderSwitches: 0,
      verticesProcessed: 0,
      primitivesRendered: 0,
      gpuTimeMs: 0
    }
  }
  
  private analyzeMetrics(): void {
    // 分析性能指标
    if (this.metrics.drawCalls > 1000) {
      console.warn('绘制调用过多，建议使用批处理优化')
    }
    
    if (this.metrics.stateChanges > 500) {
      console.warn('状态切换频繁，建议排序渲染对象')
    }
  }
  
  private generateWarnings(): string[] {
    const warnings: string[] = []
    
    if (this.metrics.drawCalls > 1000) {
      warnings.push('绘制调用超过1000次，可能影响性能')
    }
    
    if (this.metrics.shaderSwitches > 100) {
      warnings.push('着色器切换频繁，建议减少材质种类')
    }
    
    return warnings
  }
  
  private generateRecommendations(): string[] {
    const recommendations: string[] = []
    
    if (this.metrics.drawCalls > 500) {
      recommendations.push('考虑使用实例化渲染减少绘制调用')
    }
    
    if (this.metrics.textureBinds > 50) {
      recommendations.push('考虑使用纹理图集减少纹理绑定')
    }
    
    return recommendations
  }
}

interface GPUMetrics {
  drawCalls: number
  stateChanges: number
  textureBinds: number
  shaderSwitches: number
  verticesProcessed: number
  primitivesRendered: number
  gpuTimeMs: number
}

interface GPUProfileReport {
  metrics: GPUMetrics
  warnings: string[]
  recommendations: string[]
}

4.3 注意事项清单

五、总结

GPU调优是HarmonyOS游戏开发性能优化的核心环节。通过本文的深入分析，我们掌握了以下关键要点：

5.1 核心优化策略

1. 硬件加速配置：正确检测和配置GPU硬件加速，发挥硬件最大性能
2. 着色器优化：优化Shader代码，减少GPU计算开销和状态切换
3. 纹理管理：使用压缩纹理、Mipmap和纹理图集降低显存和带宽消耗
4. 批处理与实例化：合并绘制调用，减少GPU命令提交开销

5.2 性能指标参考

flowchart LR
    subgraph Targets["性能目标"]
        A["帧率 ≥ 60 FPS"]
        B["绘制调用 < 500"]
        C["GPU时间 < 12ms"]
        D["显存占用 < 256MB"]
    end
    
    classDef targetStyle fill:#667eea,stroke:#5a67d8,color:#fff,stroke-width:2px
    class A,B,C,D targetStyle

5.3 最佳实践建议

• 使用纹理压缩格式（ASTC/ETC2）降低显存占用
• 实现批处理渲染减少绘制调用
• 使用实例化渲染处理大量相同物体
• 优化着色器代码减少GPU计算量
• 持续监控GPU性能指标，及时发现瓶颈

GPU性能优化需要结合具体游戏场景进行分析和调整，建议使用GPU性能分析工具持续监控，确保游戏在各种设备上都能流畅运行。