vgpu от Vercel Labs: кросс-платформенная библиотека для WebGPU с типизированными шейдерами WGSL

Появление стандарта WebGPU открыло браузерам прямой доступ к современной графической архитектуре и параллельным вычислениям на видеокарте. Однако практическое освоение нового API разработчиками натолкнулось на высокий порог входа. Чтобы вывести на экран простейший шейдерный эффект или рассчитать цветовую сетку, нативному WebGPU требуется более трехсот строк низкоуровневого кода: объявление дескрипторов конвейеров, ручная привязка буферов (bind groups), настройка цепочек переключения кадров и управление форматами текстур.

Исследовательская лаборатория Vercel Labs представила открытую библиотеку vgpu под лицензией MIT. Этот проект превращает многословный императивный интерфейс WebGPU в компактный, строго типизированный инструментарий для TypeScript, сохраняя при этом аппаратную производительность видеочипа и устраняя скрытые утечки памяти.

Строгая типизация шейдеров и отказ от неявных состояний

Архитектура vgpu опирается на два ключевых принципа: абсолютную типобезопасность на этапе сборки и полное отсутствие скрытого глобального состояния.

В большинстве существующих графических библиотек шейдерный код передается в виде обычных строковых литералов. Если программист меняет имя переменной или тип структуры внутри шейдера, TypeScript не способен заметить несоответствие, и ошибка проявляется только в рантайме в виде темного экрана.

В vgpu файлы шейдерного языка WGSL (WebGPU Shading Language) импортируются непосредственно в код приложения как стандартные модули. Специализированный плагин компилятора выполняет рефлексию синтаксического дерева шейдера во время сборки и автоматически генерирует типы для входных структур, uniform-буферов и текстурных слотов.

Кроме того, библиотека исключает неявные синглтоны: все операции принимают явный дескриптор контекста gpu = await init(). Это предотвращает распространенные утечки видеопамяти при повторном монтировании компонентов в React или Next.js:

// shader.wgsl — строго типизированный шейдер рендеринга WGSL
struct Uniforms {
  time: f32,
  resolution: vec2<f32>,
}

@group(0) @binding(0) var<uniform> u: Uniforms;

@vertex
fn vs_main(@builtin(vertex_index) index: u32) -> @builtin(position) vec4<f32> {
  var pos = array<vec2<f32>, 3>(
    vec2<f32>(-1.0, -1.0),
    vec2<f32>(3.0, -1.0),
    vec2<f32>(-1.0, 3.0)
  );
  return vec4<f32>(pos[index], 0.0, 1.0);
}

@fragment
fn fs_main(@builtin(position) coord: vec4<f32>) -> @location(0) vec4<f32> {
  let color = 0.5 + 0.5 * cos(u.time + coord.xyx / u.resolution.x + vec3<f32>(0.0, 2.0, 4.0));
  return vec4<f32>(color, 1.0);
}

Ниже показано подключение типизированного шейдера и запуск кадрового цикла через функциональные проходы frame:

// main.ts — инициализация контекста и запуск кадрового цикла
import { init, frame, surface } from 'vgpu';
import shader from './shader.wgsl';

async function bootstrap() {
  const canvas = document.querySelector('canvas')!;
  // Явная инициализация контекста без глобального состояния
  const gpu = await init();
  const target = surface(gpu, canvas);

  const startTime = performance.now();

  function render() {
    const elapsed = (performance.now() - startTime) / 1000;

    // Декларативный проход рендеринга кадра
    frame(gpu, (pass) => {
      pass.draw(target, shader, {
        uniforms: {
          time: elapsed,
          resolution: [canvas.width, canvas.height],
        },
      });
    });

    requestAnimationFrame(render);
  }

  render();
}

bootstrap();

Кросс-рантайм тестирование и запуск без браузера

Вторая важная инженерная особенность vgpu — переносимость между средами выполнения. Один и тот же графический конвейер работает:

1. В браузере пользователя через стандартный системный интерфейс navigator.gpu;
2. На сервере Node.js без графической оболочки (headless) через нативный движок Dawn (vgpu/node);
3. В юнит-тестах с использованием детерминированного эмулятора (vgpu/mock).

Возможность рендерить шейдеры в безголовом Node.js позволяет разработчикам внедрять визуальное регрессионное тестирование графических эффектов непосредственно в пайплайны GitHub Actions, сравнивая хэши сгенерированных пикселей без запуска тяжелого браузера.

При этом полный конвейер полноэкранного эффекта укладывается в жесткий бюджет 25 КБ gzipped, что делает vgpu идеальным выбором для интерактивных лендингов и генеративной графики.

Инженерный вердикт

Библиотека vgpu не стремится заменить масштабные 3D-движки вроде Three.js или Babylon.js с их сложными сценами и скелетной анимацией. Ее ниша — легкие, быстрые и надежные шейдерные визуализации, фоновые интерактивные эффекты и интерфейсные анимации нового поколения. Благодаря строгой типизации WGSL и поддержке серверного тестирования vgpu делает WebGPU по-настоящему доступным для промышленной веб-разработки.