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

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

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

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

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

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

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

Для каждого пикселя вычисляется два нормализованных вектора:

  • направление нормали (берется из карты нормалей)
  • направление от пикселя к источнику света (источник находится на высоте равной половине ширины изображения)

Затем из скалярного произведения этих векторов берется коэффициент затемнения и умножается на цвет данного пикселя. Таким нехитрым способом обеспечивается объем у совершенно плоского полигона из двух треугольников.

Все текстуры для примера я нашел на сайте Käy’s Blog. Если вас заинтересовала тема освещения, смотрите новую часть: Освещение куба с помощью WebGL. Модель освещения Blinn-Phong.

Отвратительно!Ужасно.НормальноХорошо.Отлично! (2 оценок, среднее: 5,00 из 5)
Загрузка...

Ваши комментарии к статье:

Оставить комментарий: