GPU memory와 texture size 제한

큰 이미지를 많이 올리는 editor는 GPU memory 문제를 피할 수 없습니다. texture size와 atlas budget을 설계해야 합니다.

texture budget을 검사하는 코드

큰 이미지를 그대로 올리지 말고, GPU 제한과 앱 budget 안으로 줄입니다.

function fitTextureSize(image, limits) {
  const maxSize = Math.min(limits.maxTextureSize, limits.appMaxTextureSize);
  const scale = Math.min(1, maxSize / image.width, maxSize / image.height);

  return {
    width: Math.max(1, Math.floor(image.width * scale)),
    height: Math.max(1, Math.floor(image.height * scale)),
    scale
  };
}

function shouldEvictTexture(texture, frame, budget) {
  const idleFrames = frame - texture.lastUsedFrame;
  return (
    idleFrames > budget.maxIdleFrames ||
    budget.currentBytes > budget.maxBytes
  );
}

제한 정책

max texture size
image downscale
atlas page size
cache eviction
context recovery

브라우저가 모든 GPU memory 상황을 친절하게 알려주지는 않습니다. 갑자기 context lost로 나타날 수도 있습니다.

texture allocation을 추적한다

class TextureBudgetTracker {
  constructor(maxBytes) {
    this.maxBytes = maxBytes;
    this.currentBytes = 0;
  }

  allocate(texture, width, height) {
    const bytes = width * height * 4;
    this.currentBytes += bytes;
    texture.__estimatedBytes = bytes;
    return this.currentBytes <= this.maxBytes;
  }

  release(texture) {
    this.currentBytes -= texture.__estimatedBytes ?? 0;
    texture.__estimatedBytes = 0;
  }
}

정확한 GPU 메모리를 브라우저가 항상 알려주지는 않으므로 앱 내부에서 보수적인 추정치를 관리합니다. 이 숫자가 넘으면 downscale, eviction, warning 중 하나로 이어져야 합니다.

오늘의 핵심

asset pipeline에는 GPU budget이 있어야 합니다. 무한 canvas라고 resource도 무한은 아닙니다.