Оффтоп Andrey Prakhov
162

Blend4Web: 3D визуализация олимпийских объектов

На сайте зимней олимпиады в Пхёнчхане активно используется 3D для визуализации спортивных строений и карт, но почему это стало настолько масштабным и важным?

В закладки

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

Совсем недавно прозвучал анонс Facebook о возможности размещения 3D-объектов в постах пользователей, наравне с изображениями и видео. Таким образом, использование трехмерных сцен выходит на бытовой уровень.

В самом деле, наиболее популярными устройствами для выхода в сеть Интернет являются мобильные девайсы, которые прогрессировали до такой степени, что даже бюджетные модели справляются с 3D без особых проблем. Поэтому использование 3D на сайтах становится обыденностью, но давайте вернемся к официальному ресурсу Олимпиады 2018.

Легко узнаваемый символ в центре площадки, да и форма здания говорят о том, что строение — олимпийский стадион, где проходили мероприятия Зимней Олимпиады 2018. Но если вы сочтете, что это спутниковый снимок или удачная фотография, то глубоко ошибетесь. На самом деле, изображение было сделано с одной из множества 3D-презентаций, которыми так изобилует официальный сайт олимпиады.

Десятки крупных зданий, сотни мелких объектов и тщательно восстановленные в 3D интерьеры. Множество спортивных комплексов олимпиады можно изучить не только снаружи, но и внутри. Например, это тот хоккейный дворец, где наша команда взяла золото!

Наверное, вы уже перешли по ссылкам выше и полюбовались на красочные презентации, которые смотрятся весьма натурально, но зададимся вопросом, насколько сложно это было сделать?

Особенность создания трехмерного объекта в том, что, чем выше детализация, тем более реалистично он будет выглядеть. Бездумное усложнение приводит к серьезной нагрузке на аппаратную часть устройства, воспроизводящего 3D, и требует соответствующего времени на моделирование. А если оценить с точки зрения сложности те десятки презентаций, что есть на сайте олимпиады, то можно восхититься усидчивостью разработчиков.

На самом деле была использована особая технология создания 3D-объектов, где смешивались реальные фотографии с трехмерными элементами. При этом высокая детализация обеспечивалась только для создания ключевых строений, а все остальные являются «прикрытием» для фотографий. Именно это позволило авторам презентаций быстро и в срок разработать сотни моделей для презентаций.

Но есть еще одно немаловажное условие — подходящая среда разработки. Создавать подобные презентации с нуля, используя «голые» 3D-движки – баснословная потеря времени. Поэтому разработчики презентаций выбрали, наверное, самый технологичный фреймворк, который ориентирован на создание 3D презентаций исключительно для воспроизведения в веб-браузере — Blend4Web.

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

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

Еще один пункт, на который стоит обратить внимание — информативность. Некоторые карты предлагают своеобразные виртуальные туры по трассам и ключевым местам движения спортсменов, например, биатлонистов. Тщательно воссозданные траектории и текстовые сообщения позволяют лучше представить особенности данного вида спорта, а также место на трибуне, которое стоит занять для наиболее выгодного просмотра конкретного состязания.

Итак, 3D в веб-браузерах уже становится обыденностью и предлагает лучшие возможности для визуализации разных объектов. Однако, вместе с привлекательностью стоит учитывать еще один момент — интерактивность. Ведь именно она позволяет посетителям сайта взаимодействовать с программой и получать от этого максимальный эффект. Массовое использование 3D-презентаций для столь высоконагруженного проекта, как сайт Олимпиады, показывает готовность и необходимость этого типа контента.

Кстати, следующая ступень развития 3D в браузерах — возможности, предоставляемые устройствами виртуальной реальности. Кто его знает, возможно для следующей олимпиады будут сделаны презентации с использованием устройств VR.

#кейс

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Andrey Prakhov", "author_type": "self", "tags": ["\u043a\u0435\u0439\u0441"], "comments": 2, "likes": 6, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 34482, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 34482, "author_id": 131719, "diff_limit": 1000, "urls": {"diff":"\/comments\/34482\/get","add":"\/comments\/34482\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/34482"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

2 комментария 2 комм.

Популярные

По порядку

0

Кто знает - этот Blend for WEB?
Кто-то пользовался?
Впечатления?
Комментарии?

Мы до сих пор по старинке 3Д делаем, на WEBGL + Unity.

Ответить
1

Знакомо. Есть некоторые нюансы по b4w:
Плюсы. Заточен исключительно под 3D для веба. Имеет встроенный визуальный редактор логики и развитое API. Хорошая документация. В качестве редактора требует знание Blender, именно в нем и происходят вся магия сборки сцен. Хоть движок и имеет достаточный функционал для создания игр, но больше всего его используют для создания всякого рода 3D презентаций, конфигураторов. Мало того, в последний год разрабы приложили массу усилий именно для упрощения создания таких программ.

Минусы в неудобном лицензировании. Бесплатная лицензия позволяет использовать веб-плеер для полноценного проигрывание 3D сцен, т.е. с программным окружением, анимацией и всего того, что поддерживает движок. Однако, писать код на js нельзя, только использовать визуальную логику. Платная - очень дорогая. Ранее была вдвое дешевле, тогда и приобрели. Сейчас невыгодно, но упорно ходят слухи, что скоро будут существенные изменения в ценовой политике

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления