Симуляции жидкости в реальном времени
57 #математика,#нравится,#рекомендую

Всем привет!

Наткнулся на видео о том, как работает симуляции жидкости:

И там же есть полезная ссылка на книгу о симуляции жидкости в реальном времени: Real-Time Fluid Dynamics for Games. Сишного кода в книге на сто строк всего. Безо всякой зубодробительной математики. Любопытно, что книга понятнее, чем видео. Схороню здесь, чтобы не потерять. Давно интересовался этой темой.

И чтоб два раза не вставать, симуляция нетвёрдых тел (типа желе):

Возможно, в будущем, напишу реализацию жидкости/дыма на JavaScript и выложу на сайте с описанием и исходниками.

Сайт для создания и тестирования шейдеров
53 #webgl,#рекомендую,#шейдер

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

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

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

Текстурирование объекта для самых маленьких
11 #графомания

Отражение гранатовых ягод со скатерти на стенке кружки

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

Который фиксируется мобильным телефоном на плоской матрице фотоматрице размером с булавку.

Математику процесса я объяснял в другой заметке с мудреным названием: Рисуем сферу с помощью двух треугольников. Там же есть живой пример реализации.

Кто считает себя умнее семиклассника, добро пожаловать туда.

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

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

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

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

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

(далее…)

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

Всем привет!

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

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

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

(далее…)

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