《Cocos 游戏开发高级编程》7.2 纹理、显存与资源预算

// 来源：@cocos/creator-types@3.8.8, engine/cc.d.ts
// 资源侧 PixelFormat（节选）
RGB565 = 47,
RGB5A1 = 49,
RGBA4444 = 50,
RGB888 = 24,
// GPU 侧 gfx.Format（节选）
RGB8 = 24,
RGBA8 = 35,
ETC2_RGB8 = 73,
ASTC_RGBA_4X4 = 89,

// mini2d/texture/vram.ts —— 纯 TS，无任何 cc 依赖
export interface FormatInfo {
  name: string;
  bitsPerPixel: number;
  /** 块压缩的块边长（像素）；非压缩格式为 1 */
  blockSize: number;
}

export const FORMATS: Record<string, FormatInfo> = {
  rgba8888: { name: 'RGBA8888', bitsPerPixel: 32, blockSize: 1 },
  rgb888: { name: 'RGB888', bitsPerPixel: 24, blockSize: 1 },
  rgb565: { name: 'RGB565', bitsPerPixel: 16, blockSize: 1 },
  rgba4444: { name: 'RGBA4444', bitsPerPixel: 16, blockSize: 1 },
  etc2_rgb: { name: 'ETC2_RGB', bitsPerPixel: 4, blockSize: 4 },
  etc2_rgba: { name: 'ETC2_RGBA', bitsPerPixel: 8, blockSize: 4 },
  astc_4x4: { name: 'ASTC_4x4', bitsPerPixel: 8, blockSize: 4 },
  astc_6x6: { name: 'ASTC_6x6', bitsPerPixel: 3.56, blockSize: 6 },
  pvrtc_4bpp: { name: 'PVRTC_4bpp', bitsPerPixel: 4, blockSize: 4 },
};

export interface VramOptions {
  mipmaps?: boolean;
  powerOfTwo?: boolean;
}

function nextPow2(n: number): number {
  let p = 1;
  while (p < n) {
    p *= 2;
  }
  return p;
}

/** 返回该纹理占用的显存字节数（估算，偏保守） */
export function estimateVram(
  width: number,
  height: number,
  format: string,
  options: VramOptions = {},
): number {
  const info = FORMATS[format];
  if (!info) {
    throw new Error(`unknown format: ${format}`);
  }
  let w = width;
  let h = height;
  if (options.powerOfTwo) {
    w = nextPow2(w);
    h = nextPow2(h);
  }
  const blocksX = Math.ceil(w / info.blockSize);
  const blocksY = Math.ceil(h / info.blockSize);
  const bitsPerBlock = info.bitsPerPixel * info.blockSize * info.blockSize;
  let bytes = Math.ceil((blocksX * blocksY * bitsPerBlock) / 8);
  if (options.mipmaps) {
    bytes = Math.round((bytes * 4) / 3);
  }
  return bytes;
}

export function formatVram(bytes: number): string {
  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
}

import { describe, expect, it } from 'vitest';
import { estimateVram, formatVram } from './vram';

describe('estimateVram', () => {
  it('RGBA8888 1024² 恰好 4 MB', () => {
    expect(estimateVram(1024, 1024, 'rgba8888')).toBe(4 * 1024 * 1024);
  });

  it('ETC2_RGB 约为 RGBA8888 的 1/8', () => {
    const raw = estimateVram(1024, 1024, 'rgba8888');
    const etc2 = estimateVram(1024, 1024, 'etc2_rgb');
    expect(etc2).toBe(512 * 1024);
    expect(raw / etc2).toBe(8);
  });

  it('块压缩按块向上取整：1025 与 1028 同价', () => {
    const a = estimateVram(1025, 1025, 'etc2_rgb');
    const b = estimateVram(1028, 1028, 'etc2_rgb');
    expect(a).toBe(b);
    expect(a).toBeGreaterThan(estimateVram(1024, 1024, 'etc2_rgb'));
  });

  it('mipmap 约增加 1/3', () => {
    const base = estimateVram(512, 512, 'rgba8888');
    const mip = estimateVram(512, 512, 'rgba8888', { mipmaps: true });
    expect(mip).toBe(Math.round((base * 4) / 3));
  });

  it('ASTC_6x6 1024² 约 0.45 MB', () => {
    expect(formatVram(estimateVram(1024, 1024, 'astc_6x6'))).toBe('0.45 MB');
  });
});

import { _decorator, Component, profiler, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('VramWatch')
export class VramWatch extends Component {
  @property
  budgetMb = 64;

  update(): void {
    const stats = profiler.stats;
    if (!stats) return;
    const texMb = stats.textureMemory.counter.value;
    if (texMb > this.budgetMb) {
      console.warn(`[vram] texture ${texMb.toFixed(1)}MB > budget ${this.budgetMb}MB`);
    }
  }

  /** 设备侧纹理字节数；原生端与 Web 端都可用 */
  deviceTextureBytes(): number {
    const device = director.root?.device;
    return device ? device.memoryStatus.textureSize : 0;
  }
}

{
  "ver": "1.0.25",
  "importer": "texture",
  "uuid": "a1b2c3d4-0000-4000-8000-000000000001",
  "userData": {
    "type": "sprite-frame",
    "fixAlphaTransparencyArtifacts": true,
    "compressSettings": {
      "android": { "format": "etc2", "quality": 3 },
      "ios": { "format": "astc_6x6", "quality": 3 },
      "web": { "format": "rgba8888" }
    }
  }
}