WebGL/WebGPU fallback 전략

WebGPU는 강력하지만 모든 환경에서 항상 사용할 수 있는 것은 아닙니다. 에디터를 실제 제품처럼 생각한다면 fallback 전략이 필요합니다.

feature detection으로 시작한다

먼저 WebGPU 사용 가능 여부를 확인합니다.

const hasWebGPU = "gpu" in navigator;

adapter 요청이 실패할 수도 있으므로 초기화 단계도 실패 가능하게 설계합니다.

try WebGPU
fallback to WebGL
fallback to Canvas/DOM debug

renderer 선택은 editor core 밖에서 한다

editor core가 직접 WebGPU를 확인하면 결합이 생깁니다. renderer factory를 따로 두는 편이 낫습니다.

const renderer = await createBestRenderer(canvas);
editor.attachRenderer(renderer);

이렇게 하면 core는 renderer interface만 압니다.

capability 차이를 드러낸다

모든 renderer가 같은 기능을 지원하지 않을 수 있습니다. 예를 들어 WebGPU renderer는 특정 effect를 지원하고, WebGL renderer는 fallback으로 단순 shadow만 지원할 수 있습니다.

renderer.capabilities
  maxTextureSize
  supportsAdvancedBlur
  supportsGpuPicking

기능 차이를 조용히 숨기기보다 명시적으로 다루는 것이 좋습니다.

오늘의 핵심

fallback은 실패 후 대충 처리하는 코드가 아니라 renderer architecture의 일부입니다.

feature detect
renderer factory
shared editor core
capability-aware UI

이 구조가 있어야 WebGL 안정성과 WebGPU 확장성을 함께 가져갈 수 있습니다.