Примечание редактора: В рамках празднования первой конференции Three.js мы делились творческими экспериментами на протяжении всего месяца, а на этой неделе мы снова с вами! Сегодня мы рады представить еще одну демо-версию Фрэнка. В Volatile Nexus он погружается в стекло, каустику, преломления, блуждающие кубы, отражения и звук, объединяя все это в один завораживающий эксперимент.
🇫🇷 Обратный отсчет пошел! Самая первая конференция Three.js приближается, и билеты все еще есть в наличии, если вы подумываете о поездке в Париж. Использовать код CODROPS для скидка 15% и возьми билет →
Все началось с вопроса: «Могу ли я изготовить красивое стеклянное кольцо с разноцветной каустикой?» в итоге получилось неустойчивое, почти жидкое стекло, каустики, преломления, почему бы не добавить несколько кубов (или много их), отражения, звук и многое другое.
В начале…
…Я просто хотел добиться цветного стекла с каустикой. Например, могу ли я управлять каустикой и радужностью? Давайте добавим немного бликов и всё будет в порядке. Мне уже тогда понравился результат, так как он выглядел как «металлическая обложка альбома 80-х» или что-то в этом роде.
Добавление отражений от пола сделало этот вид еще более завершенным.
Так что насчет кубиков?
Разве не было бы интересно добавить множество кубов, блуждающих по определенным путям, просто потому, что мы можем это сделать? И, работая над этим, не забудем преломить те, что в данном стакане.
Легче сказать, чем сделать, поскольку преломление стекла было сложной задачей. Это отличная кроличья нора при работе с Three.js и его реализацией «как есть».
Наконец, я переключился на взвешивание преломленного слоя по обращенному к нему члену — сильному, если посмотреть через стекло лицом к лицу, тускнеющее под углами, где настоящее стекло становится зеркальным. Это убивает добавку «промывка» и заставляет преломленные кубики оставаться на месте. внутри стекло вместо того, чтобы светиться на нем.
Тем временем…
…не было бы даже лучше, если бы мы добавили некоторые пользовательские взаимодействия для кубов и стаканов?
Добавление некоторых отталкивание близости мыши для кубов — курсор не проецируется в трехмерный луч выбора в каждом кадре, один раз трансформируется в локальное пространство роя (гораздо дешевле, чем преобразование 1000 кубов в мировое пространство). Любой куб в пределах радиуса отражения этого луча отталкивается перпендикулярно ему с помощью квадратного спада, приводимого в движение демпфирующей пружиной — поэтому кубы разлетаются в стороны, когда ваша мышь проходит рядом с ними, и плавно возвращаются в формацию примерно через полсекунды после того, как они уходят.
Смещение ограничено, поэтому ничего нельзя выбросить за пределы сцены. Это работает при наведении и при выведении на орбиту.
Для кольца я настроил импульсный пул на 12 слотов в виде однородных массивов, немного математики волнового фронта (гауссова оболочка в age · 1.4, cos(dist · 9 − age · 11) колебание, exp(−2.6 · age) затухание), нормальная реконструкция центральной разности с той же смесью 0,7, дросселированием появления 30 мс и отображением скорости курсора → силы (быстрые удары бьют сильнее, ограничены до 0,4–1,8).
Я взял все это из более раннего эксперимента под названием Нестабильное твердое тело.
Что адаптировано для кольца: направление смещения является торическим аналогом радиала сферы — каждая вершина выталкивается наружу из ближайшей точки центральной окружности трубки кольца (радиус 0,78 в плоскости токарного станка). Это зависит исключительно от положения, поэтому вершины шва токарного станка движутся одинаково, а поверхность остается водонепроницаемой.
Рейкаст нацелен на реальную сетку кольца через все преобразования оснастки/раскачивания (с дополнительным дросселем на 25 мс, поскольку токарный станок имеет ~ 24 тыс. треугольников и не имеет BVH).
И поскольку техника живет в материал positionNode/normalNodeтри вещи пульсируют бесплатно, которых у сферы никогда не было: преломление (колеблющиеся нормали искривляют рассеянный фон — тыкание в стекло размазывает конфетти), каустика (проход тени использует ту же самую смещенную поверхность), а напольное зеркало (он отображает тот же материал).
И в конце…
…почему бы не создать несколько процедурных звуковых сигналов и тонов, чтобы сделать сцену завершенной?
Я знаю, что есть много, много людей, у которых звук получается сразу, но для меня звук — это нечто вроде небольшого дополнения, дополняющего всю сцену.
Что касается колебания стекла: Два высокодобротных резонанса (640 Гц + 963 Гц) фильтрует шум до чистого тона с помощью медленного вибрато — чье уровень каждый кадр управляется живой энергией пульсирующего поля. Погладьте стекло, и под вашим пальцем раздастся гул; остановитесь, и он затухнет точно так же, как затухают видимые волны, потому что он читает те же числа. Он физически не может спамить — нечего срабатывать.
Отверстие фильтра пэда также было смягчено, поэтому комбинированный отклик остается теплым, а не резким.
Кубики через кольцо — блестящая кровать (три биения треугольника плюс яркий шум), уровень которого следует за доля потока, находящегося в данный момент внутри отверстиявычисленный на основе фазы головы относительно окна отверстия пути. Вы услышите, как искра нарастает, когда комета проходит сквозь нее, и исчезает, когда хвост выходит из нее — примерно десятисекундный цикл дыхания при вашей скорости 0,1.
И вуаля!