WebGPU — это новый современный API для доступа к возможностям графического процессора в веб-приложениях. До WebGPU существовала технология WebGL, которая обеспечивала подмножество функциональных возможностей WebGPU. И WebGPU обеспечивает новый класс богатого веб-контента, который разработчики могут использовать для создания потрясающих приложений. Его история восходит к API OpenGL ES 2.0, выпущенному в 2007 году, который, в свою очередь, основан на более старом API OpenGL. WebGPU переносит эти современные достижения API на веб-платформу. Он ориентирован на использование возможностей графического процессора кросс-платформенным образом, предоставляя при этом API, который выглядит естественным в Интернете и является более чистым, чем некоторые из собственных API, для которых он создан.
Графические процессоры часто ассоциируются с быстрым рендерингом детализированной графики, и WebGPU не является исключением. Он обладает функциями, необходимыми для поддержки многих наиболее популярных сегодня методов рендеринга на настольных и мобильных графических процессорах, и предоставляет средства для добавления новых функций в будущем по мере развития аппаратных возможностей. Помимо рендеринга, WebGPU раскрывает потенциал графических процессоров для выполнения высокопараллельных рабочих нагрузок общего назначения. Эти вычислительные шейдеры можно использовать автономно, без каких-либо компонентов рендеринга или как тесно интегрированную часть конвейера рендеринга.
1. Инициализируйте WebGPU
Если вы просто хотите использовать WebGPU для вычислений, вы можете работать с WebGPU, не отображая ничего на экране. Однако, если вы хотите отрендерить что-то на экране, как мы будем делать в Codelab, вам нужно подготовить холст.
1.1 Начните с холста
Сначала мы создаем новый HTML-документ, а затем подготавливаем элемент холста для отрисовки определенного контента, код выглядит следующим образом:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<ti