Освещение 2D спрайта средствами WebGL

Не так давно в сети появился стандарт WebGL, о котором и пойдет речь ниже. Этот стандарт описывает каким образом можно использовать аппаратное ускорение графики в вашем браузере и является практически полным аналогом OpenGL ES 2.0, который есть сейчас в девяти смартфонах из десяти. Так что красивые, зрелищные игры уровня Assassin’s Creed не за горами.

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

В этой заметке я покажу, как сделать освещение двухмерного спрайта с использованием карты нормалей и карты бликов. Для этого нам понадобятся три текстуры:

  • цветовая — определяет цвет пикселя, собственно это и есть то, что мы будет рисовать
  • карта нормалей — содержит нормаль каждого пикселя, из нее будем вычислять степень освещенности текущего пикселя
  • карта бликов — содержит степень отражения каждого пикселя

OpenGL: освещение спрайта

Эффект объема у плоского объекта достигается техникой Bump mapping. Живой пример и исходники под катом.

(далее…)

Основы библиотеки PIXI.js

Библиотека PIXI.js предназначена для вывода 2D графики с помощью javascript. Она может работать с двумя типами рендеров: Canvas и WebGL.

В этой библиотеке вся сцена представлена деревом элементов, которые присоединены к объекту типа Stage. Это root для всех элементов сцены. Отрисовка начинается с него и проходит по всем детям этого объекта в прямом порядке.

Базовый «кирпичик» сцены — объект типа DisplayObject. Он содержит: 2D позицию, поворот, масштаб, прозрачность, цвет.

Набор элементов типа DisplayObject можно объединить с помощью DisplayObjectContainer. Это наследник от класса DisplayObject с поддержкой добавления и удаления детей.

Примитивное создание сцены PIXI.js выглядит так:

function createScene() {
    var stage = new PIXI.Stage();
    var container = new PIXI.DisplayObjectContainer();
    var object = new PIXI.DisplayObject();
 
    container.addChild(object);
    stage.addChild(container);
 
    return stage;
}

Класс DisplayObject, по сути, бесполезно использовать напрямую, он не содержит никакой визуальной информации. Самый часто используемый класс на базе DisplayObject — это класс Sprite. Он представляет собой наследника от DisplayObject и добавляет к нему текстуру и выбор режима отрисовки этой текстуры.

Для задания текстуры используется класс BaseTexture. Это другой базовый «кирпичик» библиотеки PIXI.js. Он является простой оберткой над изображением. Содержит в себе размер этого изображения, ссылку на источник и загруженные данные типа Image.

Таким образом создание простой сцены теперь выглядит так:

function createScene() {
    var stage = new PIXI.Stage();
    var texture = new PIXI.BaseTexture("image.png");
    var sprite = new PIXI.Sprite(texture);
    stage.addChild(sprite);
 
    return stage;
}

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

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

function createTextures() {
    // загружаем изображение размером 1024x1024
    var atlas = new PIXI.BaseTexture("atlas.png");
    // левая верхняя часть размером 512x512
    var textureLT = new PIXI.Texture(atlas, new Rectangle(0, 0, 512, 512);
    // правая верхняя часть размером 512x512
    var textureRT = new PIXI.Texture(atlas, new Rectangle(512, 0, 512, 512);
    // левая нижняя часть размером 512x512
    var textureLB = new PIXI.Texture(atlas, new Rectangle(0, 512, 512, 512);
    // правая нижняя часть размером 512x512
    var textureRB = new PIXI.Texture(atlas, new Rectangle(512, 512, 512, 512);
}

В текстурный атлас при желании можно сохранить всю сцену, которая будет рисоваться за один проход WebGL рендера. Живой пример (без исходников) можно посмотреть справа, виджет YoWindow использует именно такой подход для быстрой отрисовки ландшафта.

На этой радостной ноте закончу описание PIXI.js. Спасибо за внимание. Как всегда ваши комментарии и угрозы вопросы вы можете оставлять прямо здесь.

Блог Евгения Жирнова