WebGPU: от медицинских снимков до Cyberpunk 2077 / Хабр

Представьте, что вы можете запустить Cyberpunk 2077 прямо в браузере. Или визуализировать сложные медицинские данные в реальном времени, не устанавливая никакого дополнительного ПО. Звучит как фантастика? Но это уже скоро может стать реальностью благодаря WebGPU — новому стандарту, который обещает перевернуть мир веб-графики и вычислений. Меня зовут Павел Симонов, я архитектор-эксперт в Лиге Цифровой Экономики. В этой статье мы разберем, что такое WebGPU, почему эта технология так важна, и как она может изменить вашу работу уже сегодня.

Почему это не просто еще +1 стандарт?

Если вы работаете в IT или около IT, то наверняка слышали о WebGL — стандарте, который позволил нам запускать 3D-графику в браузере. WebGL был прорывом, но у него есть свои ограничения: сложность использования, недостаточная производительность для современных задач и отсутствие поддержки новых графических API.

WebGPU — это следующий шаг. Это не просто улучшенный WebGL, а совершенно новый подход к работе с GPU в браузере. Он предоставляет низкоуровневый доступ к графическому процессору, что позволяет разработчикам создавать более мощные и производительные приложения. У нас открываются двери для таких вещей, как игры уровня AAA, сложные научные симуляции и более качественные реализации виртуальной реальности.

История создания

История WebGPU началась в 2016 году, когда Google представил концепцию WebGL Next. Это был ответ на растущие потребности разработчиков в более мощных инструментах для работы с графикой. В 2017 году к разработке подключились Apple, Mozilla и другие крупные игроки, и проект получил название WebGPU.

Ключевой момент в истории WebGPU — это его кроссплатформенность. В отличие от WebGL, который был привязан к OpenGL, WebGPU поддерживает современные графические API, такие как DirectX 12, Metal и Vulkan. Это значит, что разработчики могут использовать один и тот же стандарт на разных платформах, что значительно упрощает жизнь.

Здесь приведена подробная таблица сравнения стандартов по различным характеристикам:

Почему это так важно?

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

Производительность: WebGPU обеспечивает более высокую производительность по сравнению с WebGL, особенно в сложных сценах и вычислениях. Это особенно важно для игр, научных симуляций и визуализации данных.
Поддержка новых технологий: WebGPU поддерживает современные графические API, такие как DirectX 12, Metal и Vulkan. Это значит, что разработчики могут использовать все возможности современных GPU.
Единый стандарт: WebGPU стремится стать единым стандартом для веб-графики, что упрощает разработку кроссплатформенных приложений.

Схематично принцип работы WebGPU можно представить вот так:

WGSL: язык шейдеров для WebGPU

Одной из ключевых особенностей WebGPU является WGSL (WebGPU Shading Language) — язык для написания шейдеров. WGSL разработан специально для WebGPU и предоставляет разработчикам гибкость и контроль над графическим конвейером.

Вот пример двух простых шейдеров на WGSL:

@vertex
fn main_vertex(
    @location(0) in_position: vec4<f32>,
    @location(1) in_color: vec3<f32>,
    @builtin(position) out_position: vec4<f32>,
    @location(0) out_color: vec3<f32>
) {
    out_position = in_position;
    out_color = in_color;
}
@fragment
fn main_fragment(
    @location(0) in_color: vec3<f32>,
    @location(0) out_color: vec4<f32>
) {
    out_color = vec4<f32>(in_color, 1.0);
}

Здесь мы описываем вершины и цвет треугольника. Просто? Да, но это только начало. WGSL позволяет создавать гораздо более сложные шейдеры, включая вычисления для физических симуляций, постобработки и многого другого.

Пример работы: продолжаем рисовать треугольник

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

const canvas = document.createElement('canvas');
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

document.body.appendChild(canvas);

const context = canvas.getContext('webgpu');
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

context.configure({
    device,
    format: presentationFormat,
    alphaMode: 'premultiplied',
});

После инициализации мы можем настроить конвейер отрисовки и запустить рендеринг:

const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex: {
        module: device.createShaderModule({
            code: vertexShaderCode, // в этой переменной находится код нашего первого шейдера, описанного выше
        }),
        entryPoint: 'main',
    },
    fragment: {
        module: device.createShaderModule({
            code: fragmentShaderCode, // в этой переменной находится код нашего второго шейдера, описанного выше
        }),
        entryPoint: 'main',
        targets: [{ format: presentationFormat }],
    },
    primitive: {
        topology: 'triangle-list',
    },
});

function frame() {
    const commandEncoder = device.createCommandEncoder();
    const textureView = context.getCurrentTexture().createView();

    const renderPassDescriptor = {
        colorAttachments: [
            {
                view: textureView,
                clearValue: [0, 0, 0, 1],
                loadOp: 'clear',
                storeOp: 'store',
            },
        ],
    };

    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.draw(3);
    passEncoder.end();

    device.queue.submit([commandEncoder.finish()]);
    requestAnimationFrame(frame);
}

requestAnimationFrame(frame);
requestAnimationFrame(frame);

Этот код демонстрирует базовые принципы работы с WebGPU. Вы можете расширять этот пример, постепенно усложняя логику и добавляя новые возможности.

Что можно делать уже сейчас?

WebGPU уже поддерживается в последних версиях браузеров, таких как Chrome, Edge и Safari. Это открывает новые возможности для разработки:

Веб-игры: С WebGPU можно создавать игры уровня AAA прямо в браузере. Представьте, что вы играете в Cyberpunk 2077 без необходимости скачивать и устанавливать игру.
Виртуальная и дополненная реальность: WebGPU позволяет создавать immersive-приложения, которые раньше были возможны только в нативных средах.
Научные вычисления: Визуализация медицинских данных, симуляции физических процессов и многое другое — все это теперь возможно в браузере.
Графические редакторы: Сложные инструменты для работы с графикой, такие как Photoshop или Blender, могут быть перенесены в веб.

Публичные проекты на WebGPU

Здесь я постарался привести пару примеров проектов:

PixiJS — движок для создания HTML5 игр и приложений;

Veloren — многопользовательская воксельная ролевая игра с расширенной генерацией местности и симуляцией экономики;

Bevy — движок на основе данных, созданный на Rust;

Green Line Extension �� автор сделал попытку проанализировать как продление зеленой ветки метро повлияет на поездки в его городе (относительное время проезда до центра города).

Заключение

WebGPU — это не просто еще одна технология или стандарт. Это будущее веб-графики и вычислений. Он открывает новые горизонты для разработчиков, позволяя создавать приложения, которые раньше были невозможны в браузере.

Если вы хотите узнать больше о WebGPU, рекомендую ознакомиться с официальной документацией на GitHub, MDN и Can I use.

А если вы уже пробовали работать с WebGPU, поделитесь своим опытом в комментариях! Если нет, то чего вы ждете от этого стандарта? Какие проекты вы хотели бы реализовать с его помощью? Давайте обсудим!

WebGPU: от медицинских снимков до Cyberpunk 2077