Не так давно в сети появился стандарт WebGL, о котором и пойдет речь ниже. Этот стандарт описывает каким образом можно использовать аппаратное ускорение графики в вашем браузере и является практически полным аналогом OpenGL ES 2.0, который есть сейчас в девяти смартфонах из десяти. Так что красивые, зрелищные игры уровня Assassin’s Creed не за горами.
Самый главный плюс для меня, как программиста, это возможность быстро написать и отладить программу без дампов памяти, исключений и прочего барахла.
В этой заметке я покажу, как сделать освещение двухмерного спрайта с использованием карты нормалей и карты бликов. Для этого нам понадобятся три текстуры:
- цветовая — определяет цвет пикселя, собственно это и есть то, что мы будет рисовать
- карта нормалей — содержит нормаль каждого пикселя, из нее будем вычислять степень освещенности текущего пикселя
- карта бликов — содержит степень отражения каждого пикселя
Эффект объема у плоского объекта достигается техникой Bump mapping. Живой пример и исходники под катом.
Для каждого пикселя вычисляется два нормализованных вектора:
- направление нормали (берется из карты нормалей)
- направление от пикселя к источнику света (источник находится на высоте равной половине ширины изображения)
Затем из скалярного произведения этих векторов берется коэффициент затемнения и умножается на цвет данного пикселя. Таким нехитрым способом обеспечивается объем у совершенно плоского полигона из двух треугольников.
Исходники программы на JavaScript и ресурсы выложены на GitHub.
Все текстуры для примера я нашел на сайте Käy’s Blog. Если вас заинтересовала тема освещения, смотрите новую часть: Освещение куба с помощью WebGL. Модель освещения Blinn-Phong.