Quasar
Интерактивный интерьер у вас на сайте
Quasar 3947

607a2d892c451894c1588508568d4b70.jpg

Всем привет. Осваиваю web интерактив. Попытка сделать что-то законченное) 

Управление с клавиатуры WASD + мышь Чуть позже добавлю поддержку управления для мобильный устройств. 

Работает во всех популярных браузерах. 

Сам интерьер - http://foleg.ru/wp-content/Interior_for_web/Interior_for_web.html

Технология позволяет добавить практически любой интерактив, например такой, как смена материалов, переключение света, инфографика и прочие фишки интерактивных интерьеров. (Мои руки пока дошли только до графики)

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

Согласен, графически это проигрывает популярному сегодня движку Unreal Engine 4. Но, во первых это только мои пробы. Я знаю, что движок, да и сама технология способна на большее. Во вторых пока в UE4 очень сырой экспорт в WEB. И даже такой результат будет сложно достижим.

 Да, забыл сказать, движок этот - Blend4web. Он интегрируется в такой 3D пакет, как blender. Таким образом blender выступает в роли визуального редактора. Причем не просто редактора, а полноценного 3D пакета, в котором и создается сам контент для движка. Это еще один + в пользу blend4web над UE4.

PS: Прошу дизайнерам сильно не пинать меня за дизайн) Я так воодушевился созданием подобного, что дизайн мне был не интересен) В следующей попытке обязательно уделю этому особое внимание.

интерактив, браузер, blend4web, презентация, тур

Комментарии (71)

0
Davidd
Davidd
Скажите, в чем преимущество загрузки в браузере над загрузкой через браузер на жесткий? Если правильно понял, то это основная фишка Blend4web.
+9
Quasar
Quasar
Объясню. Это все просто. Пользователю зачастую лень что то качать, устанавливать. Он зашел в браузер, он знает, что это такое. Он зашел на сайт и смотрит.
Вы например знаете, что для запуска того же приложения из UE нужно много чего установленного на компьютере. Не говоря уже о версиях операционных систем.
Это универсально. Доступно. Скачивать это не удобно, не всегда надежно. Может не запуститься, может не потянуть компьютер. Лень. Я говорю про потенциальных клиентах.

