Почти уже два года назад, когда я еще не учил людей зарабатывать на стартапах, делать быстрые фотомодели, гугл не был еще такой фигней, а веб-толпы не выиграливали у меня 2:0, я создавал сайты. И вот один из клиентов попросил меня сделать что-то такое, от чего все офигели бы для его магазина элитной мебели. Сначала у меня получился вполне заурядный дизайн, который они и не приняли, но вот вторая идея снесла всем голову. За эти два года, я увидел только один сайт, который сделан по такой технологии, хотя она лежит на поверхности, и это была компания уровня Sony (кто именно — забыл.)
Помните, когда в статье про быструю фотомодель вчера, я сказал, что скоро мы будем работать в объемном мире? Думаете, я шутил? Ну что ж ты встал путник — входи, разувайся, я тебе поведаю историю как Сеть перестала быть плоской два года назад...
Я очень хотел, чтобы Веб вырвался из плоского пространства и как это можно было сделать лучше, как ни с магазином элитной мебели? Я спроектировал его архитектуру (не в IT смысле, а в смысле здание) — да, архитектор из меня не супер, но не суть… И пригласил их войти внутрь и походить. Без плагинов, кроме Флеша, используя технологии многолетней давности.
Теперь я приглашаю и тебя, путник, в мир сказок и невероятного прототипа. Кликай картинку, а потом возвращайся, если не догадаешься сам, — читай как это сделано.
Нашел ли ты летающий ценник на телевизоре?
Смог ли ты посмотреть на магазин со второй точки?
Окей, итак, это был прототип сайта. Клиента очень впечатлило, также как и всех, кому я это показал в Январе '07. К сожалению, клиент отказался в пользу более простого дизайна, потому что этот слишком сложно обновлять и решил на этом дизайне сделать позже другой сайт. Но технология пошла путем вечной лампочки и потеряалась в подвалах. Прошло уже достаточно времени и я решил отдать ее Public Domain, пользуйся.
Итак, речь идет о том, что можно использовать панорамы для имитации 3d пространства и это ОЧЕНЬ просто, как я покажу ниже.
Сразу оговорюсь, что это был самый простой путь НА ТОТ момент, что-то могло измениться за это время и появилось еще более простое.
1. Либо 3d модель здания, где мы будем ходить (я сделал ее в SketchUp, затем накидал моделей деревьев и мебели от Evermotion — почти именно эту мебель они и продают),
Либо мы можем использовать реальные панорамы реального магазина или торгового центра. Панорамы 360x180. Autodesk [RealViz] Stitcher могу порекомендовать.
2. Плеер для панорам. Я рассмотрел множество вариантов, в т.ч. и все 3d фреймворки, но панораму в них загрузить нифига не просто. Тогда я купил плеер от FlashPanoramas.com (40 евро, наши, русские, отношения к ним никакого не имею, кроме того, что купил плеер). Найдете простую бесплатную альтернативу — пишите в комментах. Кстати, сайт на английском, если что — свяжитесь с автором flashpanoramas@gmail.com, вроде бы его зовут Денис Чумаков, во всяком случае это присылают в счете за оплату.
ВАЖНО. Эта часть подразумевает, что Вы умеете уже моделировать и работать с программами уровня 3d-maxа или у Вас есть моделер. Если нет — Вам придется дождаться моей другой статьи, где я поговорю о Google Sketchup и наверное Alternativa Platform.
Итак, я пошел путем SketchUp → 3DSMax + VRay → speherical panoramic .jpg, но вариантов много.
1. Рендерим либо через стандартный максовский рендер панорам, Гугл подсказывает что он Utilities panel > Utilities rollout > More button > Utilities dialog > Panorama Exporter, либо если в VRay, то ставим Sperical для физической камеры.
Выходной файл должен быть ratio = 0.5, я делал 3000 x 1500 и то пиксели видны неплохо. Хотя, если бы я не был ленивым и поигрался с Vray подольше (ну не моделер я, и не дизайнер, я программер), то получилось бы лучше. Но мы ж тут идею обсуждаем — надеюсь искренее, что Вы сделаете лучше.
Что важно — делайте потолок и пол МОНОТОННЫМИ! Посмотрите на первую точку и на вторую в сайте. Разница между JPG 500кб, знаете почему? В одной на полу «типа-ковер», в другой он монотонный. Помните, что на выходе будет гигантский файл не меньше 3000 в ширину, который придется грузить через Веб. Я понимаю, что Вам, товарищи дизайнеры, важнее качественная картинка, но подумайте о юзерах не в Москве, у кого Ваш меговый .JPG будет грузиться минуту. Они не увидят всей этой красоты.
Итак, на выходе у нас есть 3000 на 1500 файл (или пропорциональный) панорамного вида — он должен быть похож на картинку в начале этого раздела — прямые линии должны стать дугами — сферическая проекция.
UPDATE Забыл, для полу-новичков: для того, чтобы впихнуть такое количество деревьев — нужно пользовать VRay Proxy, если вдруг не знали. Только убедитесь что материалы не пропали, если просто сделать из группы объектов VRay прокси — мат-лы пропадают, поэтому деревья и телевизоры бетонные :) чтобы этого избежать — надо как-то хитро прокси делать — возможно профи в комментах подскажут — добавлю.
Как я и сказал, я использовал Flash Panorama Player. Другие тоже можно использовать, но в них придется программить Flash, в то время как здесь — один вид (точка, где может встать пользователь — далее я ее буду называть POV = point-of-view) = девяносто строк XML, без Flash-программинга вообще и моделирования сферы и выворачивания ее нормалей.
Призываю Вас поддержать автора, написавшего такой замечательный плагин [отношения к нему никакого] — 40 евро — не так много, особенно если за такой сайт Вы возьмете с клиента $50K :)
Я пользуюсь лицензионным. Так что рассказываю для этого плеера.
1. Создаем .html файл для каждого POV.
Образец берите на seelf.com/b/index.html.txt — менять там надо только test.swf в двух местах — что такое нужный .swf в мануале в покупаемом дистрибутиве.
2. Для каждого filename.swf мы создаем точно такой же filename.xml — там и происходит вся магия.
Образцы брать на seelf.com/b/test.xml.txt, seelf.com/b/test2.xml.txt. Разберу первый файл — там больше интересного.
Итак сначала, подключам модули:
Далее в разделе hotspots, опеределяем раздел global — это всякие события (onStart) и функции (onOver, loadPreview, goUp, pt и т.п.) — там очень простой язык, все поймете сами.
Поскольку можно накладывать даже .swf слов, была идея даже сделать корзину заказа — просто передавать в нее покупку — подробно это не обдумывал, но, это наверняка возможно.
Сам плеер умеет еще вставлять YouTube видео, аудио, к примеру, в панораму, так же их можно подгружать без перезагрузки страницы и еще много вкусностей. Все в мануале есть.
Дальше загружаем это все на сайт, показываем офигевшему клиенту и добиваем его счетом.
Кстати, была еще идея добавить двигающихся людей (точнее стоящих на месте, спроецированные gif'ы с микродвижениями — это возможно), но это уже представлю Вам поломать голову как.
Удачи, путник, :)
Йои Хаджи,
вид с Хабра
Помните, когда в статье про быструю фотомодель вчера, я сказал, что скоро мы будем работать в объемном мире? Думаете, я шутил? Ну что ж ты встал путник — входи, разувайся, я тебе поведаю историю как Сеть перестала быть плоской два года назад...
Я очень хотел, чтобы Веб вырвался из плоского пространства и как это можно было сделать лучше, как ни с магазином элитной мебели? Я спроектировал его архитектуру (не в IT смысле, а в смысле здание) — да, архитектор из меня не супер, но не суть… И пригласил их войти внутрь и походить. Без плагинов, кроме Флеша, используя технологии многолетней давности.
Теперь я приглашаю и тебя, путник, в мир сказок и невероятного прототипа. Кликай картинку, а потом возвращайся, если не догадаешься сам, — читай как это сделано.
Нашел ли ты летающий ценник на телевизоре?
Смог ли ты посмотреть на магазин со второй точки?
Окей, итак, это был прототип сайта. Клиента очень впечатлило, также как и всех, кому я это показал в Январе '07. К сожалению, клиент отказался в пользу более простого дизайна, потому что этот слишком сложно обновлять и решил на этом дизайне сделать позже другой сайт. Но технология пошла путем вечной лампочки и потеряалась в подвалах. Прошло уже достаточно времени и я решил отдать ее Public Domain, пользуйся.
Итак, речь идет о том, что можно использовать панорамы для имитации 3d пространства и это ОЧЕНЬ просто, как я покажу ниже.
Сразу оговорюсь, что это был самый простой путь НА ТОТ момент, что-то могло измениться за это время и появилось еще более простое.
Что нам понадобится
1. Либо 3d модель здания, где мы будем ходить (я сделал ее в SketchUp, затем накидал моделей деревьев и мебели от Evermotion — почти именно эту мебель они и продают),
Либо мы можем использовать реальные панорамы реального магазина или торгового центра. Панорамы 360x180. Autodesk [RealViz] Stitcher могу порекомендовать.
2. Плеер для панорам. Я рассмотрел множество вариантов, в т.ч. и все 3d фреймворки, но панораму в них загрузить нифига не просто. Тогда я купил плеер от FlashPanoramas.com (40 евро, наши, русские, отношения к ним никакого не имею, кроме того, что купил плеер). Найдете простую бесплатную альтернативу — пишите в комментах. Кстати, сайт на английском, если что — свяжитесь с автором flashpanoramas@gmail.com, вроде бы его зовут Денис Чумаков, во всяком случае это присылают в счете за оплату.
Часть 1. Рендер и подводные камни.
ВАЖНО. Эта часть подразумевает, что Вы умеете уже моделировать и работать с программами уровня 3d-maxа или у Вас есть моделер. Если нет — Вам придется дождаться моей другой статьи, где я поговорю о Google Sketchup и наверное Alternativa Platform.
Итак, я пошел путем SketchUp → 3DSMax + VRay → speherical panoramic .jpg, но вариантов много.
1. Рендерим либо через стандартный максовский рендер панорам, Гугл подсказывает что он Utilities panel > Utilities rollout > More button > Utilities dialog > Panorama Exporter, либо если в VRay, то ставим Sperical для физической камеры.
Выходной файл должен быть ratio = 0.5, я делал 3000 x 1500 и то пиксели видны неплохо. Хотя, если бы я не был ленивым и поигрался с Vray подольше (ну не моделер я, и не дизайнер, я программер), то получилось бы лучше. Но мы ж тут идею обсуждаем — надеюсь искренее, что Вы сделаете лучше.
Что важно — делайте потолок и пол МОНОТОННЫМИ! Посмотрите на первую точку и на вторую в сайте. Разница между JPG 500кб, знаете почему? В одной на полу «типа-ковер», в другой он монотонный. Помните, что на выходе будет гигантский файл не меньше 3000 в ширину, который придется грузить через Веб. Я понимаю, что Вам, товарищи дизайнеры, важнее качественная картинка, но подумайте о юзерах не в Москве, у кого Ваш меговый .JPG будет грузиться минуту. Они не увидят всей этой красоты.
Итак, на выходе у нас есть 3000 на 1500 файл (или пропорциональный) панорамного вида — он должен быть похож на картинку в начале этого раздела — прямые линии должны стать дугами — сферическая проекция.
UPDATE Забыл, для полу-новичков: для того, чтобы впихнуть такое количество деревьев — нужно пользовать VRay Proxy, если вдруг не знали. Только убедитесь что материалы не пропали, если просто сделать из группы объектов VRay прокси — мат-лы пропадают, поэтому деревья и телевизоры бетонные :) чтобы этого избежать — надо как-то хитро прокси делать — возможно профи в комментах подскажут — добавлю.
Часть 2. Панорамный плеер и примеры для копипаста.
Как я и сказал, я использовал Flash Panorama Player. Другие тоже можно использовать, но в них придется программить Flash, в то время как здесь — один вид (точка, где может встать пользователь — далее я ее буду называть POV = point-of-view) = девяносто строк XML, без Flash-программинга вообще и моделирования сферы и выворачивания ее нормалей.
Призываю Вас поддержать автора, написавшего такой замечательный плагин [отношения к нему никакого] — 40 евро — не так много, особенно если за такой сайт Вы возьмете с клиента $50K :)
Я пользуюсь лицензионным. Так что рассказываю для этого плеера.
1. Создаем .html файл для каждого POV.
Образец берите на seelf.com/b/index.html.txt — менять там надо только test.swf в двух местах — что такое нужный .swf в мануале в покупаемом дистрибутиве.
2. Для каждого filename.swf мы создаем точно такой же filename.xml — там и происходит вся магия.
Образцы брать на seelf.com/b/test.xml.txt, seelf.com/b/test2.xml.txt. Разберу первый файл — там больше интересного.
Итак сначала, подключам модули:
layer_2 = hotspots.swf— все, что нажимается
layer_3 = limits.swf— ограничения на движения, если панорама меньше 360x180 (я забыл зачем подключал его)
layer_5 = cylConverter.swf— для сферических или цилиндрических панорам (box тоже умеет, но плагин уже не нужен)
editor.swf— плагин для визуального редактирования панорам, чтобы не угадывать куда ставить hotspot (это нефигово тяжело), есть в покупном дистрибутиве. С сайта, разумеется, удален.
panoType=cylinder— сферическая (или цилиндрическая панорама)
panoName=<b>test</b>— как называется .jpg'а = test.jpg → seelf.com/b/test.jpg
Далее в разделе hotspots, опеределяем раздел global — это всякие события (onStart) и функции (onOver, loadPreview, goUp, pt и т.п.) — там очень простой язык, все поймете сами.
<box id="logo" url="logo.png" al....— образец накладываемого слоя — это у меня шапка, телефоны, всякие.
<box id="up" url="black_u.png" ...— образец перехода на новую точку.
<box id="up1" url="radking.png" ...— образец того, как ценник выпрыгивает на телевизоре сзади Вас на первой POV.
Поскольку можно накладывать даже .swf слов, была идея даже сделать корзину заказа — просто передавать в нее покупку — подробно это не обдумывал, но, это наверняка возможно.
<cylconverter></cylconverter>— активация плагина для сферической панорамы.
Сам плеер умеет еще вставлять YouTube видео, аудио, к примеру, в панораму, так же их можно подгружать без перезагрузки страницы и еще много вкусностей. Все в мануале есть.
Дальше загружаем это все на сайт, показываем офигевшему клиенту и добиваем его счетом.
Кстати, была еще идея добавить двигающихся людей (точнее стоящих на месте, спроецированные gif'ы с микродвижениями — это возможно), но это уже представлю Вам поломать голову как.
Удачи, путник, :)
Йои Хаджи,
вид с Хабра
