HarmonyOS游戏开发：3D渲染性能优化与调优策略

📌 核心要点：系统掌握3D渲染性能瓶颈分析方法，深入理解DrawCall优化、LOD技术、遮挡剔除、纹理压缩与Mipmap等核心优化策略，并学会使用HarmonyOS性能监控工具定位和解决渲染性能问题。

一、背景与动机

你的3D游戏在旗舰机上跑得丝滑流畅，一放到中低端设备上就卡成PPT——这大概是每个3D开发者都经历过的噩梦。

性能问题为什么这么难搞？因为它不像Bug那样有明确的错误信息，它是"温水煮青蛙"式的——60fps降到55fps你几乎感觉不到，降到45fps开始有点卡，降到30fps就明显不爽了，降到20fps玩家直接卸载。等你发现问题时，往往已经积重难返。

更棘手的是，3D渲染的性能瓶颈可能出现在管线的任何环节：CPU端可能是DrawCall太多、脚本逻辑太重；GPU端可能是填充率过高、纹理带宽不足；内存端可能是资源加载太慢、GC频繁触发。你得先定位瓶颈在哪，才能对症下药。

这篇文章的目标就是给你一套完整的"性能诊断→优化实施→效果验证"方法论。不是那种"试试看有没有用"的玄学调优，而是基于数据驱动的科学优化。

二、核心原理

2.1 3D渲染性能瓶颈全景

graph TD
    A[3D渲染性能瓶颈]:::primary --> B[CPU瓶颈]:::info
    A --> C[GPU瓶颈]:::warning
    A --> D[内存瓶颈]:::error

    B --> B1[DrawCall过多<br/>状态切换频繁]:::info
    B --> B2[脚本逻辑过重<br/>物理计算密集]:::info
    B --> B3[数据上传阻塞<br/>glBufferData卡顿]:::info

    C --> C1[填充率过高<br/>Overdraw严重]:::warning
    C --> C2[顶点处理过载<br/>模型面数过多]:::warning
    C --> C3[纹理带宽不足<br/>大纹理采样慢]:::warning
    C --> C4[着色器复杂度高<br/>指令数过多]:::warning

    D --> D1[资源加载阻塞<br/>大模型/纹理]:::error
    D --> D2[GC频繁触发<br/>对象分配过多]:::error
    D --> D3[显存不足<br/>纹理/缓冲溢出]:::error

    classDef primary fill:#4CAF50,stroke:#388E3C,color:#fff
    classDef warning fill:#FF9800,stroke:#F57C00,color:#fff
    classDef error fill:#F44336,stroke:#D32F2F,color:#fff
    classDef info fill:#2196F3,stroke:#1976D2,color:#fff

2.2 关键性能指标

2.3 瓶颈定位方法论

优化的第一步是定位瓶颈，而不是盲目优化。定位方法：

1. 降低分辨率：如果帧率明显提升 → GPU填充率瓶颈
2. 简化着色器：如果帧率明显提升 → GPU着色器瓶颈
3. 减少DrawCall：如果帧率明显提升 → CPU瓶颈
4. 减少纹理大小：如果帧率明显提升 → 纹理带宽瓶颈

三、代码实战

3.1 基础用法：性能监控工具

先实现一个基础的性能监控面板，实时显示关键指标：

// 渲染性能监控器
export class RenderProfiler {
  // 帧时间统计
  private frameTimes: number[] = []
  private maxSamples: number = 60
  private lastFrameTime: number = 0

  // DrawCall计数
  private drawCallCount: number = 0
  private triangleCount: number = 0

  // 内存统计
  private gpuMemoryUsed: number = 0

  // 帧开始
  onFrameBegin(): void {
    this.lastFrameTime = performance.now()
    this.drawCallCount = 0
    this.triangleCount = 0
  }

  // 帧结束
  onFrameEnd(): void {
    const now = performance.now()
    const frameTime = now - this.lastFrameTime

    this.frameTimes.push(frameTime)
    if (this.frameTimes.length > this.maxSamples) {
      this.frameTimes.shift()
    }
  }

  // 记录一次DrawCall
  recordDrawCall(triangles: number): void {
    this.drawCallCount++
    this.triangleCount += triangles
  }

  // 记录GPU内存分配
  recordGPUMemory(bytes: number): void {
    this.gpuMemoryUsed += bytes
  }

  // 计算平均FPS
  getAverageFPS(): number {
    if (this.frameTimes.length === 0) return 0
    const avgFrameTime = this.getAverageFrameTime()
    return avgFrameTime > 0 ? 1000 / avgFrameTime : 0
  }

  // 计算平均帧时间（毫秒）
  getAverageFrameTime(): number {
    if (this.frameTimes.length === 0) return 0
    const sum = this.frameTimes.reduce((a, b) => a + b, 0)
    return sum / this.frameTimes.length
  }