Это совсем другая идеология. Пример с интерьером это всего лишь пример, который я хотел сделать, который был бы интересен тут на сайте. Зайдите на официальный сайт движка. Там есть масса примеров, которые покажут области применения.
Тут никакого холивара не может быть. Я работаю в UE и достаточно успешно. Но я использую его не для таких задач, потому, что он пока такого не может, что может blend4web.
0
Quasar
Quasar
Комментарий удален
0
Oleg.budeanu
Oleg.budeanu
В UE4, насколько я помню, есть экспорт в HTML5.
Честно говоря сам не пробовал, но говорят что много подводных камней. Но если их обойти, то качество должно быть намного лучше.
+4
Quasar
Quasar
Да, есть) Он еще в стадии тестирования. Попробуйте сделать, что либо внятное, что ли бо мало весящее, и работающее везде) Я пробовал. У меня есть примеры WEB интерактива из UE. Пока это очень сложно и сыро.
+1
Oleg.budeanu
Oleg.budeanu
Да, так и есть, пока сыровато, да и демок внятных найти почему-то не могу. Надо будет у них на форуме поспрашивать.
Но и на сайте Blend4Web я не вижу качественных презентаций. Везде графика 90-х годов. Может поделитесь ссылкой на что-то более вменяемое? А то такими проектами и не убедишь клиента потратить от $5k на такую презентацию :)
+1
Quasar
Quasar
Так я и не уговариваю делать на движке интерьеры) Хотя можно. Вы просто поймите, что это браузер. Поймите, что за возможностями можно упустить пока графику. И самое главное. По поводу графики в архитектуре только у нас в странах СНГ такой ажиотаж)
+3
Oleg.budeanu
Oleg.budeanu
Поверьте мне, я прекрасно всё понимаю. И какие технологии используются, и как это всё работает.
И дело не в уговорах делать не делать. Я давно рассматриваю эту возможность, и у меня есть клиенты, готовые платить за такие проекты.
Но дело в том, что я не могу показывать проекты такого качества, как ваш например (и тем более с сайта blend4web).
Просто потому что сейчас на дворе 2017 год и это качество неприемлимо. Приходится пока делать панорамы и использовать всякие склейщики с интерактивными элементами.
+5
Quasar
Quasar
Я ожидал подобного тут) Вы все равно не понимаете) Я работаю в UE уже три года. За это время 90% моего заработка составляли проекты на движке. И за все 3 года я сделал все го лишь 2-3 интерьера в нем. Никому это нафиг пока не нужно. Клиенты спрашивают и сливаются, когда понимают, что в итоге это гемор для них же. Зачем им многомегабайтное чудовище, которое они могут запустить не везде, да и зачем оно вообще? Какая польза от таких презентаций красивых интерьеров? Никакой. Ну поменяешь ты там материал, свет выключишь. А дальше то что? Люди готовы платить за реально полезные вещи. За реально полезный интерактив. Это я говорю не в теории, а за несколько лет практики.
0
Oleg.budeanu
Oleg.budeanu
Уточните - на какой рынок вы ориентируетесь ?
0
Quasar
Quasar
Пока я работал только с заказчиками из снг. и достаточно успешно.В основном это контент для строительных фирм, производства. За все время я видел только несколько коммерческих проектов интерьеров. Все остальное просто демки.
+1
Oleg.budeanu
Oleg.budeanu
Ну вот вам и ответ.
Есть разные сегменты рынка.
Если говорить о продажах недвижимости - то на западном рынке для продажи юнитов в здании арендуются огромные площади, высылаются приглашения, много стендов с разной информацией, и на данный момент главный стенд - очки виртуальной реальности с презентацией на Unreal Engine 4. С фотореалистичным качеством.
И клиенту до фонаря - будет это в браузере, на маке или линуксе. Ему важно продать, чтобы клиент одел очки, ощутил себя в этом интерьере, охнул и выложил 2-3 миллиона баксов за пентхаус.

Если мы говорим про сегмент рынка дешевых интерьеров - то возможно они и попросят презентацию в браузере. Но даже такие будут кривиться от качества, которое на данный момент предлагает HTML5/JS технологии. В скором будущем ситуация несомненно изменится, но не ждать же его вечно :)

И последний сегмент это производители - мебели, материалов, кирпича, сантехники и т.д. Вот им презентация в браузере Blend4Web или SketchFab будет просто как манна небесная. Потому что им нужно показать продукт со всех сторон.

Ваш личный опыт отсутствия проектов или невостребованности на рынке СНГ не говорит о том, что standalone презентации (те, которые весят гигабайты) не нужны никому.
Это ваш опыт, основанный на пребывании в одном сегменте рынка.

