Трехмерные вебсайты и вебсервисы Возможности преимущества и перспективы

Трехмерные вебсайты и вебсервисы: Возможности, преимущества и перспективы

Возможности браузерного 3 D Flash http: //www. closier. nl/playground/temple. html http: //alternativaplatform. com/ru/demos/bunk er-fp 10/

Возможности браузерного 3 D Java http: //www. avengina. org/? target=run

Проникновение RIA По данным http: //riastats. com/#

3 Д вебпроекты крупных компаний • • • • • http: //www. fromstockholmwithlove. com/entries/telenor/ (Telenor, «коммуникация и эмоции» ) ( http: //www. audi. co. uk/RS 6 ) Audi, сайт автомобиля RS 6 http: //www. newaccord. com. au/ Honda, сайт автомобиля Accord http: //www. ing-renaultf 1. com/en/ Renault http: //club. vaio. sony. co. uk/clubvaio/gb/en/vaio 10/ Sony Vaio (3 д ноут) http: //www. hellboymovie. com/creature. Anatomy. html Hell. Boy http: //www. msnbc. msn. com/id/24207533/ Microsoft (навигация по новостям) http: //www. canon-europe. com/eos 400 d Canon, сайт фотоаппарата EOS 400 D http: //www. nike. com. au/thearmoury/ Nike (коллекция кроссовок) http: //www. justdoit. ru/content. html Nike “Just do it” http: //www. mars. com Mars, сайт компании http: //www. bbc. co. uk/radio/labs/podcasts/ BBC (подкасты) http: //www. intel. com/english/unseenforces/ Intel (игра IT Manager) http: //www. flavors. philips. com/us_en/index. html Philips http: //www. adidascelebrateoriginality. com/index. php Adidas http: //dsc. discovery. com/guides/discovery-earth-live/ Discovery, “Earth Live” http: //dailypv 3 d. wordpress. com (обновляемый список Papervision 3 D сайтов)

Применение браузерного 3 Д • Визуализация товаров: – Вращение товаров (телефоны, ноутбуки, кроссовки и т. д. ); – объекты недвижимости; – онлайн-планировщики комнат – автомобили; – продажа трёхмерных моделей; • Трёхмерные интерфейсы – 3 д интерфейсы для навигации по сайтам – Экономические 3 д графики – Визуализация знаний – Визуализация социальных сетей • • • Трёхмерные миры и игры; – браузерные 3 Д игры; – создание 3 д аватор; – 3 д миры Трёхмерные географические, картографические и статистические сервисы Отрёхмеривание: – 3 D повторы футбольных матчей – Фотки – Панорамные вебсервисы • Красоты, да интерактивности ради (промосайты)

Визуализация товаров • • • Телефоны – Nokia http: //www. nokia-asia. com/A 4415199 – (демо) ( www. 3 dflicker. com/euroset ) Ноутбуки: – http: //club. vaio. sony. co. uk/clubvaio/gb/en/vaio 10/ Sony Vaio Автомобили: – http: //www. audi. co. uk/RS 6 Audi – http: //www. newaccord. com. au/ Honda – http: //www. ing-renaultf 1. com/en/ Renault – http: //www. mercedes-benz. es/CLC/ Mercedes Benz Одежда: – http: //www. mvm. com/en/visualsearch. php Обувь – Nike ( http: //www. nike. com. au/thearmoury/ ) – Кроссовки http: //www. westimages. com/3 d-presentation-pdf. html – Nike http: //www. justdoit. ru/content. html

Визуализация товаров Телефоны • Nokia http: //www. nokia-asia. com/A 4415199 • (демо) ( www. 3 dflicker. com/euroset ) Автомобили: • http: //www. audi. co. uk/RS 6 Audi • http: //www. newaccord. com. au/ Honda • http: //www. ing-renaultf 1. com/en/ Renault Ноутбуки: • http: //www. mercedes-benz. es/CLC/ Mercedes Benz. • http: //club. vaio. sony. co. uk/clubvaio/gb/en/vaio 10/ http: //www. nokia-asia. com/A 4415199 http: //www. mercedes-benz. es/CLC/

