Зад кулисите на „Светлини“: най-новата сензация на WebGL!

HelloEnjoy бе помолен от Interscope Records да създаде интерактивно музикално изживяване с помощта на WebGL за британската художничка Ели Гулдинг .

В HelloEnjoy ние вярваме в създаването на интерактивни 3D изживявания, които са едновременно интуитивни и визуално ангажиращи. Нашата цел е да изискваме от потребителя много малко, за да достигне до по-широка аудитория, и в същото време да ги възнаградим с графики и естетика от висок клас.

Обичаме музиката и винаги сме виждали много потенциал в превръщането й в визуална и интерактивна, така че кога Инструмент на Северна Америка , нашите агенти в САЩ, се обърнаха към нас с този проект, в който се впуснахме веднага.

Клиентът ни даде безплатни творчески поводи и беше много разбиращ с експерименталния характер на технологията, което ни позволи да играем с различни техники за визуализация. По същия начин, по който визуалните ефекти на музика на живо създават повишено изживяване, ние искахме да постигнем това усещане за възприемане на музиката по подобрен начин чрез светлина и цвят, плюс интерактивност.

Технология

Като технологичен агностик ни позволява да се съсредоточим върху решението, което най-добре отговаря на нуждите на нашия проект. В този случай вярваме, че най-добрият вариант е WebGL, нова уеб технология, която предоставя хардуерно ускорена 3D графика в съвременните браузъри, без да инсталира допълнителен софтуер.

WebGL е основно JavaScript API, изграден върху OpenGL ES 2.0, стандартната графична библиотека, използвана днес за изобразяване на 2D и 3D графики не само на настолни компютри, но и на мобилни устройства като таблети и смартфони.

За да разгърнем силата на WebGL, избрахме three.js 3D двигател, мощна и лесна за използване библиотека, създадена от Mr.doob и се поддържа от много талантлив екип от разработчици по целия свят.

И въпреки че можете да започнете да разработвате JavaScript с помощта на текстов редактор, за толкова амбициозен проект като нашия, съдържащ над 12 000 реда код, се нуждаете от по-мощна среда. Ние използваме WebStorm , IDE на JavaScript с автоматично довършване, рефакторинг, анализ на кодове в движение и други разширени функции.

Музика

Като основа за визуалното изграждане заедно с музиката, ние анализирахме различните основи на песента, за да уловим структурата и нивата на енергия за всяка част от преживяването.

Чрез наслагване на формите на вълните на различните стъбла идентифицираме различните секции на песента

Чрез наслагване на формите на вълните на различните стъбла идентифицираме различните секции на песента

Стъблата бяха предоставени от звукозаписната компания и ни дадоха нова перспектива и по-задълбочено разбиране на музиката. Някои от тях бяха използвани за синхронизиране на графични елементи, а други бяха комбинирани, за да се получат висококачествени данни за обем и звуков спектър.

Заобикаляща среда

Нашият творчески подход се основаваше на концепцията за летене над безкраен пейзаж, който реагира на звука и се развива заедно с музиката. Това позволява взаимодействие с потребителя, но също така предоставя страхотно изживяване, ако потребителят реши да не взаимодейства.

Използвахме различни инструменти и техники, за да създадем различните елементи на сайта, някои идват от традиционната разработка на игри, докато други са често срещани в графичното програмиране. Избрахме няколко от тях, които да споделим с вас.

Земя

Теренът е направен от еднакви плочки, които се поставят в зрителното поле на камерата. Спестяваме значително време за обработка, като ги използваме повторно на различни места, вместо да ги актуализираме поотделно. От друга страна, трябваше да се погрижим да ги направим безпроблемни, така че да са напълно плочки.

Самият терен се генерира от карта с височина 66x66 пиксела, изображение в сива скала, показващо колко висока е земята. Започнахме с създаването му във Photoshop с помощта на филтъра Clouds, но полученият терен беше твърде стръмен. Получихме по-заоблен пейзаж чрез прилагане на размиване на Гаус, но знаехме, че все още има място за подобрение.

Най-накрая разбрахме, че стандартната цветова резолюция от 256 нива на сивото не е достатъчно висока за нашите нужди. Изискваше повече прецизност. Нашето решение включва допълнително омекотяване на стойностите на картата на височината в JavaScript, за да се получат нежни хълмове и заоблени долини.

Текстура на Heightmap и генериран терен след изглаждане

Текстура на Heightmap и генериран терен след изглаждане

За да изглежда по-интересно, искахме земята да показва различни цветове и форми. За да направим това, трябва да изобразим динамична текстура в реално време и да я приложим към пейзажа. Започнахме да го правим на платно с разделителна способност 512x512, но производителността страдаше, когато го прерисувахме на всеки кадър. В крайна сметка избрахме да имаме отделна WebGL сцена, която се изобразява върху текстурата, използвана за терена.

Тази сцена на терена работи по същество в 2D със собствена ортогонална камера (която няма никаква перспектива). Тук използваме стандартни равнини, за да създадем различни видове линии и кръгове в различни части на песента. В този момент ние също правим светлините, излъчвани от другите обекти в пейзажа, и накрая използваме последваща обработка, за да го направим безпроблемно по страните.

