Как работают 3D-игры в браузере: WebGL простыми словами

Откройте MATCHDAY 26 или «Лесной рубеж»: перед вами трёхмерный стадион или лес с сотнями деревьев, и всё это работает на обычной веб-странице без установки. Разберёмся, что при этом происходит внутри браузера.

Холст на странице

Всё начинается с элемента canvas, «холста». Это прямоугольная область на странице, в которой можно рисовать из JavaScript. Сам по себе холст умеет только хранить картинку из пикселей. Чтобы рисовать на нём, нужен контекст: набор команд для рисования.

Для простых двухмерных игр вроде тетриса хватает контекста 2d: он рисует прямоугольники, линии, текст и картинки. Но нарисовать так трёхмерную сцену с освещением и тысячами объектов 60 раз в секунду центральный процессор не успеет.

Видеокарта берёт работу на себя

Здесь появляется WebGL, второй вид контекста для холста. Спецификация WebGL 1.0 вышла в марте 2011 года. WebGL даёт странице доступ к видеокарте, которая создана как раз для таких задач: она обрабатывает огромное количество точек и пикселей одновременно.

Трёхмерная сцена для видеокарты состоит из треугольников. Игрок, мяч, трибуна, дерево: всё это сетки из множества маленьких треугольников. Программа передаёт видеокарте координаты их вершин, текстуры и параметры освещения, а видеокарта превращает всё это в картинку на экране.

Шейдеры: маленькие программы для видеокарты

Как именно треугольники превратятся в пиксели, решают шейдеры. Это небольшие программы, которые выполняются прямо на видеокарте. Их два вида:

• Вершинный шейдер получает каждую вершину и вычисляет, где она окажется на экране с учётом положения камеры.
• Фрагментный шейдер вычисляет цвет каждого пикселя: учитывает текстуру, свет, тени и туман.

Видеокарта запускает тысячи копий шейдера параллельно, поэтому миллионы пикселей обсчитываются за доли секунды.

three.js: чтобы не писать всё с нуля

Писать на чистом WebGL долго: даже чтобы вывести один цветной куб, нужны десятки строк кода. Поэтому большинство разработчиков используют библиотеки. Самая популярная из них, three.js, берёт на себя рутину: камеры, свет, материалы, загрузку моделей, тени. Разработчик описывает сцену понятными объектами, а библиотека сама превращает их в команды WebGL.

Обе трёхмерные игры на нашем сайте построены на three.js, и библиотека загружается с этого же сайта, без обращений к внешним серверам.

Что будет дальше: WebGPU

WebGL основан на OpenGL ES 2.0, графическом стандарте из эпохи ранних смартфонов. Современные видеокарты умеют гораздо больше, и для них появился новый интерфейс, WebGPU. В апреле 2023 года его включили Chrome и Edge. WebGPU ближе к современным графическим API вроде Vulkan, Metal и Direct3D 12 и позволяет браузерным играм приблизиться к настольным по качеству картинки.

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

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

Все статьи