Я бы добавил, что меня радует разнообразие продуктов в этой сфере, и что это движется большими шагами вперед.
0
Quasar
Quasar
Это даже не личный опыт) Я общаюсь постоянно с коллегами в этой сфере. Скажите вот например у вас есть коммерческие проекты на UE? Или может у вас есть пример коммерческого интерьера или экстерьера? Ну хотя бы в портфолио у когонибудь или у студии какой?
+1
Oleg.budeanu
Oleg.budeanu
Скоро я второй раз лечу в США для помощи в создании интерактивной презентации.
Первы раз я летал для помощи в создании презентации вот этого проекта :http://122delaware.com,  презентация намечена на май этого года. Если хотите - слетайте в Канзас и посмотрите :)
Вы должны понимать одну важную вещь - эта индустрия новая, каждая компания, которая создает такие презентации - делает это внутри фирмы под кучей договоров о неразглашении информации. Стоимости таких проектов начинаются от $50000, и каждая компания считает, что они делают это первыми, делают нечто нереально фантастическое. Поэтому в интернете вы максимум что увидите - личные наброски и некоммерческие проекты.
Верить не верить - дело ваше личное.
По-крайней мере вы меня лишний раз убедили насколько рынок СНГ отстал от всего мира уже и в этом плане.
0
Quasar
Quasar
Скажу вам, что проекты за 3млн руб. не так уж меня и впечатляют))) Поверьте, что даже в снг это малые суммы за разработку интерактивных презентации для каких нибудь заводов и предприятий) Давайте не бросаться тут суммами)) Вы можете быть бесконечно правыми, и делать большие деньги на интерьерах в UE, но я говорю про общую картину в снг. Про обычный рынок визуализации.
+1
Oleg.budeanu
Oleg.budeanu
Вы меня немного неправильно поняли. Я не бросаюсь суммами, и не хвастаюсь.
Я объясняю причины отсутствия такого плана презентаций в портфолио компаний или художников.
+5
banzayer
banzayer
Блин, продолжайте. Так хотелось посмотреть как будет выглядеть абзац с ограниченной шириной колонки ))))
0
giglen
giglen
еще несколько сообщений и читать будем, как китайцы! Сверху вниз!))) Сорри за оффтоп!)
+1
banzayer
banzayer
Думаю потом уже не важно будет сверху или снизу...
0
Motocat
Motocat
Мне большеhttps://sketchfab.com/  нравится, не такой тормозной.
Blend4web может ещё допилят.
0
Quasar
Quasar
А при чем тут sketchfab?)) Тут мы имеем движок для создания контента и полноценных приложений. А sketchfab это просмоторщик всего лишь. В котором вы вряд ли сделаете что то похожее даже на мой пример.
0
Motocat
Motocat
И чемhttps://sketchfab.com/models/3aa64527d1614998b4812bfefbbc896a  эта сцена так сильно от Вашей отличается?
Тем что грузится в разы быстрее? Или что не тормозит так сильно?
Да в blend4web больше фишек, так показали бы их в презентации. Что объекты можно перемещать, что цвета можно менять. Пока интерактивностью там и не пахнет.
+3
Oleg.budeanu
Oleg.budeanu
Тем, что вы показываете "плеер". А Blend4Web это движок. Что вы в нём сделаете - ограничено только вашими знаниями и прямотой рук. Хватит глупые вопросы задавать :)
0
Quasar
Quasar
Ну простите меня, что показал вам не все фишки движка) Их достаточно, поверьте. Это первый опыт, о чем я собственно и сказал выше. А еще это эксперемент. Я не видел пока ничего подобного на просторах. Может и есть, а может и намного качественнее моего теста, я не спорю, если найдете, буду только рад посмотреть и подчерпнуть опыта.
Сравнение со скетчфабом просто не уместно. Вы не понимаете о чем говорите.
0
Motocat
Motocat
Поздравляю, вы нашли то, чему уже несколько лет.
Вы мою позицию никак не поймёте, что для целей дать покрутить планировку лучшеhttps://sketchfab.com/  подходит.
0
Quasar
Quasar
)) Не буду больше с вами спорить) Мне все понятно)
0
mr.spoilt
mr.spoilt
А и не нужно спорить, потому что конкретно для презентации интерьера и планировок скетчфаб отлично подходит, особенно, если уже есть готовый проект. нужно просто запечь через плагин вместе с рендером текстуры и настроить за 5 минут их корректное отображение на скетчфабе, и получим отличный результат, конечно, лучше если PRO аккаунт там. А сколько нужно времени, чтобы допилить сцену (создать заново фактически) для такого движка? Тут определенно нужно понимать, что эти сервисы (технологии) идут параллельно и не нужно выделять их как черное и белое. Нужен интерактив - мучайте движки, не нужен интерактив - размещайте в скетчфабе. Зачем мне интерактив в готовом интерьере, свет включать, телевизор? Клиенту нужно посмотреть расстановку мебели или планировку и тут отлично справится скетчфаб, в общем, я об этом и Motocat о чем-то подобном.
0
Quasar
Quasar
Ничем эта работа не отличается от того же скетчфаба. Все тоже самое. Запеченный свет)
Это надстройка над 3д пакетом - blender. И все) Все тоже самое, что и скетчфаб, только с кучей доп фишек. Я прекрасно знаком с скетчфабом) Да, можно запечь все и засунуть туда. Ну так) На словах) Много ограничений. Нет свободы. Да и от лого ты не избавишься их) Не видел на скетче хороших работ по интерьеру) Ну разве что эта более менее -https://sketchfab.com/models/0ffa38af8b1d4c69a6b22cc06f2d39f2 
0
mr.spoilt
mr.spoilt
От лого избавлят статус PRO.
0
Prog
Prog
А мне вот эта понравилась )))
0
sunsetrain
sunsetrain
Что забавно, автор работы на blend4web похоже вообще не запаривался на счёт оптимизации - сцена в sketchfab содержит 14 текстур 1к-2к против blend4web сцены где 78! текстур в среднем 1к! а разница загрузки несколько секунд! Ну и не надо забывать что sketchfab это вообще не промышленный инструмент, Ни одна более менее серьёзная компания не станет рассчитывать на очередное облако, тем более которое уже не раз падало (тех работы и прочие отключения). Blend4web мало того что хранится на сервере, некоторые проекты вообще можно высылать по почте одним файлом. И не надо забывать что в первую очередь blend4web это инструмент для продвижения, маркетинга, повышения конверсии, а не поделки показывать (хотя и это очень даже можно).
0
Quasar
Quasar
Ну почему не запаривался) 78 текстур, да. Конечно можно было многие слить в атлас. Но в основном большая часть текстур это лайтмапы запеченые. Они без дифуза. Просто свет. Уже в шейдере все это дело компонуется. А на скетчфабе все запечено в одну тектуру вместе с дифузом, светом и даже бликом иногда) Это вообще не pbr воркфлоу))

