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, поделитесь своим опытом в комментариях! Если нет, то чего вы ждете от этого стандарта? Какие проекты вы хотели бы реализовать с его помощью? Давайте обсудим!