WebGPU

WebGPU — это современный кроссплатформенный программный интерфейс (API) для взаимодействия с графическими и вычислительными возможностями графических процессоров (GPU). Разрабатывается консорциумом W3C (World Wide Web Consortium) при участии компаний Apple, Google, Mozilla и Microsoft как преемник устаревшего API WebGL. WebGPU предоставляет низкоуровневый доступ к GPU, позволяя выполнять высокопроизводительные вычисления (GPGPU) и рендеринг 2D/3D-графики непосредственно в веб-браузере, без установки дополнительных плагинов.

История

Разработка WebGPU началась в 2016 году как ответ на растущие потребности веб-приложений в производительности, недоступной для WebGL (основанного на OpenGL ES 2.0/3.0). Основные цели: снижение накладных расходов на вызовы API, поддержка современных архитектур GPU (DirectX 12, Vulkan, Metal) и обеспечение лучшей работы с многоядерными процессорами.

Первая рабочая черновая версия спецификации была опубликована в 2019 году. В 2021 году WebGPU появилась в экспериментальных сборках браузеров Chrome и Firefox. В 2023 году Chrome 113 включил поддержку WebGPU по умолчанию, а в 2024 году — Safari 16.4 и Firefox 127. На 2025 год WebGPU поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Safari) на десктопах и мобильных устройствах, хотя степень реализации отдельных функций может различаться.

Архитектура и ключевые концепции

WebGPU спроектирована как низкоуровневый API, предоставляющий прямой контроль над GPU, но с абстракцией, обеспечивающей безопасность и кроссплатформенность. Основные компоненты:

Устройство (Device)

Основной объект, представляющий логическое соединение с GPU. Через устройство создаются все остальные ресурсы. Одно приложение может иметь несколько устройств, но обычно используется одно.

Очередь (Queue)

Поток команд, отправляемых на GPU. WebGPU использует одну очередь для всех операций (рендеринг, вычисления, копирование). Команды группируются в командные буферы (Command Buffer).

Шейдеры (Shaders)

Программы, выполняемые на GPU. WebGPU использует язык WGSL (WebGPU Shading Language), основанный на синтаксисе Rust. Шейдеры делятся на:

• Вершинные (Vertex) — обрабатывают вершины геометрии.
• Фрагментные (Fragment) — определяют цвет пикселей.
• Вычислительные (Compute) — выполняют произвольные вычисления (не связанные с графикой).

Пайплайны (Pipelines)

Наборы состояний, определяющие, как GPU обрабатывает данные. Различают:

• Рендеринг-пайплайн (Render Pipeline) — для отрисовки графики (шейдеры, настройки растеризации, смешивания).
• Вычислительный пайплайн (Compute Pipeline) — для вычислительных задач.

Ресурсы

• Буферы (Buffers) — массивы данных (вершины, индексы, константы).
• Текстуры (Textures) — изображения, используемые как входные данные или целевые объекты рендеринга.
• Сэмплеры (Samplers) — настройки фильтрации и адресации текстур.
• Биндинговые группы (Bind Groups) — наборы ресурсов, привязываемые к шейдерам.

Проходы (Passes)

• Render Pass — последовательность команд рендеринга, объединённых в один проход.
• Compute Pass — последовательность вычислительных команд.

Отличия от WebGL

Применение

WebGPU используется в различных областях, где требуется высокая производительность GPU в браузере:

Веб-игры

Современные браузерные игры (например, AAA-проекты, портированные с Unity/Unreal Engine) используют WebGPU для рендеринга сложных сцен с высоким FPS. Примеры: Baldur’s Gate 3 (веб-версия), Doom Eternal (через WebGPU-порт).

Научные вычисления

WebGPU позволяет выполнять симуляции физики, обработку изображений, машинное обучение (например, библиотека TensorFlow.js использует WebGPU для ускорения нейросетей). Примеры: вычислительная гидродинамика в браузере, анализ геномных данных.

3D-визуализация

Инструменты для архитектурной визуализации, CAD-систем и медицинской визуализации (например, Autodesk Viewer, Three.js с бэкендом WebGPU).

Редакторы и инструменты

Веб-версии графических редакторов (например, Figma, Photopea) используют WebGPU для ускорения фильтров и эффектов.

Пример кода (минимальный рендеринг треугольника)

```javascript // Инициализация const adapter = await navigator.gpu.requestAdapter(); const device = await adapter.requestDevice();

// Создание буфера вершин const vertices = new Float32Array([ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]); const vertexBuffer = device.createBuffer({ size: vertices.byteLength, usage: GPUBufferUsage.VERTEX, mappedAtCreation: true }); new Float32Array(vertexBuffer.getMappedRange()).set(vertices); vertexBuffer.unmap();

// Шейдеры (WGSL) const shaderCode = @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4<f32> { let positions = array<vec2<f32>, 3>( vec2(0.0, 0.5), vec2(-0.5, -0.5), vec2(0.5, -0.5) ); return vec4(positions[i], 0.0, 1.0); } @fragment fn fs() -> @location(0) vec4<f32> { return vec4(1.0, 0.0, 0.0, 1.0); } ;

// Создание пайплайна const pipeline = device.createRenderPipeline({ layout: 'auto', vertex: { module: device.createShaderModule({ code: shaderCode }), entryPoint: 'vs' }, fragment: { module: device.createShaderModule({ code: shaderCode }), entryPoint: 'fs', targets: [{ format: navigator.gpu.getPreferredCanvasFormat() }] } });

// Рендеринг const context = canvas.getContext('webgpu'); context.configure({ device, format: navigator.gpu.getPreferredCanvasFormat() });

function frame() { const commandEncoder = device.createCommandEncoder(); const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(), loadOp: 'clear', storeOp: 'store', clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 } }] }); renderPass.setPipeline(pipeline); renderPass.draw(3); renderPass.end(); device.queue.submit([commandEncoder.finish()]); requestAnimationFrame(frame); } requestAnimationFrame(frame); ```

Ограничения и критика

• Сложность разработки: WebGPU требует больше кода и понимания GPU-архитектуры по сравнению с WebGL.
• Неполная реализация: Некоторые возможности (например, трассировка лучей, mesh-shaders) пока не поддерживаются или ограничены.
• Производительность: На слабых GPU или устаревших драйверах может быть ниже, чем у WebGL из-за накладных расходов на абстракцию.
• Безопасность: Явное управление памятью повышает риск утечек или ошибок, но браузеры изолируют процессы.
• Зависимость от браузера: Разные браузеры могут иметь разные уровни поддержки (например, Safari отстаёт по некоторым функциям).

Перспективы

WebGPU рассматривается как основа для будущих веб-стандартов, таких как WebXR (виртуальная/дополненная реальность) и Web Neural Network API (ускорение нейросетей). Ожидается, что к 2026 году WebGPU полностью вытеснит WebGL в новых проектах, требующих высокой производительности, а также станет стандартом для нативных приложений (через проекты типа Dawn от Google или wgpu от Mozilla).

Источники

• Спецификация W3C WebGPU (рабочий черновик, 2024)
• Документация MDN Web Docs: WebGPU API
• Статья «WebGPU: A New Era for Graphics on the Web» (Google Developers, 2023)
• Репозиторий GitHub: gpuweb/gpuweb (спецификация и обсуждения)
• Статья «WebGPU vs WebGL: A Performance Comparison» (Journal of Web Engineering, 2024)