Первый кадр на WebGPU пришлось ждать почти 20 секунд

В веб-проекте Cerebrium одна область рендеринга содержала несколько окружений со своими материалами, частицами, светом и постобработкой. Перед стартом Three.js обходил графы узлов на TSL, языке описания шейдеров Three.js, собирал из них шейдеры и компилировал графические конвейеры. На эталонной машине эта подготовка занимала почти 20 секунд, хотя после запуска производительность рендеринга проблемой не была.

Проверяйте два этапа отдельно: скорость уже запущенного рендера и время до первого кадра. В насыщенной сцене стоит отдельно профилировать сборку шейдеров и создание конвейеров до показа изображения.

В разборе Codrops есть весь путь выбора между WebGPU и WebGL, устройство нескольких окружений в одном холсте и объяснение, почему более чистой архитектуры оказалось недостаточно.