5 чудесни примера за WebGL

При нужда от малко вдъхновение за уеб дизайн ? Ето някои от най-добрите примери за използване на WebGL, които сме виждали през последните няколко месеца.

01. Brakebills University

WebGL: Brakebills University



кирпич след ефекти срещу окончателно изрязване pro
UNIT9 създаде този интерактивен сайт, за да придружава Магите

Когато NBCUniversal посегна към ЕДИНИЦА9 за да се създаде интерактивно второ екранно изживяване за новата поредица Syfy „Вълшебниците“, едно от предизвикателствата, пред които бяха представени, беше да измислят магически урок за всеки епизод. Целта беше да се създаде уебсайт, който е по-информативен от играта, но все пак предлага много предизвикателства и съдържание, което потребителят може да открие.



В тясно сътрудничество със Syfy, екипът на UNIT9 създаде 13 игри за частта „Уроци по магия“ на уебсайта. Те могат да се възпроизвеждат на всички устройства и да се адаптират към въпросното устройство.

„Предизвикателството от технологична страна беше създаването на самостоятелни игри за 13-те урока, които изискват различни технологии - от AngularJS и WebGL до 3D анимации“, казва Ligia Stan на UNIT9.



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

02. Кратко пътешествие

WebGL: Кратко пътешествие

Кратко пътешествие, от Cher Ami

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



„Проектирахме някои елементи в 3D с Cinema 4D и други елементи в 2D с Photoshop. Идеята винаги е била да се получи свеж дизайн чрез комбиниране на съвременни технологии и класически техники “, казва основателят Жан-Фредерик Пасо. „Използвахме WebGL, за да пресъздадем всяка сцена в 3D и дори да има много сложни технически аспекти в този уебсайт, целта винаги беше да предложим приятно усещане за слънчево пътуване.“

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

03. Хистография

WebGL: Хистография

Хистография, от Матан Щаубер

Хистография - израелски дизайнер и разработчик Убийте Stauber Проектът на последната година в Академията за изкуство и дизайн Bezalel - е интерактивна хронология, обхващаща не по-малко от 14 милиарда години, от Големия взрив до наши дни. Буквално разпростираща се върху цялата история на познатата вселена, тя е огромна, интерактивна инфографика, която оспорва нашите предубеждения за това как да общуваме със сложни теми.

Обхващайки теми, вариращи от литература и музика до убийства, изобретения и религия, хронологията на Histography ни приканва да изследваме събития от нашето богато минало, всяко динамично изтеглено от Уикипедия и представено на екрана като малка черна точка. Има два режима: хоризонтален изглед отляво надясно, който позволява на потребителя да се прибере в определен период от време; или подобна на спирала машина на времето, която представя подготвен списък с ключови събития.

моят паспорт ултра срещу моя паспорт

Щубер казва, че винаги е бил очарован от идеята историята да се разгръща с течение на времето: „Хронологиите са най-популярният начин за визуализиране на историята и въпреки това усещах, че винаги са много ограничени. От началото на този проект знаех, че искам да създам времева линия, която не е ограничена до година, десетилетие или период. Исках хронология, която да съдържа цялата история.

04. Deutser

WebGL: Deutster

Deutser, от Не можем да спрем да мислим

Сайтовете за професионални услуги са изправени пред специално предизвикателство за комуникация: няма осезаем обект, който да бъде представен. Когато създавате нов сайт за консултации Deutser, Не можем да спрем да мислим необходимо да разберем как да дестилираме широк спектър от услуги в една основна полза.

Екипът реши да се съсредоточи върху идеята, че Deutser предоставя яснота в несигурен свят. „Разпръснатите частици представляват хаос - нещо, което много компании срещат в днешния свят. Яснотата е представена от частиците, които се събират, за да образуват нещо смислено “, обяснява креативният директор Николас Скимека.

Метафората е толкова ясна, колкото и посланието е силно. Осигуряването на безпроблемната работа на устройствата беше друго предизвикателство. „Частиците са изградени с помощта на WebGL платно с помощта на three.js за опростяване. Изградихме персонализирана система за анимация и опашки, която ни даде по-голям контрол върху анимацията, преходите и кадрите в секунда “, добавя Scimeca.

05. Halo Visualizer

WebGL: Здравейте

Halo Vizualizer, от Активна теория

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

„Използвахме частици WebGL, които използват 3D модел, за да оформят формата на шлемовете на игровите герои, 3D CSS за анимация в парчетата от потребителско съдържание и Canvas за изчертаване и анимиране на хронологията в долната част“, ​​казва Рейчъл Смит, интерактивна разработчик в Активна теория . „Това е добър пример за комбиниране на уеб технологии в зависимост от това от какво се нуждае интерфейсът.“

Тайнственото разбиване и възстановяване на елементи може да дезориентира, но вместо това се чувства напълно течно. Лекото накланяне на потребителските истории и дори елементи като контактни модали обединяват дизайна и движението във всяка част на сайта. Пространствената атмосфера се превръща в език сам по себе си.

Сътрудници: Еспен Брунберг , Сара Драснер