Автор оригинала: FreeCodeCamp Community Member.
Yağız Gürgül.
Мне было 14 лет, когда я впервые увидел Гориллаз – чувствую себя хорошими музыкальным видео. Я влюбился в это, говоря: «Whaatt? Мультипликационное музыкальное видео? Как удивительно!». Следующая вещь, которую я знал, я покупал альбом Demon Days.
Годы спустя … около 4 месяцев назад YouTube показал мне новое музыкальное видео Gorillaz, Andromeda. Когда он завершил буксировку, я сразу подумал, что это видео может быть отображено на браузерах.
Вот когда я начал воссоздать андромеда музыкальное видео с WebGL. Не стесняйтесь проверить это Гориллаз – Андромеда в WebGL.
Когда я начал воссоздать, во-первых, что я сделал, было скачать Three.js , который представляет собой сплошную 3D JavaScript библиотеку. Я скачал источник и начал с простой сцены «Hello World». Тогда я начал планировать объекты, текстуры и анимации.
Я сломал свой проект на четыре основных частя. Это фон сцены, сцена метеоров, сцена и анимация Сатурна.
Анализируя музыкальное видео
Андромеда Музыкальное видео на самом деле простая сцена. Фоновое изображение галактики движется слева направо. Сфера с течетной текстурой, которую я позвоню, Сатурн. И метеоры танцуют спереди. Время от времени, когда музыка становится выше, метеор приходит от верхнего левого угла и сокрушает в Сатурн и заставляет его светиться ярким.
Я собирался подражать аналогичному. Поэтому я набросал сцену ниже с компонентами, такими как фон, сатурн и метеоры.
Фоновая сцена
Это похоже на самую простую часть сцены, и это правда. Технически это легко. Сначала создайте самолет. Анимируйте его слева направо. Создайте еще один и поместите его за первым. Установите свои режимы смешивания к добавке, чтобы они выглядят объединены. Наконец, добавьте некоторые текстуры.
Но как насчет поиска правильной, настоящей 4K, красивой и красочной галактики текстуры?
Ну, это было тяжело.
Я посмотрел на тысячу сайтов для лицензированных или запасов бесплатных изображений. Но все, что я мог найти, была пара хороших, острых, 4К обоев, а не реальных текстур.
Это было плохо. Я должен был купить и загрузить их один за другим. Затем попробуйте преобразовать их в непрерывные текстуры. И отредактируйте их яркость и настройки контрастности. После всех этих шагов я проверил их в сцене, пытаясь увидеть, хорошо ли они выглядят хорошо или нет.
Потребовалось некоторое время, но мне удалось найти идеальное изображение. Что было полностью того, и я действительно был рад видеть результаты:
Мне нужно было добавить некоторые эффекты после обработки, такие как изменение оттенка в мой проект. Я использовал EffectComposer (вы можете найти подробное руководство здесь. ), что не является частью TROW.JS, но приходит с примерами этого. Используя ExpectComposer, мне просто удалось добавить эффекты оттенков на мою фоновую сцену.
Сцена Meteors
Метеоры были самой простой частью проекта. В то же время они были врагами исполнения. Есть 500 из них движутся и вращаются в сцене! Мне нужно было найти модель метеора в простейшем способе иметь гладкие анимации.
Удивительно, что вы можете сделать со стоковыми геометриями в трех. С Октаэдронгеометрия Я деформировал каждую вершину. Это в основном выглядит как рок:
Как я уже говорил, этот проект имеет 500 метеоров. Каждый имеет разную скорость движения, скорость вращения и случайный размер. Они двигаются справа налево. Когда они выходят с вида, они телепортируют на правую сторону вида.
Метеоры за Сатурном на самом деле являются одним из одних статических изображений. Сначала я попытался создать это статическое изображение с нуля. Я нарисовал несколько случайных кругов с эффектом свечения, но тогда мне не понравилось, как они смотрели в сцену. Затем я нашел текстуру звезд. Я тонировал его желтым, и установил свой режим смеси на добавку.
Сцена Сатурна
Без сомнения, это была самая трудная часть сцены. Чтобы понять, почему вам нужно проверить функции этого в музыкальном видео:
- Текстура анимирует таким образом, что верхняя часть его движется быстрее, чем нижняя часть.
- Сатурн не вращается, но текстура заставляет его выглядеть так, как она качается.
- У Сатурна есть внутреннее свечение. Края и центральные части ярче.
- Сатурн также имеет внешнее свечение. На самом деле есть два внешних светильника. Один из них ярче и близко к краям, другой – больше и темнее.
Текстура
Найти правильный красивый Tex … ну вы уже знаете, что это сложно. Но один из моих коллеги дал мне самую простую идею, чтобы искать “Текстура Сатурна” на изображениях Google. Я был шокирован тем, что я нашел.
Первое изображение, которое придумало, было то же самое изображение, используемое в музыкальном видео Andromeda. Видел ли художник/дизайнерский поиск «текстуры Сатурна» на Google Images и выбрать первый в производстве? Это общее?
Во всяком случае, поскольку я нашел свою текстуру Сатурна, следующая часть должна была оживить ее. Это была самая большая проблема. После того, как я немного исследовал, я понял, что мне нужно было использовать что-то называемое Фрагмент шейда Отказ Но что такое черт возьми? Насколько я понял, это код, который живет в .js/.html, но работает в GPU.
Когда 3D-модель отображается, каждый пиксель на этой модели должен знать, какой цвет текстуры он должен использовать. Один из способов сделать это для использования УФ-сопоставление Отказ Я анимирует ультрафиолетовые карты координаты экспоненциально. Таким образом, верхняя часть стала быстрее, чем дно. Это было немного пробным и ошибкой, но я думаю, что я его прибил.
В видео, Сатурн также качели. Для достижения этого движения я получил помощь от функции греха. Один из входов этой функции SIN является временем кадра, что со временем увеличивается. Итак, сфера выглядит так, как будто она качается.
Светится
В проекте есть три типа светильников, внутреннего, большого внешнего и небольшого внешнего свечения.
Для внутреннего свечения я создал простую черно-белую градиентную текстуру. Затем я добавил свои пиксельные цвета в оригинальный цвет текстуры Сатурна в шейдере фрагмента:
Сначала я подумал, что смогу создать внешние светильники, используя фрагментный шейдер. Но я решил, что будет излишек, потому что камера и Сатурн не вращаются.
Итак, я создал черно-белые круговые градиентные текстуры. Я поместил их за Сатурн и установил свои смены моды на добавку. Это спасло меня огромное количество времени развития.
Вы можете увидеть большее свечение в действии. Не забывайте, что это на самом деле самолет позади Сатурна:
Это меньшая, но более яркая свечение, созданное с той же техникой:
Это окончательный результат Saturn со всеми включенными светильниками:
Анимация
Заключительная часть проекта состояла в том, чтобы создать анимацию, которые были синхронизированы с песней.
В видеометре METEOR приходит от верхнего левого угла и падает в Сатурн три раза. Во время первого сбоя, фактическая текстура Сатурна, эффекты свечения и фона становятся видимыми. Во время второго и третьего аварий текстуры Сатурна и светильники становятся ярче.
Я выбрал Tween.js , библиотека анимации JavaScript, которая является супер простым в использовании. Целая сцена динамически контролируется параметрами, такими как, непрозрачность фона, скоростью потока текстуры и внутренней и внешней яркостью свечения. Затем я отслеживал текущее время игрока YouTube и начать анимировать эти параметры в правильных секундах.
Вы можете увидеть второй взрыв в действии ниже:
Принося их все вместе
Принося все свои компоненты вместе, я постоянно сравнил свой проект с реальным музыкальным видео. Я прослушал одну и ту же песню и снова смотрел одинаковое видео и снова, чтобы убедиться, что мои анимации сочетаются с фактическим видео. Много раз я полностью изменил значения эффектов полностью, чтобы они обращались к глазу зрителями.
После многих модификаций и перемещения назад и вперед вокруг сцен я был очень доволен конечным результатом, моим конечным продуктом. Даже я не ожидал увидеть что-то это красивое, когда я впервые начал.
Тестирование проекта на мобильных устройствах также было удовлетворительным. Чтобы увидеть анимацию, бегущие как гладкие, так как на рабочем столе было великолепно. Мне не пришлось делать какие-либо трюки для мобильных устройств.
Я должен сказать, экспериментирование с 3D было удивительным опытом. Если вы хороши с JavaScript и Math, но нет большого опыта в 3D, я настоятельно рекомендую вам играть с ним. Это награждается, чтобы увидеть, что вы можете сделать с некоторыми плоскостями и сферами.
- Разработчик: Ягиз Гургул
- Ссылка на проект: http://yagiz.me/andromeda/
- Источник проекта: https://github.com/yagiz/andromeda.