WebGL-портфолио Susurrus: акварельный 3D-мир на Three.js и Kuwahara-шейдере

Чем это могло бы быть, если бы 3D-сцена в браузере вела себя как акварельный рисунок — текучая, отзывчивая, интерактивная? Дизайнер Wei Xianyao (Weisdevice) опубликовал case-study на Codrops о проекте Susurrus: WebGL-сцена, целиком построенная вокруг одного Kuwahara-шейдера в постпроцессинге, с отражающей водой, физикой и звуком. Перевод материала.

Главный приём — Kuwahara-фильтр как единственный пасс постпроцессинга. Всё остальное (отражения, частицы, реакция на скролл, физика появления хлеба по клику) встроено вокруг него и подгоняется под его эстетику.

Концепция: уют, которого не бывает

Wei работает в свободном режиме: не использует Figma и подобные инструменты на личных проектах, идёт от концепта в голове. Susurrus родился как «эхо в сознании»: дом, плавающий на отражающей воде, с Kuwahara-шейдером, наложенным как пост-процессинг — чтобы получить «3D-веб-впечатление как картина».

Интерфейс при этом намеренно прост — фокус на 3D-контенте. В сцене присутствуют два поэта, но смысловое ядро — атмосфера и эмоция, переданные через визуал и звук. Само слово «susurrus» (шёпот, шорох) задаёт тон: слова намеренно невнятны, важнее — настроение.

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

Kuwahara-шейдер: ядро всего проекта

Весь визуальный стиль Susurrus построен на Kuwahara-фильтре. Это единственный пасс постпроцессинга — всё остальное собрано вокруг него. Wei поставил его на этап раньше, чем закончил 3D-модели в Blender: так можно видеть итоговый эффект и подгонять модели под шейдер, а не получить сюрприз в финале.

При исследовании автор нашёл несколько подходов, опираясь в основном на разбор Maxime Heckel о Kuwahara-фильтре и painterly-шейдинге. На основе этих референсов Wei сделал упрощённую реализацию:

• Не использовал TensorPass, чтобы пасс остался простым (хотя он усиливает детализацию).
• Использовал отличающийся подход на vertex-стадии, по сравнению со стандартными реализациями.

Стандартный vertex для Kuwahara обычно выглядит так:

Версия Wei проще:

Wei не применяет полную модель-вью-проекционную матрицу (MVP), чтобы немного ускорить вычисления. Цена компромисса — эффект слабее, когда камера подходит близко, но в Susurrus камера не приближается к моделям анимацией, поэтому это ОК.

Отражающая вода в три шага

Авторская «грязная» реализация воды:

• MeshReflectorMaterial в акварельном стиле. Из-за визуальной обработки разрешение можно ставить очень низким — это сохраняет производительность на мобильных и десктопе.
• Кастомный шейдер на отдельной плоскости поверх MeshReflectorMaterial — добавляет детали и анимацию воды.
• Освещение подкручено так, чтобы вода казалась живее, не плоской и не скучной.

Reveal Effect для интро-сцены

Wei использовал ScrollControls для контроля параметра uProgress, который подаётся в reveal-шейдер. Шейдер применён к ScreenQuad — это удобный способ реализовать эффект «открытия» сцены при скролле.

Звук, физика и адаптивность

Звуковые эффекты. Через react-howler: разные звуковые взаимодействия по hover/click. Эффекты интегрированы с фоновой музыкой, чтобы получился lo-fi-стиль — «картина, которая может петь».

Физика. Главный интерактивный элемент Susurrus — Spawning Bread on Click: щелчок порождает физический объект (хлеб), который падает в сцену. На реализации стоит React Three Rapier.

Адаптивность. Стандартная для автора цель — мобильная совместимость и плавная производительность на mobile и более старых устройствах.

Выводы

Susurrus — пример того, как один точно выбранный шейдер может задать стиль всему проекту: от моделей в Blender до анимации воды и интерактивности. Идея Wei — начать с Kuwahara-фильтра ещё до финальных моделей — практичная: видишь итоговый эффект сразу и не тратишь время на проработку деталей, которые шейдер всё равно сгладит.

Для тех, кто работает с Three.js / React Three Fiber, в случае Susurrus есть три прямых заимствования: компактный паттерн ScrollControls + ScreenQuad для reveal-сцен, дешёвая реализация отражающей воды через MeshReflectorMaterial низкого разрешения + кастомный шейдер сверху, и выбор пасса постпроцессинга на старте проекта, а не в финале.

Источник: Susurrus: Crafting a Cozy Watercolor World with Three.js and Shaders — Codrops.