Визуализация товаров Одежда: • • http: //www. mvm. com/en/visualsearch. php http: //www. francksorbier. com/sorbier_en. html http: //www. mvm. com/en/visualsearch. php Обувь • Nike ( http: //www. nike. com. au/thearmoury/ ) • Кроссовки http: //www. westimages. com/3 dpresentation-pdf. html • Nike http: //www. justdoit. ru/content. html http: //www. westimages. com/3 d-presentation-pdf. html

Визуализация недвижимости Внешняя – http: //alternativaplatform. com/ru/demos/altcity/ – http: //www. enternetica. com/3 d-web/larahill. html – http: //3 dweb. ru/? p=4〈 =rus http: //www. enternetica. com/3 d-web/larahill. html http: //alternativaplatform. com/ru/demos/altcity/

Визуализация недвижимости Планировщики комнат • • • http: //dragonfly. autodesk. com http: //dekort 3 d. todesign. pl/ http: //ecsw. pl/ http: //v 3. planningwiz. com/ http: //alternativaplatform. com/swf/demos/flatfp 10. swf. http: //dekort 3 d. todesign. pl/ http: //dragonfly. autodesk. com

3 Д модели, игры, миры, галерии • • • Вебсервисы по визуализации 3 Д моделей – http: //www. 3 dvia. com – http: //3 dflicker. com – http: //madlix. com 3 Д галереи (от 1 лица) – http: //ecsw. pl/ – http: //gallery. worldsware. com/ – http: //labs. anymotion. de/ – http: //www. wildridexm. com/ Браузерные 3 Д игры – http: //www. intel. com/english/unseenforces/ – http: //www. gamescheatcodes. co. uk/newgames/ni mian-hunter. htm – http: //games. vdscommunication. com/games/conflict/ – http: //storage. elektroncek. eu/oskar/airship/pv 009. html – http: //www. newgrounds. com/portal/view/427278 # – http: //www. bbc. co. uk/switch/meta 4 orce/launch. s html? id=deadsphere

3 Д игры • • • http: //www. intel. com/english/unseenforces/ http: //www. thegameslist. com/game/2960/Motor. Storm_Pacific_Rift__Monster_Mayhem http: //www. gamescheatcodes. co. uk/newgames/nimian-hunter. htm http: //games. vds-communication. com/games/conflict/ http: //storage. elektroncek. eu/oskar/airship/pv 009. html http: //www. newgrounds. com/portal/view/427278# http: //www. bbc. co. uk/switch/meta 4 orce/launch. shtml? id=deadsphere http: //www. avpvu. com/ http: //www. skateit. ea. com/ http: //www. newgrounds. com/portal/view/386254 http: //www. thegameslist. com/games/tag/papervision/games http: //www. thegameslist. com/game/2960/Motor Storm_Pacific_Rift__Monster_Mayhem http: //alternativaplatform. com/swf/demos/strate gy/strategyfp 10. swf

Вебсервисы по визуализации 3 D моделей • • • http: //www. 3 dvia. com http: //3 dflicker. com http: //madlix. com

Панорамы • • • Google street view http: //www. lucid. it/ (видео-панорамы) http: //www. everyscape. com/ (с 3 D переходами) • • http: //www. 360 cities. net/ http: //www. mapjack. com/ Google street view http: //www. everyscape. com http: //www. lucid. it/

Отрехмеривание • • • http: //www. earthmine. com/ (отрёхмеривание улиц) http: //euro 2008. yandex. ru/video. xml (3 Д повторы футбольных матчей) http: //make 3 d. stanford. edu/ отрёхмеривание фоток (частичное) http: //www. earthmine. com/ http: //euro 2008. yandex. ru/video. xml

Трехмерные интерфейсы • Навигация по сайтам: – Плоскостная ( «плейновая» ) – Кубическая – Сферические – Спиральна – Zoomинг – От первого лица • • • Трехмерные схемы и графы Визуальные поисковики Экономические визуализации

Трехмерные интерфейсы 3 D стенки • http: //www. airtightinteractive. com/projects/tiltvi ewer/app/ • http: //www. flashloaded. com/flashcomponents/ 3 dwall/ • http: //www. fotoviewr. com/ http: //www. flashloaded. com/flashcomponents/3 dwall/ • • http: //netageadv. it/ http: //www. eric-tombarel. com/ http: //www. adrianwilson. org/ http: //www. tbc. us/

Трехмерные интерфейсы Zoom-инг • • • http: //livelabs. com/seadragon/ http: //memorabilia. hardrock. com/ http: //playboy. covertocover. com/ http: //www. vertigo. com/deepzoom. aspx http: //memorabilia. hardrock. com/

Трехмерные интерфейсы Иерархические ряды • http: //nebgroup. com. ua • http: //3 dflicker. com • http: //whitevoid. com/application. html http: //nebgroup. com. ua

Трехмерные интерфейсы 3 D карусели • https: //widgets. amazon. com/Amazon. Carousel-Widget • http: //www. 13 flo. com • http: //dm 09 stockholm. com/ http: //www. 13 flo. com 3 D Спирали • http: //msnbcmedia. msn. com/i/msnbc/compo nents/spectra. html • http: //www. flashloaded. com/flashcomponent s/3 dspiral/example 2. html • http: //www. denubila. com. br/ http: //www. flashloaded. com/flashcomponent s/3 dspiral/example 2. html

Трехмерные интерфейсы 3 D сферы • 3 D Сферы – http: //www. roytanck. com/tag-cloud/ – http: //www. adidascelebrateoriginality. com/ – http: //www. bestiario. org/research/videospher e/ – http: //taggalaxy. de/ – http: //www. denubila. com. br/ http: //www. roytanck. com/tag-cloud/ http: //www. bestiario. org/research/videos phere/

Трехмерные интерфейсы кубические интерфейсы Просто кубы – http: //www. michaelewing. co. uk/100 bestfilms/ – http: //www. absolut. com/iaaw/ – http: //www. search-cube. com/ http: //www. absolut. com/iaaw/ «Коробки» – http: //whitevoid. com/application. html «Полки» – http: //www. ebbandflow. fr Достоинства Недостатки • Объемность смотрится красиво • Метафоричность (метафоры полок, коробок, пирамидок и т. д. ) • Из-за объемности кубы перекрывают друга • Одновременно хорошо видны не более двух граней каждого куба

Трехмерные интерфейсы 3 D поисковики http: //search. tianamo. com/index 2. php http: //www. search-cube. com/ http: //cooliris. com/ http: //www. searchme. com/#/&q=away 3 d&pi=41 http: //www. viewzi. com (по фото) http: //www. fotoviewr. com/ (по фото) http: //www. searchme. com/#/&q=away 3 d&pi=41 http: //search. tianamo. com/index 2. php

Трехмерные интерфейсы экономические визуализации – – http: //www. oculusinfo. com/ http: //www. 3 dgeostats. com/ http: //www. 3 dstats. com http: //gecon. yale. edu/ http: //www. oculusinfo. com/

3 D графы, схемы, таймлайны Достоинства • Всегда можно выбрать оптимальный вид • Вмещают больше информации • Стрелки практически не пересекаются • Больше осей, часть из которых можно сделать численными • Всегда можно зафиксировать 1 или 2 оси и перейти в 2. 5 D или 2 D режим Недостатки • Более сложное управление • Не оптимизиро-ваны для печати • Более сложные в разработке Резюме: • • Лучше использовать для: Больших схем Таймлайнов среднего и большого размера Мультииерархических схем Схем с большим количеством стрелок http: //nebgroup. com. ua/examples/scheme 3 d (альфа проекта Scheme 3 D) http: //nebgroup. com. ua/examples/prohorov (3 д схема исторических деятелей)

Проникновение RIA По данным http: //riastats. com/#

Java vs Flash vs SIlverlight Технология Достоинства Недостатки Резюме Java • Поддержка Open. GL (читаем аппаратный рендеринг) • Java в основе • Легкая интеграция с другими Java приложениями • Большой вес • Низкая распостраненность в рунете и средняя в мире • Сложная интеграция с векторной графикой Оптимальна в англнете для средне и высокополигональной 3 D графики Flash • Стоит на >90% компьютеров • Мало весит • Удобство работы с растром, вектором, видео, в комбинации 2 д с 3 д • Наличие развитых 3 D движков (Away 3 D, Sandy, Papervision etc. ) • Софтверный рендеринг (ориентировочно не более 10 000 полигонов при динамичной камере) • Софтверный z-ordering • Проблемы с индексацией поисковиками • Параноидальная политика безопасности во флешплеере • Слабый язык в основе Оптимальна для всех низкополигональных 3 D проектов, трехмерных интерфейсов, панорам и 3 д эффектов на сайтах. • Софтверный рендеринг (производительность на уровне FP 10) • Низкая распостраненность • Большой вес плагина • Отсутствие развитых 3 D движков Годится только 3 версия, оптимально использовать для зуминга и при портировании с WPF Silverlight • • Интеграция с WPF Можно писать на C# Deep. Zooming Deep linking Оптимальна в рунете.

