Все заметки

Рендеринг

И вот, наконец, рендеринг.

Чтобы все было солидно, для рисования я решил использовать WebGL.

WebGL – это такое API, которое позволяет работать с 3D графикой в браузере. 3D меня не особо интересовало, скорее хотелось поработать с рендерингом на каком-то относительно низком уровне. Тем более WebGL с тем же успехом можно использовать и для двухмерной графики.

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

Розовый треугольник на WebGL

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

Шейдеры – это такие небольшие программы, которые исполняются на GPU вашего компьютера. Существуют вершинные и пиксельные шейдеры. Одни работают с вершинами переданных объектов, а вторые с пикселями растеризованного изображения.

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

Отрисовка первого спрайта на WebGL