WebGPU или WebGL: будущее графики в браузере глазами разработчика

Сегодня хочу разбрать такую тему, чем WebGPU отличается от WebGL, как перейти на новую технологию и когда это стоит делать. Я покажу примеры кода, сравню производительность и дам рекомендации, основанные на реальных проектах.

Почему WebGPU это не просто «еще один API»?

WebGL стал революцией в 2011, позволив запускать 3D-графику прямо в браузере. Но за 12 лет его limitations стали очевидны:

• Ограниченный доступ к возможностям современных GPU
• Высокий уровень абстракции, мешающий оптимизациям
• Нет поддержки параллельных вычислений

WebGPU решает эти проблемы, предоставляя:

1. Низкоуровневый доступ к GPU
2. Поддержку многоядерных вычислений
3. Автоматическую управление памятью
4. Современные функции вроде ray tracing (через расширения)

Пример из практики: в нашем проекте визуализации нейросети переход на WebGPU дал 3x прирост FPS при рендеринге 500k частиц.

Основы WebGL

Для понимания различий вспомним базовый пример WebGL.

Инициализация контекста:

<canvas id="glCanvas"></canvas>
<script>
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
</script>

Простой шейдер:

// Vertex Shader
attribute vec4 aPosition;
void main() {
  gl_Position = aPosition;
}

// Fragment Shader
void main() {
  gl_FragColor = vec4(1.0, 0.5, 0.2, 1.0);
}

Отрисовка треугольника:

const vertices = new Float32Array([
   0.0,  0.5, 0.0,
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0
]);

// Создание буфера, привязка данных и отрисовка
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

gl.drawArrays(gl.TRIANGLES, 0, 3);

Это классический подход, но что не так?

1. Фиксированный конвейер рендеринга
2. Ручное управление ресурсами
3. Нет поддержки compute shaders

WebGPU: современный подход шаг за шагом

1. Инициализация контекста

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('canvas');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });

Уже здесь видно ключевые отличия:

• Асинхронная инициализация
• Явный выбор адаптера (например, дискретной GPU)
• Настройка формата вывода

2. Создание шейдеров

// Vertex Shader
@vertex
fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> @builtin(position) vec4f {
  const pos = array(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5)
  );
  return vec4f(pos[in_vertex_index], 0.0, 1.0);
}

// Fragment Shader
@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(1.0, 0.5, 0.2, 1.0);
}

Особенности WGSL (WebGPU Shading Language):

• Современный синтаксис, похожий на Rust
• Строгая типизация
• Явные аннотации входов/выходов

3. Настройка конвейера рендеринга

const pipeline = device.createRenderPipeline({
  vertex: {
    module: device.createShaderModule({ code: vs }),
    entryPoint: 'vs_main'
  },
  fragment: {
    module: device.createShaderModule({ code: fs }),
    entryPoint: 'fs_main',
    targets: [{ format }]
  },
  primitive: { topology: 'triangle-list' }
});

Главное отличие от WebGL: Конвейеры создаются явно и переиспользуются, что дает:

• Предсказуемую производительность
• Возможность предварительной компиляции
• Лучшую оптимизацию драйвером

Сравнение производительности: WebGL vs WebGPU

Для теста использовалась сцена с 1 млн. анимированных частиц.

Выводы:

• WebGPU требует больше времени на инициализацию
• Значительно эффективнее использует ресурсы
• Лучше масштабируется для сложных сцен

Когда использовать WebGPU?

1. Научная визуализация

Пример: рендеринг 3D-моделей ДНК с динамическим освещением. WebGPU позволил обрабатывать 2 млн. полигонов в реальном времени.

2. Машинное обучение в браузере

Использование compute shaders для предобработки данных:

@group(0) @binding(0)
var<storage, read_write> data: array<f32>;

@compute @workgroup_size(64)
fn cs_main(@builtin(global_invocation_id) id: vec3<u32>) {
  let idx = id.x;
  data[idx] = log(data[idx]);
}

3. AAA-игры в браузере

Поддержка продвинутых эффектов:

• Ray traced отражения
• Физически корректное освещение (PBR)
• Тесселяция на GPU

Переход с WebGL на WebGPU

1. Анализ возможностей:
   • Проверьте поддержку браузеров через navigator.gpu
   • Используйте полифиллы для тестирования (например, Dawn)
2. Переработка шейдеров:
   • Конвертируйте GLSL в WGSL
   • Переработайте систему материалов
3. Оптимизация ресурсов:
   • Объединяйте буферы
   • Используйте группировку ресурсов (bind groups)

Пример перехода uniform-переменных:

WebGL:

uniform mat4 uProjection;

WebGPU:

struct Uniforms {
  projection: mat4x4<f32>
}

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

Рекомендации для разработчиков

1. Начните с малого. Переведите на WebGPU отдельные компоненты, а не весь проект сразу.
2. Используйте фреймворки:
   • Babylon.js — полная поддержка WebGPU
   • Three.js — экспериментальная интеграция
3. Профилируйте всё:
   • Используйте Chrome DevTools’ WebGPU Inspector
   • Анализируйте использование памяти через device.popErrorScope()
4. Обрабатывайте ошибки правильно:

device.pushErrorScope('validation');
// ... ваш код ...
const error = await device.popErrorScope();
if (error) {
  console.error('GPU Error:', error);
}

Будущее WebGPU

1. Поддержка Ray Tracing, уже в экспериментальном статусе в Chrome 118+
2. ML-ускорение интеграция с WebNN
3. Кросс-платформенность, единый код для веба.

Стоит ли переходить сейчас?

Используйте WebGL если:

• Проект должен работать везде, включая старые устройства
• У вас простая 2D-графика
• Нет ресурсов на глубокое изучение новых API

Выбирайте WebGPU для:

• Сложных 3D-визуализаций
• Приложений с GPU-вычислениями
• Проектов «на вырост»

Для новых проектов начинаю с WebGPU, используя fallback на WebGL через фреймворки. Это требует усилий, но окупается производительностью и будущей-proof архитектурой.

Эта статья ваш стартовый набор для входа в мир современной браузерной графики.