WebGL

Большинство сайтов до сих пор остаются обычным набором HTML, CSS и JavaScript. Они отображают текст, изображения, формы и анимации. Но когда требуется вывести на экран сложную трехмерную сцену, интерактивную модель продукта, инженерную визуализацию или десятки тысяч динамических объектов, привычных технологий уже недостаточно. Именно здесь начинается WebGL.

WebGL (Web Graphics Library) — это стандарт, позволяющий браузеру напрямую использовать вычислительные возможности видеокарты для рендеринга двухмерной и трехмерной графики без установки дополнительных плагинов. Если говорить проще, WebGL открывает веб-разработчикам доступ к тем же аппаратным ресурсам GPU, которые используют современные игры, CAD-системы и профессиональные графические приложения.

Для бизнеса это означает одну простую вещь: браузер перестает быть «просмотрщиком страниц» и становится полноценной платформой для создания сложных цифровых продуктов.

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

Попытки создавать сложную графику существовали и раньше. Использовались Flash, Java-апплеты, Silverlight и десятки других технологий. Все они имели один общий недостаток — требовали установки дополнительного программного обеспечения и постепенно становились источником проблем с безопасностью.

Когда браузеры научились работать с OpenGL ES, ситуация изменилась кардинально. Появился WebGL — открытый стандарт, который позволил выполнять трехмерный рендеринг средствами самого браузера.

Фактически браузер получил собственный графический конвейер.

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

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

Представьте задачу. Необходимо вычислить положение одного миллиона вершин трехмерной модели. Процессор будет выполнять вычисления последовательно, распределяя нагрузку между сравнительно небольшим количеством универсальных ядер.

Современная видеокарта устроена иначе. Она содержит тысячи небольших вычислительных блоков, каждый из которых одновременно обрабатывает часть изображения. Именно поэтому GPU способен выполнять миллиарды однотипных операций параллельно. Для трехмерной графики это идеальная архитектура.

В результате сложная сцена, которая на CPU обновлялась бы несколько секунд, на видеокарте отображается с частотой 60–144 кадров в секунду. Именно поэтому WebGL использует видеокарту практически для всех операций рендеринга.

Когда пользователь открывает страницу, браузер создает специальный графический контекст. Далее происходит несколько этапов. Сначала JavaScript подготавливает данные. Это могут быть:

• координаты вершин;
• текстуры;
• материалы;
• параметры освещения;
• информация о камерах;
• данные анимации.

После этого информация отправляется в память видеокарты. Дальше начинается работа GPU. Видеокарта получает команды, обрабатывает вершины объектов, рассчитывает положение каждого пикселя и формирует итоговое изображение. Важно понимать одну вещь: JavaScript практически не занимается самим рисованием. Он лишь управляет процессом. Все тяжелые вычисления происходят непосредственно на видеокарте. Именно поэтому современные браузеры способны отображать сцены, содержащие миллионы полигонов.

Одним из главных преимуществ WebGL является использование полноценного графического конвейера (Rendering Pipeline).

Это последовательность этапов, через которые проходит каждый объект перед тем, как попасть на экран.

Упрощенно процесс выглядит следующим образом.

JavaScript

↓

Буферы

↓

Vertex Shader

↓

Сборка примитивов

↓

Rasterization

↓

Fragment Shader

↓

Framebuffer

↓

Экран пользователя

Каждый этап отвечает за строго определенную задачу.

Такое разделение позволяет видеокарте выполнять вычисления максимально эффективно.

Любая модель состоит из огромного количества точек. Они называются вершинами (Vertices). Например, обычный куб состоит всего из восьми вершин. Автомобиль может содержать десятки тысяч. Промышленная установка — несколько миллионов. Каждая вершина хранит набор параметров:

• координаты;
• нормали;
• цвет;
• координаты текстур;
• дополнительные пользовательские данные.

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

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

Если спросить опытного разработчика, что является самым важным элементом WebGL, он почти наверняка ответит: шейдеры. Шейдер — это небольшая программа, которая выполняется непосредственно на видеокарте. В WebGL используются два основных типа.

Vertex Shader

Обрабатывает каждую вершину модели. Именно здесь вычисляется положение объекта в пространстве, применяются матрицы трансформации, выполняются повороты, масштабирование и перемещение.

Если объект вращается на экране, значит Vertex Shader непрерывно пересчитывает координаты его вершин.

Fragment Shader

После того как вершины сформировали изображение, начинает работать Fragment Shader.

Он отвечает буквально за каждый пиксель будущего кадра.

Именно здесь рассчитываются:

• цвет поверхности;
• тени;
• отражения;
• прозрачность;
• освещение;
• материалы;
• постобработка;
• эффекты свечения.

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