3 D движки флеша Движок Достоинства Недостатки Резюме Flash 10 • Низкий вес swf-шек • Простота • Доступны только простейшие 3 д эффекты • У большинства стоит FP 9, а не FP 10 Sandy • Простой в освоении • Много туториалов • Есть версии под допотопные флешплееры • Уступает Papervision и Away 3 D по функциональности • Есть Haxe версия • Самый популярный 3 д движок => много туториалов и компонентов • Сильная FP 10 версия • Уступает AWAY 3 D по функциональности Оптимален при использовании чужих 3 д компонент • Широкие возможности для программной генерации 3 д моделей, рельефа и normalmaps • Быстрое появление новых фич • Мощная структура классов • Много багов • Плохая документация Оптимальный 3 д движок для большинства проектов • Наивысшая производительность • Специальные классы для 3 д игр • Скоро появиться серверная часть • Платный ( 1000$ за проект) (встроенные 3 д возможности) http: //flashsandy. or g/ Papervision http: //blog. papervision 3 d. org/ AWAY 3 D http: //away 3 d. com/ Alternativa http: //alternativapla tform. com • Для простейших 3 д эффектов Оптимален для новичков Оптимален для 3 д игр и визуализаций недвижимости

Особенности Away 3 D • • Lathe , Extrude и Mirror позволяют программно генерировать 3 д сцены, что существенно уменьшает размер файлов Туман позволяет рендерить меньше полигонов Normal. Mapping позволяет с помощью текстур увеличивать качество модели Skinextrude позволяет делать рельеф на базе карты глубин Возможность указания движения по рисованному пути существенно облегчает анимацию Возможность рендера в bitmap позволяет добавлять красивые 2 Д эффекты Кэширование трёхмерных моделей позволяет загружать модели на десятки тысяч полигонов при статической камере http: //www. closier. nl/playground/n ormalmaps 3. html http: //www. closier. nl/playground/smoothtransition. html

Границы применимости 3 д Лучше применять для: • Промосайтов • Отображения галерей • Игр • Панорам и виртуальных туров • Отображения сложного оглавления сайта • Визуализации телефонов, недвижимости и прочих товаров в 3 D • Отображения сложных схем и графов • Визуализации OLAP кубов и экономическое статистики Лучше НЕ применять для: • Отображения статей (за исключением оглавлений и облак тегов), ибо почти не индексируется • Ресурсов рассчитанных на мобильники и слабые компьютеры (за исключением серверного 3 д) • Простых сайтов • Низко бюджетных сайтов (3 д программируется сложнее) • Простых схем

Почему 3 д веб не состоялся раньше Основные причины: – Медленный интернет (преобладание dial up) – Сфокусированность крупных компаний на виртуальных мирах, а не на 3 д интерфейсах и анимационных эффектах – Позднее добавление 3 D эффектов во флеш – Пессимизм инвесторов после неудачных первоначальных инвестиций в виртуальную реальность в 90 -х годах – Высокие системные требования для рендеринга 3 D сцен с генерируемыми текстурами и геометрией и малое внимание уделенное таким (например, werkzeug) технологиям со стороны крупных ИТ компаний.

Факторы роста популярности 3 Д в будущем Развитие 3 D стимулируется: • Расширением каналов доступа • Распространением 3 д манипуляторов: – Microsoft Surface и сенсорные дисплеи. – Перчатки виртуальной реальности – Управление с помощью 3 д камер. – Виртуальная сфера и прочие манипуляторы для ходьбы в 3 D мире. – Прочие 3 д манипуляторы. • Отображения 3 д: – 3 д шлемы • «Закрытые» • «Дополненная реальность» . – 3 д мониторы

Спасибо за внимание! Контакты: http: //www. nebgroup. com. ua office@nebgroup. com. ua