Сайт для создания и тестирования шейдеров

В поисках Gaussian Blur наткнулся на сайт shadertoy.

Можно менять параметры налету и смотреть что получается. Попробуйте на примере Gaussian Blur. Платформа WebGL 2.0, язык GLSL, рекомендую к ознакомлению.

Также можно встраивать результат на страницу:

Рисуем сферу с помощью двух треугольников

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

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

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

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

(далее…)

Освещение куба с помощью WebGL. Модель освещения Blinn-Phong

Всем привет!

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

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

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

(далее…)

Система частиц с WebGL

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

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

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

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

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

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

(далее…)

Семеричный куб в перспективной проекции

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

(далее…)