Посчитал 35 карт для света) Много, но может быть полезным, когда нужно в середине работы передвинуть какой нибудь объект)
0
Motocat
Motocat
Комментарий удален
+1
Quasar
Quasar
Мне весело от таких высказываний - "Может еще допилят" Конечно допилят и пилят постоянно) Но уже сегодня возможности движка поражают. Не даром даже NASA сделала на движке свое приложение.
0
Motocat
Motocat
Комментарий удален
0
Toucan Studio
Toucan Studio
Круто!
0
YaroslavNagorniy
YaroslavNagorniy
Спасибо, давно бетмена не смотрел, как раз думал на досуге глянуть!
0
Jacot
Jacot
Я прям в этом интерактиве залип)))
+1
DoCentttt
DoCentttt
А тут полностью фильм?
...а, нет, не весь. Жаль.
+1
zedb
zedb
http://biganto-visual.ru/portfolio/2/556.html http://biganto-visual.ru/portfolio/2/237.html 
Управление с клавиатуры WASD + мышь
0
Quasar
Quasar
Отличная презентация, но при чем тут 3Д панорамы?)
0
Dimitred
Dimitred
Так это как раз 3d панорамы и есть.
0
Quasar
Quasar
Нет)
0
Dimitred
Dimitred
Ну всмысле изначально тридешные просто отрендеренные. Понятно, что без кучи интерактивных фишек.
0
Oleg.budeanu
Oleg.budeanu
Качественно сделано, можно узнать какой использовался софт ? Или это личная разработка внутри студии ? Переходы между точками и т.д.
0
zedb
zedb
Спасибо! Это наша разработка.http://biganto-visual.ru/ 
0
nikulinaevgeniya
nikulinaevgeniya
гугл стрит вью
0
Oleg.budeanu
Oleg.budeanu
шта ?
0
zedb
zedb
Это еще один вариант "интерактивного интерьера у вас на сайте".
+2
JACK_AERO
JACK_AERO
Quasar спасибо за подсказку Blend4web отлично подошел для моих целей, через unreal 4 и unity не айс компилирует в HTML5 формат - просто усилия не стоят времени. спасибо за инструмент
0
Kenty
Kenty
зумить бы еще можно было
+2
lance_lot
lance_lot
Blend4web - довольно интересная разработка. НАСА именно с ее помощью сделали интерактивный марсоход для своего сайта, хотя изначально делали на Юнити. Почитайте статью на хабре "Blend4Web vs Unity. Битва за Интернет" там, про причину такого выбора НАСА, а так же и другие статьи по этой теме.
Простота в том, что это адд-он для Блендера (бесплатный естественно, хотя есть версия и за деньги) и полностью интегрирован в среду 3D редактора, поэтому создание объектов, материалов ничем не отличается от обычной работы в Блендере. Порог вхождения очень низкий. Внешний вид картинки можно настраивать и улучшать как угодно. Наверное, можно запекать текстуры в Cycles, как вот в этом уроке делают:https://www.youtube.com/watch?v=sB09T--_ZvU  "Introduction to Cycles Baking", а потом хоть в Blend4Web, хоть в Юнити использовать. Будет и красиво и быстро... и даже с запеченой каустикой и может какими другими эффектами (см. видео).
Я пробовал только простые вещи в Blend4Web - посмотреть модель, поменять текстуры, материалы, сделать переход на сайт. Это то, что можно легко сделать без написания скриптов, только используя logic node (см. в ютубе видео "Blend4Web add-on для Blender"). После экспорта сцены получается одна html-ка. Которая, хоть и должна работать везде, но у меня была проблема с браузером Хром, текстуры отображались не правильно (при чем на работе не было этого бага, а дома был, возможно, причина в видеокарте и драйверах, а не в браузере - он одинаковый последней версии).
0
Rsharf
Rsharf
По-моему, прикольно, что смогли выжать из blend4web интерьер с лайтмапами и PBRками на объектах.
Я на blend4web такого ещё не видел.