  // 获取最低FPS（最差帧）
  getMinFPS(): number {
    if (this.frameTimes.length === 0) return 0
    const maxFrameTime = Math.max(...this.frameTimes)
    return maxFrameTime > 0 ? 1000 / maxFrameTime : 0
  }

  // 获取当前DrawCall数
  getDrawCallCount(): number {
    return this.drawCallCount
  }

  // 获取当前三角形数
  getTriangleCount(): number {
    return this.triangleCount
  }

  // 获取GPU内存占用（MB）
  getGPUMemoryMB(): number {
    return this.gpuMemoryUsed / (1024 * 1024)
  }

  // 生成性能报告
  getReport(): PerformanceReport {
    return {
      fps: this.getAverageFPS(),
      minFps: this.getMinFPS(),
      frameTime: this.getAverageFrameTime(),
      drawCalls: this.drawCallCount,
      triangles: this.triangleCount,
      gpuMemoryMB: this.getGPUMemoryMB(),
      // 瓶颈分析
      bottleneck: this.analyzeBottleneck()
    }
  }

  // 自动分析瓶颈
  private analyzeBottleneck(): string {
    const fps = this.getAverageFPS()

    if (fps >= 55) return '无明显瓶颈'

    if (this.drawCallCount > 200) {
      return 'CPU瓶颈：DrawCall过多'
    }
    if (this.triangleCount > 100000) {
      return 'GPU瓶颈：三角形数量过多'
    }
    if (this.getAverageFrameTime() > 33) {
      return '综合瓶颈：帧时间过长'
    }

    return '需进一步分析'
  }
}

export interface PerformanceReport {
  fps: number;
  minFps: number;
  frameTime: number;
  drawCalls: number;
  triangles: number;
  gpuMemoryMB: number;
  bottleneck: string;
}

3.2 进阶用法：DrawCall优化与批处理

DrawCall是移动端最常见的CPU瓶颈。每次调用glDrawElements，CPU都需要向GPU发送绘制命令，这个过程的开销远大于GPU实际绘制的时间。

核心优化思路：减少DrawCall数量 = 减少状态切换次数 = 合并相同材质的网格。

// 静态批处理器：将使用相同材质的静态网格合并为一个DrawCall
export class StaticBatcher {
  // 按材质分组的网格数据
  private batches: Map<string, BatchData> = new Map()

  // 添加一个静态网格到批处理
  addMesh(meshId: string, materialKey: string,
          vertices: Float32Array, normals: Float32Array,
          texCoords: Float32Array, indices: Uint32Array,
          modelMatrix: Float32Array): void {
    if (!this.batches.has(materialKey)) {
      this.batches.set(materialKey, {
        vertices: [], normals: [], texCoords: [],
        indices: [], indexOffset: 0
      })
    }

    const batch = this.batches.get(materialKey)!

    // 将顶点数据从模型空间变换到世界空间
    const vertexCount = vertices.length / 3
    for (let i = 0; i < vertexCount; i++) {
      const x = vertices[i * 3]
      const y = vertices[i * 3 + 1]
      const z = vertices[i * 3 + 2]

      // 应用模型矩阵变换
      const wx = modelMatrix[0] * x + modelMatrix[4] * y + modelMatrix[8] * z + modelMatrix[12]
      const wy = modelMatrix[1] * x + modelMatrix[5] * y + modelMatrix[9] * z + modelMatrix[13]
      const wz = modelMatrix[2] * x + modelMatrix[6] * y + modelMatrix[10] * z + modelMatrix[14]

      batch.vertices.push(wx, wy, wz)

      // 法线也需要变换（使用模型矩阵的逆转置）
      if (normals.length > i * 3 + 2) {
        const nx = normals[i * 3]
        const ny = normals[i * 3 + 1]
        const nz = normals[i * 3 + 2]
        batch.normals.push(nx, ny, nz) // 简化：假设无缩放
      }

      if (texCoords.length > i * 2 + 1) {
        batch.texCoords.push(texCoords[i * 2], texCoords[i * 2 + 1])
      }
    }

    // 索引需要加上偏移
    for (let i = 0; i < indices.length; i++) {
      batch.indices.push(indices[i] + batch.indexOffset)
    }
    batch.indexOffset += vertexCount
  }

  // 构建批处理缓冲
  buildBuffers(gl: WebGL2RenderingContext): Map<string, BatchBuffers> {
    const result: Map<string, BatchBuffers> = new Map()

    this.batches.forEach((data, materialKey) => {
      const vao = gl.createVertexArray()!
      gl.bindVertexArray(vao)

      // 顶点缓冲
      const posVbo = gl.createBuffer()!
      gl.bindBuffer(gl.ARRAY_BUFFER, posVbo)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data.vertices), gl.STATIC_DRAW)
      gl.enableVertexAttribArray(0)
      gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0)

