Введение¶
Incomplete Translation
This is a community translation of the original English page, which is not fully translated yet. You are welcome to contribute!
Что такое графический API?¶
Персональный компьютер или смартфон обычно содержат два вычислительных блока: CPU (Central Processing Unit) и GPU (Graphics Processing Unit). При программировании приложения основное внимание уделяется написанию инструкций для CPU. Именно для этого предназначены большинство языков программирования.

CPU и GPU — это два различных процессора. Мы программируем для CPU, чтобы он отправлял инструкции GPU через графический API и драйвер.¶
Если нужно, чтобы приложение выполняло инструкции на GPU (например, для рендера 3D изображений), код для CPU должен отправлять инструкции драйверу GPU. Графический API — это программный интерфейс, который используется кодом CPU для взаимодействия с GPU.
Существует множество таких API, например, вы могли слышать о OpenGL, DirectX, Vulkan или Metal.
Tip
В теории любой может создать свой собственный графический API. Каждый производитель GPU имеет свой собственный низкоуровневый протокол для общения драйвера с аппаратным обеспечением, на основе которого реализованы более распространённые API (часто предоставляемые вместе с драйвером).
В этой документации мы рассмотрим графический API под названием WebGPU. Этот API был разработан для предоставления унифицированного доступа к GPU, независимо от производителя и операционной системы, на которой работает приложение.

WebGPU — это Render Hardware Interface, построенный на различных API, предоставляемых драйвером/ОС в зависимости от вашей платформы. Эта разработка была выполнена веб-браузерами и теперь доступна нам через заголовок webgpu.h
, который они предоставляют.¶
Почему WebGPU?¶
🤔 Зачем мне использовать Web API для разработки десктопного приложения?
Хороший вопрос, краткий ответ:
Разумный уровень абстракции
Хорошая производительность
Кроссплатформенность
Стандартизированность
Готовность к будущему
И на самом деле это единственный графический API, который обладает всеми этими свойствами!
Да, API WebGPU был первоначально разработан для веба, как интерфейс между JavaScript и GPU. Это не является недостатком, поскольку на сегодняшний день требования к производительности веб-страниц аналогичны тем, что предъявляются к нативным приложениям. Подробнее о том, почему я считаю, что WebGPU — лучший графический API для изучения в 2025 году можно прочитать в этой статье.
Note
При проектировании API для веба основными ограничениями являются портативность и конфиденциальность. Мы выигрываем здесь от усилий, направленных на достижение портативности, и, к счастью, ограничения API, связанные с конфиденциальностью, могут быть отключены, если использовать WebGPU как нативный API.
Для чего тогда C++?¶
Не стоит ли использовать JavaScript так как это изначальная цель WebGPU? Или C поскольку это язык заголовочного файла webgpu.h
, который мы будем использовать? Или Rust поскольку это язык, на котором написан один из бэкендов WebGPU? Все эти языки подходят для работы с WebGPU, но я выбрал C++, потому что:
C++ всё ещё является основным языком для разработки высокопроизводительных графических приложений (видеоигр, рендер-движков, инструментов моделирования и т.д.).
Уровень абстракции и контроль в C++ идеально подходит для взаимодействия с графическими API в целом.
Программирование графики — отличная возможность для того, чтобы действительно освоить C++. В начале я буду предполагать лишь поверхностные знания этого языка.
See also
Для эквивалентной документации для Rust, рекомендую ознакомиться с Learn WGPU от Sotrh.
Как использовать эту документацию?¶
Чтение¶
Первые две части этой документации были созданы для последовательного чтения, как полноценная лекция, но страницы можно также использовать как напоминания по конкретным темам.
Часть Начало работы охватывает шаблонный код, необходимый для инициализации WebGPU и управления окнами (с использованием GLFW), а также вводит ключевые концепции и идиомы API. В этой секции мы работаем с чистым C API и завершаем введением в C++ обёртку, которую мы будем использовать в остальной части документации.
Можно ли сразу перейти к части 2 на Базовый 3D рендеринг и использовать шаблонный код, полученный из первой части, как стартовый набор? Вы всегда можете вернуться к деталям части “Начало работы” позже.
Рендеринг далеко не единственное использование ГПУ в наше время; третья часть вводит Базовые Вычисления, т.е. использование WebGPU в нерендеринговых задачах.
Четвёртая часть Продвинутые техники состоит из фокуса на различных техниках компьютерной графики, которые можно читать более независимо друг от друга.
Literate Programming¶
Warning
Этот гайд находится на ранней стадии; доступны только первые несколько глав.
Этот гайд следует принципу Literate Programming: документация, которую вы читаете, аннотирована таким образом, чтобы можно было автоматически объединить её блоки кода в полностью рабочий код. Это способ гарантировать, что руководство действительно содержит всё необходимое для воспроизведения результатов.
В правой боковой панели глав, поддерживающих эту функцию, можно включить/выключить отображение этой информации:


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


В общем, вы можете обсуждать любые технические или организационные решения через issues репозитория.
Любые конструктивные и/или доброжелательные отзывы приветствуются!
Work In Progress¶
Этот гайд всё ещё в разработке, и сам API WebGPU также находится в процессе разработки. Я стараюсь как можно точнее отслеживать изменения, но пока API не станет стабильным, это неизбежно приведёт к небольшим несоответствиям.
Всегда обращайте внимание на дату последнего изменения страницы и сопровождающего кода (используйте git). Они могут быть не совсем синхронизированы; обычно я сначала обновляю код, а затем контент документации.