Молекула с водой — стекло и GPU-симуляция воды на three.js

Хотелось собрать такую сцену целиком в реальном времени: молекула воды из трёх стеклянных долей с толстыми стенками: в долях — буквы H, O и H, а внутри — сама вода с плавающими шариками. Молекула вращается, доворачивается от прокрутки страницы, и вода живёт вместе с ней: плещется от поворота, отражается от стенок и букв, расходится волнами от курсора.

Модель сделана в Blender под эту задачу: внешняя и внутренняя оболочки по 7,5 тысячи треугольников, буквы H·O·H из шрифта Moderustic со скосом, пять шариков и плоскость, которая задаёт уровень воды. Весь файл — 383 КБ.

Ход работы

• Вода — не частицы, а поле высот на видеокарте: волновое уравнение мелкой воды на сетке около 480×150 ячеек, 240 шагов в секунду. Сетка лежит в пространстве молекулы, поэтому вода поворачивается вместе со стеклом, а в уравнение входят силы вращающегося сосуда — центробежная и от ускорения поворота. Поэтому вода плещется не по таймеру, а потому что молекулу развернули;
• границы воды — настоящее сечение внутренней оболочки на уровне воды. Буквы, которые в воду входят, — препятствия, и препятствия подвижные: буквы всегда повёрнуты к зрителю, поэтому в воде они поворачиваются. Сечение каждой буквы на уровне воды посчитано один раз, в её собственной системе координат, а каждый кадр видеокарта накладывает его на маску с текущим поворотом. Волны отражаются от стекла и от букв, огибают их, у стенок появляется светлая кромка, а там, где вода движется быстро, — пена. Клетки за стенкой продолжают высоту соседней воды, иначе на стекле оставались ступенчатые следы;
• кроме высоты симуляция хранит течение. Его скорость под каждым шариком читается асинхронно, восемь пикселей без остановки видеокарты, и шарики плывут по течению, отталкиваются от стенок, букв и друг от друга, оставляя на воде небольшой след. Покачиваются они по высоте воды прямо в шейдере;
• стекло — физический материал three.js с пропусканием, но толщина стенки считается по длине пути луча: в центре стенка тонкая и почти не искажает, у силуэта путь в стекле длинный — сильнее преломление и плотнее цвет, как у толстого стекла. В толще стенок — пузырьки воздуха, у края — свечение, иначе на скользящих углах стенка просвечивала тёмным;
• всё, что внутри стекла, видно только через его преломление: вода, шарики и буквы помечены как непрозрачные, но смешиваются сами и пишут цвет лишь в буфер пропускания. Сама вода — ещё один проход: всё, что за ней, рисуется в текстуру с глубиной, и вода берёт оттуда картинку со смещением по наклону волн и поглощением по реальной толщине. Буквы под водой плывут, а глубже уходят в синее;
• курсор над молекулой проецируется на воду под собой: в симуляцию уходит скорость его движения, неподвижный курсор воду не трогает. Щелчок встряхивает воду;
• второй режим — высокая вода до нижней кромки верхней буквы. Большая толща без поверхности читается как цветное стекло, поэтому в ней живёт взвесь — пузырьки, которые всплывают, дрейфуют и при повороте отстают от стенок, пока вода раскручивается вслед за молекулой;
• производительность: три пресета качества по устройству — на телефоне нет прохода преломления воды, сетка грубее и шагов вдвое меньше; потолки плотности пикселей и площади буфера, лимит кадров на мониторах 120–360 Гц, пауза вне экрана.

Результат

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