Разработчик mofu-dev рассказал об эффекте растекающегося жидкого тонального крема, созданном в 2021 году для рекламного проекта японского косметического бренда. Позднее он представил эту реализацию на Vue Fes Japan 2026. Интерактивное демо позволяет проводить по жидкости мышью или пальцем, но использует синий цвет вместо оттенка косметики.
В основе лежит ранее реализованная симуляция Stable Fluids на Three.js. Её карта скоростей описывает направление и силу движения в каждой точке экрана. Для толщины жидкости автор добавил отдельную карту высот в framebuffer object: значение в R-канале показывает, сколько вещества находится в данной позиции. Начальная капля задаётся фрагментным шейдером как полусфера с приподнятым центром.
При перемещении каждый пиксель теряет часть прежней толщины и получает вещество из исходной точки, найденной обратной трассировкой скорости. Порог через smoothstep не даёт почти неподвижным областям постоянно перетекать. Два FBO чередуются: на каждом кадре прежняя карта высот используется для построения следующей. Это визуальный приём, а не точная физическая модель: из-за параллельной обработки и повторного чтения близких участков объём не сохраняется. При движении по кругу ошибка накапливается, и жидкости может становиться больше.
Отдельная alpha map сохраняет следы после растирания. Она сочетает текущую толщину с максимальным значением, записанным ранее, поэтому цвет не исчезает сразу после ухода основной массы. Автор подчёркивает, что это лишь история пройденных участков, а не модель высыхания или впитывания.
Рельеф создаётся без изменения вершин геометрии. Фрагментный шейдер сравнивает высоту текущего пикселя с соседними по X и Y, вычисляет нормаль через векторное произведение и использует Matcap-текстуру для окраски и бликов. Карта высот определяет форму, Matcap — внешний вид, alpha map — оставшиеся следы.
Точность текстур заметно влияет на результат. Восьмибитный канал даёт только 256 уровней высоты, из-за чего в освещении появляются ступеньки; 32-битная float-текстура делает контуры и затенение гладче.
В дополнительном эксперименте автор смешал три цветные жидкости. У каждой собственные карты высот и истории прозрачности, но общая карта скоростей. Цвета смешиваются по упрощённой модели Kubelka–Munk с учётом толщины, а там, где её почти нет, используются сохранённые следы. Нормали поверхности рассчитываются по суммарной высоте.