Примери за текстура на терена в различни точки на парчето

Примери за текстура на терена в различни точки на парчето

Светещи сфери

Различни обекти, излъчващи светлина, населяват нашата среда. Всички те се генерират от код и имат различни форми, шейдъри и поведение.

Сферите са интерактивни и синхронизирани с ритъма. За тяхното засенчване използваме техника, наречена цвят на върха, където цветовете се присвояват на всеки връх и графичният хардуер плавно се интерполира между тях, създавайки прекрасни градиенти.

За да избледним сферите в черно и бяло, използваме персонализиран шейдър с параметри за умножение и добавяне. В графичните карти RGB цветовите стойности варират от 0 до 1, вместо от 0 до 255. По този начин, ако умножим по 1, получаваме същия цвят, но ако го направим по 0, получаваме черно (0,0,0) . Добавянето работи както се очаква, ако добавим 0, цветът не се променя, но чрез добавяне на 1 получаваме бяло (1,1,1), тъй като резултатът се затяга.

Адитивни и мултипликативни операции върху сфери с цветни върхове

Адитивни и мултипликативни операции върху сфери с цветни върхове

Светлинни лъчи

Последната част от песента е много епична. Започвайки с тишина, тя освобождава много енергия наведнъж. Ето къде представяме светлинните лъчи.

За да създадем този ефект, ние изграждаме мрежа от три равнини, завъртени на 120 градуса една от друга. Тяхната текстура е прост градиент, който е смесен с добавки, така че те се изобразяват един върху друг. Резултатът е ярък поток от светлина, който дава приятна илюзия за обем.

Текстура и мрежа на обекта на светлинния лъч

Текстура и мрежа на обекта на светлинния лъч

Twitter интеграция

Името и изображението на аватара на потребителите, които пишат за сайта, могат да се видят по време на преживяването. Туитовете в реално време се захранват от мощния Echo StreamServer платформа, която ни позволява бързо да събираме, съхраняваме и обслужваме данните на живо с малко инженерни усилия.

За тяхното показване се използва мрежа от частици, като всяка частица представлява пиксел от оригиналното изображение. За да създадем текста в имената на Twitter, използваме растерни шрифтове, преобразувани в Glyph Designer , приложение само за Mac, което обикновено се използва за създаване на цветни растерни шрифтове за игри с iOS. Той експортира изображение с всички символи и файл с описание на шрифта във формат .cont Cocos2D .fnt, който, като текстов файл, е лесен за анализиране в JavaScript.

Глас

Гласът на Ели Гулдинг се визуализира като искряща светлина с пътеки, които се движат и променят формата си в зависимост от обема и честотната честота на комбинираните стъбла на вокс.

Този тип данни могат да създадат много големи файлове и трябва да бъдат компресирани по някакъв начин, така че да не увеличават значително времето за зареждане. За щастие в JavaScript е много ефективно да се запазват сурови данни като PNG изображения. Те автоматично се декомпресират от браузъра и пикселните данни могат лесно да бъдат извлечени с HTML5 платно.

Първият ни подход беше да създадем искряща светлина с 3D система от частици, но имахме нужда от твърде много частици, за да постигнем желания ефект. С толкова много ефекти, които ни се случваха, ни остана малко изпълнение за тази задача и осъзнахме, че се нуждаем от различно решение.

За да се получи реалистичен ефект с добро представяне, системата от частици е изобразена през Хронология FX , мощен редактор на ефекти на частици, използван в игрите и експортиран като спрайт лист.

Спрайт лист за 16-кадрова анимация на искрящата светлина

Спрайт лист за 16-кадрова анимация на искрящата светлина

От друга страна, пътеките се създават в 3D, като се използват алфа и адитивни режими на смесване и се анимират в реално време, като се използва комбинация от данни от звуковия спектър и тригонометрични функции, за да се изгладят.

Каркасен изглед на светлинните пътеки

Каркасен изглед на светлинните пътеки

Последваща обработка

И накрая, няколко ефекта се прилагат към крайното изобразяване. Bloom добавя приятна светлина около обектите в сцената, докато винетката намалява яркостта в границите на изображението. Комбинацията от двата ефекта създава по-реалистично и по-топло изображение и засилва илюзията за светлина и сянка.

Последващо обработено изображение отляво, оригинално изображение отдясно

Последващо обработено изображение отляво, оригинално изображение отдясно

Заключение

Вярваме, че 3D графиките в реално време са особено подходящи за подобряване на музиката, позволявайки на потребителите да й се наслаждават по нови и вълнуващи начини, като създават по-богато изживяване с завладяващи визуални ефекти и взаимодействие. Въпреки че е важно да запомните, че графиките са предназначени да обслужват преживяването и никакво техническо магьосничество не може да замени добре дефинираната естетика, няма малко съмнение, че появата на хардуерно ускорено 3D в мрежата и мобилните устройства носи нови нива на изразителност. Предстоят ни вълнуващи времена.

И ако искате да видите какво прави Холивуд през 2012 г., разгледайте най-добрите 3D филми .