Спасибо, что поделились опытом.

П.С: Телек прикольно вышел )
Если не секрет, какой процент от веса всей сцены занимает видос, который в нём проигрывается?
+1
Quasar
Quasar
Спасибо! Всего у меня 78 текстур включая лайтмапы. Геометрия весит 12мб. Все текстуры у меня до 1 мб. Видос весит 2мб.
0
Rsharf
Rsharf
Лёгкий видос, относительно всей сцены и смотрится гораздо лучше "включенных" телеков на статичных рендерах.

Если будете ещё на blend4web что-нибудь эдакое делать, то запостите, пожалуйста. Было бы очень интересно посмотреть )
+1
broin
broin
Quasar спасибо за труды, очень познавательно. Надеюсь это не последняя такая работа и возможно в скором времени мы покацаем выключателями в броузере))) Успехов!
+1
Quasar
Quasar
Спасибо)
0
sunsetrain
sunsetrain
Очень забавно читать. Пожалуй этот сайт не самый лучший для обсуждения Blend4Web просто из-за того, что здесь по большей части про архивиз, где отношение к сетке и вообще весу сцены диаметрально противоположно рилтаймовой графике. Поэтому тут возникло небольшое столкновение мнений.
0
sunsetrain
sunsetrain
Вообще я вот что могу сказать, естественно архивиз туго сходится с рилтаймом из-за специфики, сейчас в этом плане идёт хаотичное движение, но чем слушать кого попало, лучьше взять и попробовать самому, только не с настроением "мне все должны! где здесь кнопка сделать красиво!?"(утрирую), а сесть и разобраться в воркфлоу, попробовать скорректировать его, и тогда решать, это уникальный инструмент, повертье. Другие, они... другие, и преднозначены для другого и других, пускай и немного.
0
StunBreaker
StunBreaker
Quasar: Вы всё верно сказали, про разницу с UE, панорамами...Я вообще думал такой вопрос тут не появится в связи с пониманием и различием одного от другого движка.. тогда лучше сравнивать UE с CryEngine - где у UE нет шансов... А это Blend4Web - WebGL движок, кто не рубит это JAVA, весом 1мб..