      // 法线缓冲
      const normalVbo = gl.createBuffer()!
      gl.bindBuffer(gl.ARRAY_BUFFER, normalVbo)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data.normals), gl.STATIC_DRAW)
      gl.enableVertexAttribArray(1)
      gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0)

      // UV缓冲
      const uvVbo = gl.createBuffer()!
      gl.bindBuffer(gl.ARRAY_BUFFER, uvVbo)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data.texCoords), gl.STATIC_DRAW)
      gl.enableVertexAttribArray(2)
      gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 0, 0)

      // 索引缓冲
      const ebo = gl.createBuffer()!
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebo)
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(data.indices), gl.STATIC_DRAW)

      gl.bindVertexArray(0)

      result.set(materialKey, {
        vao, posVbo, normalVbo, uvVbo, ebo,
        indexCount: data.indices.length
      })
    })

    return result
  }

  // 清空批处理数据
  clear(): void {
    this.batches.clear()
  }
}

interface BatchData {
  vertices: number[];
  normals: number[];
  texCoords: number[];
  indices: number[];
  indexOffset: number;
}

interface BatchBuffers {
  vao: WebGLVertexArrayObject;
  posVbo: WebGLBuffer;
  normalVbo: WebGLBuffer;
  uvVbo: WebGLBuffer;
  ebo: WebGLBuffer;
  indexCount: number;
}

3.3 LOD（细节层次）技术

LOD的核心思想：远处的物体看不清细节，用低精度模型就够了。

// LOD管理器
export class LODManager {
  private lodGroups: Map<string, LODGroup> = new Map()
  private cameraPosition: Float32Array = new Float32Array([0, 0, 0])

  // 注册LOD组
  registerLODGroup(objectId: string, levels: LODLevel[]): void {
    // 按距离排序（从近到远）
    levels.sort((a, b) => a.distance - b.distance)
    this.lodGroups.set(objectId, { levels, currentLevel: 0 })
  }

  // 更新相机位置
  setCameraPosition(pos: Float32Array): void {
    this.cameraPosition = pos
  }

  // 每帧更新LOD级别
  update(objectPositions: Map<string, Float32Array>): Map<string, number> {
    const result: Map<string, number> = new Map()

    this.lodGroups.forEach((group, objectId) => {
      const objPos = objectPositions.get(objectId)
      if (!objPos) return

      // 计算物体到相机的距离
      const dx = objPos[0] - this.cameraPosition[0]
      const dy = objPos[1] - this.cameraPosition[1]
      const dz = objPos[2] - this.cameraPosition[2]
      const distance = Math.sqrt(dx * dx + dy * dy + dz * dz)

      // 选择合适的LOD级别
      let newLevel = 0
      for (let i = group.levels.length - 1; i >= 0; i--) {
        if (distance >= group.levels[i].distance) {
          newLevel = i
          break
        }
      }

      // LOD切换滞后（防止在边界来回切换）
      if (Math.abs(newLevel - group.currentLevel) > 0) {
        const currentDist = group.levels[group.currentLevel].distance
        const hysteresis = currentDist * 0.1 // 10%的滞后区间

        if (newLevel > group.currentLevel && distance < currentDist + hysteresis) {
          newLevel = group.currentLevel // 还没超出滞后区间，不切换
        } else if (newLevel < group.currentLevel && distance > currentDist - hysteresis) {
          newLevel = group.currentLevel
        }
      }

      group.currentLevel = newLevel
      result.set(objectId, newLevel)
    })

    return result
  }

  // 获取物体当前应使用的网格
  getCurrentMesh(objectId: string): string {
    const group = this.lodGroups.get(objectId)
    if (!group) return ''

    return group.levels[group.currentLevel].meshId
  }
}

// LOD级别定义
export interface LODLevel {
  distance: number;   // 切换距离
  meshId: string;     // 对应的网格ID
  triangleCount: number; // 三角形数量
}

// LOD组
interface LODGroup {
  levels: LODLevel[];
  currentLevel: number;
}

3.4 遮挡剔除（Occlusion Culling）

遮挡剔除的核心思想：被其他物体挡住的物体不需要渲染。

// 简易遮挡剔除器（基于软件光栅化的Hi-Z方案）
export class OcclusionCuller {
  private hiZBuffer: Float32Array = new Float32Array(0)
  private hiZWidth: number = 0
  private hiZHeight: number = 0

  // 初始化Hi-Z缓冲
  initialize(width: number, height: number): void {
    // 使用1/4分辨率的深度缓冲
    this.hiZWidth = Math.ceil(width / 4)
    this.hiZHeight = Math.ceil(height / 4)
    this.hiZBuffer = new Float32Array(this.hiZWidth * this.hiZHeight)
    this.clearHiZ()
  }

  // 清空Hi-Z缓冲（每帧开始时调用）
  clearHiZ(): void {
    this.hiZBuffer.fill(1.0) // 初始化为最远深度
  }

  // 从深度缓冲构建Hi-Z（层级深度缓冲）
  buildHiZ(depthBuffer: Float32Array, screenWidth: number, screenHeight: number): void {
    // 第一步：降采样到1/4分辨率
    for (let y = 0; y < this.hiZHeight; y++) {
      for (let x = 0; x < this.hiZWidth; x++) {
        // 取4x4像素区域的最大深度（最远）
        let maxDepth = 0
        for (let dy = 0; dy < 4; dy++) {
          for (let dx = 0; dx < 4; dx++) {
            const srcX = Math.min(x * 4 + dx, screenWidth - 1)
            const srcY = Math.min(y * 4 + dy, screenHeight - 1)
            const depth = depthBuffer[srcY * screenWidth + srcX]
            if (depth > maxDepth) maxDepth = depth
          }
        }
        this.hiZBuffer[y * this.hiZWidth + x] = maxDepth
      }
    }

    // 第二步：构建Mip层级（每层取2x2区域的最大深度）
    // ... 省略多级Mip构建代码 ...
  }

  // 检测物体包围盒是否被遮挡
  isOccluded(
    aabbMin: Float32Array, aabbMax: Float32Array,
    viewMatrix: Float32Array, projectionMatrix: Float32Array
  ): boolean {
    // 1. 将包围盒的8个顶点变换到NDC空间
    const corners: Float32Array[] = []
    const combinations = [
      [aabbMin[0], aabbMin[1], aabbMin[2]],
      [aabbMax[0], aabbMin[1], aabbMin[2]],
      [aabbMin[0], aabbMax[1], aabbMin[2]],
      [aabbMax[0], aabbMax[1], aabbMin[2]],
      [aabbMin[0], aabbMin[1], aabbMax[2]],
      [aabbMax[0], aabbMin[1], aabbMax[2]],
      [aabbMin[0], aabbMax[1], aabbMax[2]],
      [aabbMax[0], aabbMax[1], aabbMax[2]]
    ]

    let minNdcX = 1, maxNdcX = -1
    let minNdcY = 1, maxNdcY = -1
    let minDepth = 1

    const mvp = this.multiplyMat4(projectionMatrix, viewMatrix)

    for (const corner of combinations) {
      const ndc = this.projectPoint(mvp, new Float32Array(corner))
      if (ndc[0] < minNdcX) minNdcX = ndc[0]
      if (ndc[0] > maxNdcX) maxNdcX = ndc[0]
      if (ndc[1] < minNdcY) minNdcY = ndc[1]
      if (ndc[1] > maxNdcY) maxNdcY = ndc[1]
      if (ndc[2] < minDepth) minDepth = ndc[2]
    }

    // 2. 包围盒在相机后面，直接剔除
    if (maxNdcX < -1 || minNdcX > 1 || maxNdcY < -1 || minNdcY > 1) {
      return true
    }

    // 3. 裁剪到屏幕范围
    minNdcX = Math.max(-1, minNdcX)
    maxNdcX = Math.min(1, maxNdcX)
    minNdcY = Math.max(-1, minNdcY)
    maxNdcY = Math.min(1, maxNdcY)

    // 4. 映射到Hi-Z缓冲坐标
    const hiZMinX = Math.floor((minNdcX + 1) * 0.5 * this.hiZWidth)
    const hiZMaxX = Math.ceil((maxNdcX + 1) * 0.5 * this.hiZWidth)
    const hiZMinY = Math.floor((1 - maxNdcY) * 0.5 * this.hiZHeight)
    const hiZMaxY = Math.ceil((1 - minNdcY) * 0.5 * this.hiZHeight)

    // 5. 查询Hi-Z缓冲，如果物体的最近深度大于Hi-Z中的最远深度，则被遮挡
    for (let y = hiZMinY; y <= hiZMaxY && y < this.hiZHeight; y++) {
      for (let x = hiZMinX; x <= hiZMaxX && x < this.hiZWidth; x++) {
        if (x < 0 || y < 0) continue
        const hiZDepth = this.hiZBuffer[y * this.hiZWidth + x]
        if (minDepth >= hiZDepth) {
          return false // 至少有一个像素可见
        }
      }
    }

    return true // 被遮挡
  }

