Рисуем сферу с помощью двух треугольников
283 #javascript,#three.js,#webgl,#интерактив,#математика,#своими руками

Сфера в трехмерной графике обычно состоит из сотни-другой треугольников, при этом половина из них не видна человеку, поскольку их отсекает face culling и/или zbuffer.

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

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

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

(далее…)

Освещение куба с помощью WebGL. Модель освещения Blinn-Phong
385 #javascript,#webgl,#интерактив,#шейдер

Всем привет!

Изначально тут должна была быть статья про кубик льда с отражением окружающего мира (Environment Mapping) и бликами (Specular). Но в процессе подготовки материала неожиданно пришло понимание непонимания бликов и моделей освещения.

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

Для затравки покажу результат, а потом объясню, как это все работает (можно отключать разные слои освещения и менять скорость вращения):

(далее…)

Система частиц с WebGL
484 #javascript,#webgl,#интерактив,#шейдер

Современные игры не были бы так хороши без системы частиц.

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

Хорошая система частиц потребляет мало памяти, быстро работает и имеет многочисленные настройки.

В OpenGL обычно создаётся вершинный буфер, который содержит все частицы одного типа и отрисовывается такой буфер за один проход.

В нашей системе у частицы будут такие параметры:
— позиция
— прозрачность
— сила гравитации
— ускорение
— скорость

Идея такова: есть массив частиц, частица может быть включена или выключена. Для включенных частиц идёт обновление позиции, скорости и прозрачности. Каждая такая частица добавляется в вершинный буфер и все частицы рисуются за один проход.

(далее…)

Семеричный куб в перспективной проекции
116 #javascript,#webgl,#интерактив

Баловался в школе тем, что в тетрадках рисовал подобную ерунду. Оказалось, что это семеричный куб в изометрической проекции. Теперь появилась возможность увидеть этот объект в движении. Представляю вам семеричный куб в перспективной проекции на двумерную плоскость вашего монитора. Между прочим, у этого симпатичного объекта три оси измерения: ось X, ось Y и время, которое зациклено по кругу.

(далее…)

Освещение 2D спрайта средствами WebGL
346 #javascript,#webgl,#интерактив,#шейдер

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

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

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

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

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

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

(далее…)

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