Лично я думаю что здесь не хватило детализации, помню давно ещё начинал пробовать этот движок - он вполне мне был приемлем среди остальных.. Пока не нашёл более мощный потенциал под названием - Three.js Это не реклама движка ) Уверен что и в Blend4Web можно настраивать разные шейдеры, AO карты.

И не хватает коллизий и взаимодействий с объектами, но думаю это у вас будет реализовано со временем =)
0
sunsetrain
sunsetrain
Единственная проблема three.js это то что всё надо программировать, тоесть прямо вообще всё, как минимум придётся склеивать куски кода, понимая что ты делаешь.
0
Blew
Blew
Олег, классно все вышло. Продолжай эксперименты у тебя хорошо получается! Ты молодец!
0
Polly93
Polly93
Недавно заинтересовалась UE4. Как Вы считаете, может ли он полностью заменить рендер в максе? Наслышана что очень много камней при экспорте проекта
0
пек
пек
Экспорт это все слова =) экспортируйте из вирэй в корону ~ будет похожий результат делить на пополам =)
Допилинг нужет очень приличный.
0
Rsharf
Rsharf
Чтобы слепить сцену в UE4 нужно, по-хорошему, готовить модельки под realtime движок: убирать лишние полигоны, делать развертки, на которые будет "запекаться" свет, заново настраивать материалы в самом UE4. Т.е. просто скачать модельку с 3ddd и впихнуть в сцену UE4 не получится + нужна хорошая видеокарта.

Бывают исключения, да и процесс доработки моделек можно наладить/ускорить, но всё равно времени будет тратиться больше, чем на "скачал и сразу впихнул в сцену".

Такой подход может быть оправдан, если заказчику нужно видео: в UE4 есть инструмент, который позволяет сделать видеоролик (называется Matinee) и отрендерится этот ролик в десятки раз быстрее, чем на Vray, или Corona.
0
Hachibee
Hachibee
Blin krutrooo ) Chuvak podelis kak ty sdelal Osvechenie takim tut v teksturu zapixal ????
0
Hachibee
Hachibee
KAPEC STOLKO TEKSTURU ty tuda zapixal
0
Vanchell
Vanchell
Класс ! В первую очередь это для жилых комплексов и коттеджных поселков интересно! Не надо скачивать ничего, открыл в браузере, побегал по будущему комплексу, поднялся в свою будущую квартиру, помечтал..
0
Spirit412
Spirit412
Пробовал освоить блендервеб, не вышло.
Сам блендер знаю. Работаю в нём.
Надо было сделать простейшую вещь - модель отображается в браузере, нужно иметь возможность подгружать текстуры. Не нужно что бы текстура менялась на сервере, нужно что бы локально в браузере пользователь мог свою загрузить и посмотреть как она ложится.
Моделька с UV и прочим была.
0
Kaiwas
Kaiwas
Из явных плюсов, что трафик идет с/на сайт где расположена презентация. Никаких скачиваний со сторонних серверов аля скетфаб. Так что это полезно для ресурса где оно размещено.
ПС/ это совсем не тридэшный нюанс, но не менее важный для продвижения чем портфолио )
0
1DInc
1DInc
Ооо, да, отличная работа!
Весьма перспективная отечественная разработка, интересует с тех пор, как его начала использовать NASA)
Сейчас они ещё и PBR дорабатывают, так что в ближайшем времени будет совсем вкусно)