  // 投影点到NDC空间
  private projectPoint(mvp: Float32Array, point: Float32Array): Float32Array {
    const x = mvp[0]*point[0] + mvp[4]*point[1] + mvp[8]*point[2] + mvp[12]
    const y = mvp[1]*point[0] + mvp[5]*point[1] + mvp[9]*point[2] + mvp[13]
    const z = mvp[2]*point[0] + mvp[6]*point[1] + mvp[10]*point[2] + mvp[14]
    const w = mvp[3]*point[0] + mvp[7]*point[1] + mvp[11]*point[2] + mvp[15]

    if (Math.abs(w) < 1e-7) return new Float32Array([0, 0, 0])
    return new Float32Array([x/w, y/w, z/w])
  }

  // 矩阵乘法
  private multiplyMat4(a: Float32Array, b: Float32Array): Float32Array {
    const result = new Float32Array(16)
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        result[j * 4 + i] =
          a[i] * b[j * 4] + a[4 + i] * b[j * 4 + 1] +
          a[8 + i] * b[j * 4 + 2] + a[12 + i] * b[j * 4 + 3]
      }
    }
    return result
  }
}

3.5 完整示例：纹理压缩与Mipmap管理

// 纹理管理器：支持压缩纹理格式和Mipmap
export class TextureManager {
  private textures: Map<string, TextureResource> = new Map()
  private totalMemory: number = 0
  private maxMemory: number = 128 * 1024 * 1024 // 128MB上限

  // 加载纹理（自动选择压缩格式）
  async loadTexture(gl: WebGL2RenderingContext, path: string, options: TextureLoadOptions = {}): Promise<string> {
    const key = path

    // 已加载则直接返回
    if (this.textures.has(key)) {
      this.textures.get(key)!.refCount++
      return key
    }

    // 检查内存限制
    if (this.totalMemory >= this.maxMemory) {
      this.evictUnused() // 淘汰未使用的纹理
    }

    const texture = gl.createTexture()!
    gl.bindTexture(gl.TEXTURE_2D, texture)

    // 设置纹理参数
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, options.wrapS ?? gl.REPEAT)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, options.wrapT ?? gl.REPEAT)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
      options.generateMipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)

    // 根据设备支持选择压缩格式
    const compressedFormat = this.getSupportedCompressedFormat(gl)

    if (compressedFormat && path.endsWith('.ktx2')) {
      // 加载KTX2压缩纹理
      await this.loadCompressedTexture(gl, path, compressedFormat)
    } else {
      // 加载普通纹理
      await this.loadUncompressedTexture(gl, path)
    }

    // 生成Mipmap
    if (options.generateMipmap !== false) {
      gl.generateMipmap(gl.TEXTURE_2D)
    }

    // 记录纹理资源
    const estimatedSize = this.estimateTextureSize(options.width ?? 1024, options.height ?? 1024, compressedFormat)
    this.textures.set(key, {
      texture: texture,
      width: options.width ?? 1024,
      height: options.height ?? 1024,
      memorySize: estimatedSize,
      refCount: 1,
      lastUsed: Date.now(),
      compressed: !!compressedFormat
    })
    this.totalMemory += estimatedSize

    return key
  }

  // 获取设备支持的压缩纹理格式
  private getSupportedCompressedFormat(gl: WebGL2RenderingContext): string | null {
    // 优先级：ASTC > ETC2 > 无压缩
    const extensions = gl.getSupportedExtensions() || []

    if (extensions.includes('WEBGL_compressed_texture_astc')) {
      return 'ASTC'  // 最佳质量/压缩比
    }
    if (extensions.includes('WEBGL_compressed_texture_etc')) {
      return 'ETC2'  // OpenGL ES 3.0标准
    }

    return null
  }

  // 加载压缩纹理
  private async loadCompressedTexture(gl: WebGL2RenderingContext, path: string, format: string): Promise<void> {
    // 读取KTX2文件
    // const data = await this.readKTX2File(path)
    // 解析KTX2头部获取宽高、Mip级别数
    // 逐级上传压缩数据
    // for (let level = 0; level < mipLevels; level++) {
    //   gl.compressedTexImage2D(gl.TEXTURE_2D, level, internalFormat,
    //     width >> level, height >> level, 0, data[level])
    // }
  }

  // 加载非压缩纹理
  private async loadUncompressedTexture(gl: WebGL2RenderingContext, path: string): Promise<void> {
    // 使用Image对象加载
    // const image = new Image()
    // image.src = path
    // await image.decode()
    // gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
  }

  // 估算纹理内存大小
  private estimateTextureSize(width: number, height: number, format: string | null): number {
    let bytesPerPixel: number
    switch (format) {
      case 'ASTC': bytesPerPixel = 0.5; break  // ASTC 4x4 = 0.5 bytes/pixel
      case 'ETC2': bytesPerPixel = 0.5; break  // ETC2 = 0.5 bytes/pixel
      default: bytesPerPixel = 4; break         // RGBA8 = 4 bytes/pixel
    }

    // 计算所有Mip级别的总大小
    let totalPixels = 0
    let w = width, h = height
    while (w > 0 && h > 0) {
      totalPixels += w * h
      w = Math.floor(w / 2)
      h = Math.floor(h / 2)
    }

    return Math.round(totalPixels * bytesPerPixel)
  }

  // 淘汰未使用的纹理（LRU策略）
  private evictUnused(): void {
    const entries = Array.from(this.textures.entries())
      .filter(([_, res]) => res.refCount <= 0)
      .sort((a, b) => a[1].lastUsed - b[1].lastUsed)

    for (const [key, res] of entries) {
      if (this.totalMemory < this.maxMemory * 0.7) break
      // gl.deleteTexture(res.texture)  // 实际项目中需要GL上下文
      this.totalMemory -= res.memorySize
      this.textures.delete(key)
    }
  }

  // 释放纹理引用
  releaseTexture(key: string): void {
    const res = this.textures.get(key)
    if (res) {
      res.refCount--
      res.lastUsed = Date.now()
    }
  }

  // 获取当前总内存占用（MB）
  getTotalMemoryMB(): number {
    return this.totalMemory / (1024 * 1024)
  }
}

interface TextureResource {
  texture: WebGLTexture;
  width: number;
  height: number;
  memorySize: number;
  refCount: number;
  lastUsed: number;
  compressed: boolean;
}

interface TextureLoadOptions {
  width?: number;
  height?: number;
  wrapS?: number;
  wrapT?: number;
  generateMipmap?: boolean;
}

3.6 性能监控面板UI

将性能数据可视化展示：

@Entry
@Component
struct PerformanceMonitorPage {
  private profiler: RenderProfiler = new RenderProfiler()
  @State report: PerformanceReport = {
    fps: 0, minFps: 0, frameTime: 0,
    drawCalls: 0, triangles: 0, gpuMemoryMB: 0, bottleneck: ''
  }
  private updateTimer: number = -1

  aboutToAppear() {
    this.updateTimer = setInterval(() => {
      // 模拟帧更新
      this.profiler.onFrameBegin()
      // ... 渲染逻辑 ...
      this.profiler.onFrameEnd()
      this.report = this.profiler.getReport()
    }, 16)
  }

  aboutToDisappear() {
    if (this.updateTimer !== -1) clearInterval(this.updateTimer)
  }

  build() {
    Column() {
      // FPS指示器
      Row() {
        Text('📊 渲染性能监控')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFFFFF')
        Blank()
        // FPS颜色指示
        Circle()
          .width(12)
          .height(12)
          .fill(this.getFpsColor(this.report.fps))
      }
      .width('100%')
      .padding(12)
      .backgroundColor('#1A1A2E')

      // 性能指标卡片
      Grid() {
        GridItem() {
          this.MetricCard('FPS', `${this.report.fps.toFixed(1)}`, this.getFpsColor(this.report.fps))
        }
        GridItem() {
          this.MetricCard('最低FPS', `${this.report.minFps.toFixed(1)}`,
            this.report.minFps < 30 ? '#F44336' : '#4CAF50')
        }
        GridItem() {
          this.MetricCard('帧时间', `${this.report.frameTime.toFixed(1)}ms`,
            this.report.frameTime > 33 ? '#F44336' : '#4CAF50')
        }
        GridItem() {
          this.MetricCard('DrawCall', `${this.report.drawCalls}`,
            this.report.drawCalls > 200 ? '#FF9800' : '#4CAF50')
        }
        GridItem() {
          this.MetricCard('三角形', `${(this.report.triangles / 1000).toFixed(1)}K`,
            this.report.triangles > 100000 ? '#FF9800' : '#4CAF50')
        }
        GridItem() {
          this.MetricCard('GPU内存', `${this.report.gpuMemoryMB.toFixed(1)}MB`,
            this.report.gpuMemoryMB > 100 ? '#F44336' : '#4CAF50')
        }
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('100%')
      .height(200)
      .padding(8)

      // 瓶颈分析
      Row() {
        Text('🔍 瓶颈分析: ')
          .fontSize(13)
          .fontColor('#CCCCCC')
        Text(this.report.bottleneck)
          .fontSize(13)
          .fontColor('#FF9800')
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .padding({ left: 16, right: 16, top: 8, bottom: 8 })
      .backgroundColor('#16213E')

      // 优化建议
      Column() {
        Text('💡 优化建议')
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFFFFF')
          .margin({ bottom: 8 })

        ForEach(this.getOptimizationSuggestions(), (suggestion: string) => {
          Row() {
            Text('•')
              .fontSize(12)
              .fontColor('#6C63FF')
              .margin({ right: 6 })
            Text(suggestion)
              .fontSize(12)
              .fontColor('#CCCCCC')
          }
          .margin({ bottom: 4 })
        }, (_: string, index: number) => `${index}`)
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#16213E')
      .borderRadius(8)
      .margin({ top: 8, left: 8, right: 8 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#0F0F23')
  }

  // 指标卡片
  @Builder
  MetricCard(label: string, value: string, color: string) {
    Column() {
      Text(label)
        .fontSize(10)
        .fontColor('#888888')
      Text(value)
        .fontSize(16)
        .fontColor(color)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#1A1A2E')
    .borderRadius(8)
    .margin(4)
  }

  // FPS颜色映射
  private getFpsColor(fps: number): string {
    if (fps >= 55) return '#4CAF50'  // 绿色：流畅
    if (fps >= 30) return '#FF9800'  // 橙色：一般
    return '#F44336'                  // 红色：卡顿
  }

  // 生成优化建议
  private getOptimizationSuggestions(): string[] {
    const suggestions: string[] = []

    if (this.report.drawCalls > 200) {
      suggestions.push('DrawCall过多，建议使用静态批处理或实例化渲染合并相同材质的网格')
    }
    if (this.report.triangles > 100000) {
      suggestions.push('三角形数量过多，建议使用LOD技术为远处物体使用低精度模型')
    }
    if (this.report.gpuMemoryMB > 100) {
      suggestions.push('GPU内存占用过高，建议使用纹理压缩（ASTC/ETC2）和合理的Mipmap策略')
    }
    if (this.report.fps < 30) {
      suggestions.push('帧率过低，建议实施遮挡剔除跳过不可见物体的渲染')
    }
    if (this.report.frameTime > 33) {
      suggestions.push('帧时间过长，建议检查是否有频繁的glBufferData调用导致CPU-GPU同步等待')
    }

    if (suggestions.length === 0) {
      suggestions.push('当前性能表现良好，无需优化')
    }

    return suggestions
  }
}

四、踩坑与注意事项

1. 静态批处理的内存代价

静态批处理通过合并网格减少DrawCall，但代价是内存增加。因为每个物体的顶点数据都要从模型空间变换到世界空间，导致共享网格的实例无法复用顶点数据。100个相同的箱子，批处理后顶点数据膨胀100倍。建议：对实例化物体使用GPU Instancing而非静态批处理。

2. LOD切换的视觉跳变

LOD级别切换时，如果相邻级别的模型差异太大，会出现明显的"跳变"（Pop-in）。解决方案：使用Geomorphing技术，在两个LOD级别之间做顶点位置的渐变插值，让切换过程平滑过渡。或者使用Dithered LOD过渡，通过噪声抖动在两帧之间混合。

3. 遮挡剔除的假阳性

软件遮挡剔除可能出现"假阳性"——物体实际上可见但被误判为遮挡。这通常是因为Hi-Z缓冲的分辨率太低，小物体在Hi-Z中只占不到一个像素。解决方案：对重要物体（如主角、关键道具）禁用遮挡剔除，或者使用更高分辨率的Hi-Z缓冲。

4. Mipmap的内存开销

Mipmap会让纹理的内存占用增加约33%（1 + 1/4 + 1/16 + … ≈ 4/3）。对于大量小纹理（如UI贴图、图标），Mipmap的内存开销可能得不偿失。建议：只对3D场景中使用的纹理生成Mipmap，UI纹理关闭Mipmap。

5. glBufferData的隐式同步

调用glBufferData上传数据时，如果GPU正在使用之前的缓冲数据，CPU会隐式等待GPU完成。这种同步等待可能耗时数毫秒，是帧时间突刺的常见原因。解决方案：使用glBufferSubData更新已有缓冲的部分数据，或者使用持久映射缓冲（Persistent Mapped Buffer）避免同步。

6. 纹理压缩格式的兼容性

ASTC格式在部分老设备上不支持，ETC2在OpenGL ES 3.0设备上普遍支持但不支持Alpha通道的压缩（ETC2 RGBA质量较差）。建议：提供多种压缩格式的纹理包，运行时根据设备能力选择最佳格式。或者使用KTX2容器格式，它可以在一个文件中包含多种压缩格式。

7. 过度优化的陷阱

性能优化不是免费的——每种优化都增加了代码复杂度。静态批处理需要管理合并后的缓冲，LOD需要维护多级模型，遮挡剔除需要构建Hi-Z。如果当前帧率已经达标，不要过度优化。过早优化是万恶之源，先保证功能正确，再在性能不达标时针对性优化。

五、HarmonyOS 6适配说明

API差异

行为变更

• 系统性能分析器：HarmonyOS 6.0新增@ohos.graphicsProfiler模块，可以实时获取GPU利用率、DrawCall数量、帧时间等数据，无需手动实现
• GPU Instancing支持：6.0支持OpenGL ES 3.1的实例化渲染，可以一个DrawCall绘制大量相同几何体的不同实例
• FramePacer帧率控制：6.0新增FramePacerAPI，可以设定目标帧率（30/60/120fps），系统自动调节渲染频率以节省功耗

适配代码

// HarmonyOS 6.0 使用系统性能分析器
import { graphicsProfiler } from '@ohos.graphicsProfiler'

@Entry
@Component
struct PerformanceMonitor6Page {
  @State perfData: graphicsProfiler.FrameStats | null = null
  private profiler: graphicsProfiler.GraphicsProfiler | null = null

  async aboutToAppear() {
    // 获取系统性能分析器
    this.profiler = graphicsProfiler.createProfiler({
      samplingInterval: 100, // 100ms采样间隔
      metrics: [
        graphicsProfiler.Metric.FPS,
        graphicsProfiler.Metric.FRAME_TIME,
        graphicsProfiler.Metric.DRAW_CALLS,
        graphicsProfiler.Metric.TRIANGLES,
        graphicsProfiler.Metric.GPU_MEMORY,
        graphicsProfiler.Metric.GPU_UTILIZATION
      ]
    })

    // 监听性能数据
    this.profiler.onFrameStats((stats: graphicsProfiler.FrameStats) => {
      this.perfData = stats
    })

    // 开始采集
    this.profiler.start()
  }

  aboutToDisappear() {
    this.profiler?.stop()
  }

  build() {
    Column() {
      if (this.perfData) {
        // 使用系统采集的性能数据
        Text(`FPS: ${this.perfData.fps.toFixed(1)}`)
          .fontSize(16)
          .fontColor('#FFFFFF')
        Text(`帧时间: ${this.perfData.frameTime.toFixed(1)}ms`)
          .fontSize(14)
          .fontColor('#CCCCCC')
        Text(`DrawCall: ${this.perfData.drawCalls}`)
          .fontSize(14)
          .fontColor('#CCCCCC')
        Text(`三角形: ${this.perfData.triangles}`)
          .fontSize(14)
          .fontColor('#CCCCCC')
        Text(`GPU利用率: ${this.perfData.gpuUtilization.toFixed(1)}%`)
          .fontSize(14)
          .fontColor(this.perfData.gpuUtilization > 90 ? '#F44336' : '#4CAF50')
        Text(`GPU内存: ${(this.perfData.gpuMemory / 1024 / 1024).toFixed(1)}MB`)
          .fontSize(14)
          .fontColor('#CCCCCC')
      }
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#0F0F23')
  }
}

// HarmonyOS 6.0 使用FramePacer控制帧率
import { graphicsProfiler } from '@ohos.graphicsProfiler'

// 在渲染循环中使用FramePacer
const framePacer = graphicsProfiler.createFramePacer({
  targetFps: 60,          // 目标60fps
  adaptiveMode: true,     // 自适应模式：负载高时自动降帧
  minFps: 30,             // 最低不低于30fps
  powerSaveMode: false    // 省电模式
})

// 渲染循环
function renderLoop(): void {
  framePacer.beginFrame()

  // ... 渲染逻辑 ...

  framePacer.endFrame()

  // FramePacer会根据当前负载决定是否跳帧
  // 如果GPU负载过高，会自动跳过部分帧以保持稳定
  requestAnimationFrame(renderLoop)
}

六、总结

3D渲染性能优化是一个系统工程，不是靠一两个技巧就能搞定的。它需要你从全局视角理解渲染管线的每个环节，找到真正的瓶颈所在，然后对症下药。

DrawCall优化是移动端最常见的CPU瓶颈，静态批处理和GPU Instancing是两大核心手段。LOD技术通过为不同距离的物体使用不同精度的模型，在视觉质量和性能之间取得平衡。遮挡剔除跳过不可见物体的渲染，在复杂室内场景中效果尤为显著。纹理压缩与Mipmap减少了GPU的纹理带宽压力，ASTC格式在质量和压缩比之间取得了最佳平衡。

优化的黄金法则是：先测量，再优化，后验证。没有数据支撑的优化是盲目的，可能花了大量精力优化了不是瓶颈的地方。使用性能监控工具定位瓶颈，针对性优化后再测量效果，形成"测量→优化→验证"的闭环。

最后记住一点：优化是有代价的。每种优化都增加了代码复杂度和维护成本。如果当前性能已经达标，不要过度优化。让游戏跑得快很重要，但让代码跑得稳同样重要。