Firefox 차이와 fallback 정책

브라우저마다 GPU API 지원과 구현 상태가 다릅니다. 그래서 브라우저별 if문보다 capability table이 더 오래 갑니다.

renderer factory와 fallback 코드

fallback은 예외 처리를 숨기는 것이 아니라, 명시적으로 renderer 선택 결과를 남기는 과정입니다.

async function createRendererWithFallback(canvas) {
  const attempts = [
    ["webgpu", () => createWebGpuRenderer(canvas)],
    ["webgl2", () => createWebGl2Renderer(canvas)],
    ["canvas2d", () => createCanvas2dRenderer(canvas)]
  ];

  const failures = [];
  for (const [name, create] of attempts) {
    try {
      const renderer = await create();
      return { renderer, capability: { active: name, failures } };
    } catch (error) {
      failures.push({ renderer: name, message: error.message });
    }
  }

  throw new Error("No renderer backend is available.");
}

fallback 정책

try WebGPU
fallback WebGL2
fallback Canvas/DOM preview
report capability

사용자가 같은 문서를 열 수는 있어야 합니다. 다만 일부 효과나 고급 기능은 제한될 수 있습니다.

제한 기능을 문서화된 capability로 만든다

function rendererFeatureMatrix(activeRenderer) {
  const base = {
    rectangles: true,
    images: true,
    textPreview: true,
    blendModes: false,
    largeBlur: false,
    gpuPicking: false
  };

  if (activeRenderer === "webgl2") {
    return { ...base, blendModes: true, gpuPicking: true };
  }

  if (activeRenderer === "webgpu") {
    return { ...base, blendModes: true, largeBlur: true, gpuPicking: true };
  }

  return base;
}

fallback renderer에서는 기능이 줄어들 수 있습니다. 이 차이를 코드의 feature matrix로 명시하면 UI, export, 테스트가 같은 기준을 공유할 수 있습니다.

오늘의 핵심

fallback은 몰래 낮추는 것이 아닙니다. 현재 renderer와 제한 기능을 UI/debug panel에 보고해야 합니다.