Вы находитесь на странице: 1из 37

Трехмерные вебсайты и

вебсервисы:

Возможности, преимущества и перспективы


ПЛАН
• Личная предыстория

• Применение браузерного 3Д:


– Визуализация товаров
– Трехмерные интерфейсы
– Дополненная реальность
– Визуализация знаний
– Отрехмеривание

• Технологии
– Проникновение RIA
– Java vs Flash vs Silverlight
– Away 3D
– Границы применимости 3Д
• Почему 3Д веб не состоялся раньше?
• Факторы роста 3Д веба в будущем

• Вопросы и обсуждения
Возможности браузерного 3D

Flash

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

Java

http://www.avengina.org/?target=run
Проникновение RIA

Flash(мир) Silverlight(мир) Sun Java(мир)


10 9 8 7 6 No Flash 3 2 1 NO Silverlight 1.8 1.6 1.5 1.4 No Java

Flash(Россия) Silverlight(Россия) Sun Java(Россия)


10 9 8 7 6 No Flash 3 2 1 No Silverlight 1.8 1.6 1.5 1.4 No Java

По данным http://riastats.com/#
3Д вебпроекты крупных компаний
• http://www.fromstockholmwithlove.com/entries/telenor/ (Telenor, «коммуникация и
эмоции»)
• ( http://www.audi.co.uk/RS6 ) Audi, сайт автомобиля RS6
• http://www.newaccord.com.au/ Honda, сайт автомобиля Accord
• http://www.ing-renaultf1.com/en/ Renault
• http://club.vaio.sony.co.uk/clubvaio/gb/en/vaio10/ Sony Vaio (3д ноут)
• http://www.hellboymovie.com/creatureAnatomy/creatureAnatomy.html HellBoy
• http://www.msnbc.msn.com/id/24207533/ Microsoft (навигация по новостям)
• http://www.canon-europe.com/eos400d Canon, сайт фотоаппарата EOS 400D
• 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://dailypv3d.wordpress.com (обновляемый список Papervision3D сайтов)
Применение браузерного 3Д

• Визуализация товаров: • Трёхмерные миры и игры;


– Вращение товаров (телефоны, – браузерные 3Д игры;
ноутбуки, кроссовки и т.д.); – создание 3д аватар;
– объекты недвижимости;
– 3д миры
– онлайн-планировщики комнат
• Трёхмерные географические,
– автомобили; картографические и
– продажа трёхмерных моделей; статистические сервисы

• Трёхмерные интерфейсы • Дополненная реальность


– 3д интерфейсы для навигации
по сайтам
– Экономические 3д графики • Отрёхмеривание:
– Визуализация знаний – 3D повторы футбольных
– Визуализация социальных матчей
сетей – Фотки
– Панорамные вебсервисы
• Красоты, да интерактивности
ради (промосайты)
Визуализация товаров
• Телефоны
– Nokia http://www.nokia-asia.com/A4415199
– (демо) ( www.3dflicker.com/euroset )
• Ноутбуки:
– http://club.vaio.sony.co.uk/clubvaio/gb/en/vaio10/ Sony Vaio
• Автомобили:
– http://www.audi.co.uk/RS6 Audi
– http://www.newaccord.com.au/ Honda
– http://www.ing-renaultf1.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/3d-presentation-pdf.html
– Nike http://www.justdoit.ru/content.html
Визуализация товаров
Телефоны Автомобили:
•Nokia http://www.nokia-asia.com/A4415199 •http://www.audi.co.uk/RS6 Audi
•( www.3dflicker.com/euroset ) •http://www.newaccord.com.au/ Honda
•http://www.ing-renaultf1.com/en/ Renault
Ноутбуки: •http://www.mercedes-benz.es/CLC/ Mercedes Benz
•http://club.vaio.sony.co.uk/clubvaio/gb/en/vaio10/ •http://golf-gti-tracks.com Volkswagen

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

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

http://www.enternetica.com/3d-web/larahill.html http://alternativaplatform.com/ru/demos/altcity/
Визуализация недвижимости
Планировщики комнат
•http://dragonfly.autodesk.com
•http://dekort3d.todesign.pl/
•http://ecsw.pl/
•http://v3.planningwiz.com/
•http://alternativaplatform.com/swf/demos/flat/flatfp10.swf

http://dekort3d.todesign.pl/ http://dragonfly.autodesk.com
3Д модели, игры, миры, галерии
• Вебсервисы по визуализации 3Д моделей
– http://www.3dvia.com
– http://3dflicker.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/nimian-hunter.htm

– http://games.vds-communication.com/games/conflict/
– http://storage.elektroncek.eu/oskar/airship/pv009.html

– http://www.newgrounds.com/portal/view/427278#
– http://www.bbc.co.uk/switch/meta4orce/launch.shtml?id=deadsphere
3Д игры
•http://war.ru
•http://tankionline.com/index_rus.html
•http://www.intel.com/english/unseenforces/
•http://www.thegameslist.com/game/2960/MotorStorm_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/pv009.html
•http://www.newgrounds.com/portal/view/427278#
•http://www.bbc.co.uk/switch/meta4orce/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/MotorStorm_Pacific_Rift__Monster_Mayhem
http://war.ru/
Вебсервисы по визуализации 3D
моделей
•http://www.3dvia.com
•http://3dflicker.com
•http://madlix.com

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

Google street view

http://www.everyscape.com http://www.lucid.it/
Дополненная реальность
http://ge.ecomagination.com/smartgrid/#/augmented_reality
http://words.transmote.com/wp/flarmanager/
http://www.arvertising.com/news/
http://www.augmented-reality-games.com/
http://www.squidder.com/
http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
http://words.transmote.com/wp/20090328/flarmanager-v03/
Отрехмеривание
•http://www.earthmine.com/ (отрёхмеривание улиц)
•http://euro2008.yandex.ru/video.xml (3Д повторы футбольных матчей)
•http://make3d.stanford.edu/ отрёхмеривание фоток (частичное)

http://www.earthmine.com/ http://euro2008.yandex.ru/video.xml
Трехмерные интерфейсы

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

• Трехмерные схемы и графы


• Визуальные поисковики
• Экономические визуализации
Трехмерные интерфейсы
3D стенки
•http://www.airtightinteractive.com/projects/tiltviewer/app/
•http://netageadv.it/
•http://www.flashloaded.com/flashcomponents/3dwall/ •
http://www.eric-tombarel.com/
•http://www.fotoviewr.com/ •http://www.adrianwilson.org/
•http://www.tbc.us/

http://www.flashloaded.com/flashcomponents/3dwall/http://www.tbc.us/
Трехмерные интерфейсы
Zoom-инг
•http://photozoom.mslivelabs.com/
•http://zoomism.com/
•http://livelabs.com/seadragon/
•http://memorabilia.hardrock.com/
•http://playboy.covertocover.com/
•http://www.vertigo.com/deepzoom.aspx .

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

http://whitevoid.com/application.html http://nebgroup.com.ua
Трехмерные интерфейсы
3D карусели 3D Спирали
•http://msnbcmedia.msn.com/i/msnbc/components/sp
•https://widgets.amazon.com/Amazon-Carousel-Widget

•http://www.13flo.com •http://www.flashloaded.com/flashcomponents/3dspir
•http://dm09stockholm.com/
•http://www.denubila.com.br/

http://www.13flo.com http://www.flashloaded.com/flashcomponents/3dspiral/e
Трехмерные интерфейсы
3D сферы
• 3D Сферы
– http://www.roytanck.com/tag-cloud/
– http://www.adidascelebrateoriginality.com/

– http://www.bestiario.org/research/videosphere

– http://taggalaxy.de/
– http://www.denubila.com.br/

http://www.roytanck.com/tag-cloud/ http://www.bestiario.org/research/videosphere/
Трехмерные интерфейсы
кубические интерфейсы
«Коробки»
– http://whitevoid.com/application.html
«Полки»
– http://www.ebbandflow.fr

http://www.absolut.com/iaaw/ http://www.ebbandflow.fr
Достоинства Недостатки
•Объемность смотрится красиво • Из-за объемности кубы перекрывают друг друга
•Метафоричность (метафоры полок, коробок, • Одновременно хорошо видны не более двух
пирамидок и т.д.) граней каждого куба
Трехмерные интерфейсы
3D поисковики
http://search.tianamo.com/index2.php
http://www.search-cube.com/
http://cooliris.com/
http://www.searchme.com/#/&q=away3d&pi=41
http://www.viewzi.com (по фото)
http://www.fotoviewr.com/ (по фото)

http://www.searchme.com/#/&q=away3d&pi=41 http://search.tianamo.com/index2.php
Трехмерные интерфейсы
экономические визуализации

– http://www.oculusinfo.com/
– http://www.3dgeostats.com/
– http://www.3dstats.com
– http://gecon.yale.edu/

http://gecon.yale.edu/ http://www.oculusinfo.com/
Иллюстрация основной проблемы визуализации знаний в
2D
3D графы, схемы, таймлайны
Достоинства Недостатки

•Всегда можно •Более сложное


выбрать оптимальный управление
вид •Не оптимизированы
•Вмещают больше для печати
информации •Более сложные в
•Стрелки разработке
практически не
пересекаются
•Больше осей, часть
из которых можно
сделать численными
•Всегда можно
зафиксировать 1 или
2 оси и перейти в 2.5D
или 2D режим

http://timelines.ru
Резюме: (3д схема исторических деятелей, альфа-версия)
Лучше использовать для:
•Больших схем
•Таймлайнов среднего и большого
размера
•Мультииерархических схем
•Схем с большим количеством стрелок
Проникновение RIA

Flash(мир) Silverlight(мир) Sun Java(мир)


10 9 8 7 6 No Flash 3 2 1 NO Silverlight 1.8 1.6 1.5 1.4 No Java

Flash(Россия) Silverlight(Россия) Sun Java(Россия)


10 9 8 7 6 No Flash 3 2 1 No Silverlight 1.8 1.6 1.5 1.4 No Java

По данным http://riastats.com/#
Java vs Flash vs SIlverlight
Технология Достоинства Недостатки Резюме

Java •Поддержка OpenGL (читаем • Большой вес Оптимальна в


аппаратный рендеринг) •Низкая англнете для средне
•Java в основе распространенность в и
•Легкая интеграция с другими рунете и средняя в мире высокополигональной
Java приложениями • Сложная интеграция с 3D графики
векторной графикой

Flash •Стоит на >90% компьютеров •Софтверный рендеринг Оптимальна для всех


•Мало весит (ориентировочно не более низкополигональных
•Удобство работы с растром, 10 000 полигонов при 3D проектов,
вектором, видео, в комбинации динамичной камере) трехмерных
2д с 3д •Софтверный z-ordering интерфейсов,
•Наличие развитых 3D движков •Проблемы с индексацией панорам и 3д
(Away3D, Sandy, Papervision etc.) поисковиками эффектов на сайтах.
•Параноидальная политика
безопасности во Оптимальна в рунете.
флешплеере
• Слабый язык в основе

Silverlight •Интеграция с WPF •Софтверный рендеринг Годится только 3


•Можно писать на C# (производительность на версия, оптимально
•DeepZooming уровне FP 10) использовать для
•Deep linking •Низкая зуминга и при
распостраненность портировании с WPF
•Большой вес плагина
•Отсутствие развитых 3D
движков
3D движки флеша
Движок Достоинства Недостатки Резюме
Flash 10 •Низкий вес swf-шек •Доступны только простейшие •Для простейших
(встроенные 3д •Простота 3д эффекты 3д эффектов
возможности) •У большинства стоит FP9,а не
FP10

Sandy •Простой в освоении • Уступает Papervision и Оптимален для


http://flashsandy.o •Много туториалов Away3D по функциональности новичков
rg/ •Есть версии под допотопные •Есть Haxe версия
флешплееры

Papervision •Самый популярный 3д движок • Уступает AWAY3D по Оптимален при


http://blog.papervisio => много туториалов и функциональности использовании
n3d.org/ компонентов чужих 3д
•Сильная FP10 версия компонент

AWAY3D •Широкие возможности для • Уступает Papervision по Оптимальный 3д


http://away3d.com/ программной генерации 3д популярности,а значит и движок для
моделей, рельефа и normalmaps количеству компонентов большинства
•Быстрое появление новых фич которые можно найти проектов
•Мощная структура классов
•Наличие быстрой и
легковестной версии Away3D
light для 10 флеша

Alternativa •Наивысшая •Платный ( 1000$ за проект) Оптимален для 3д


http://alternativapl производительность игр и визуализаций
atform.com •Специальные классы для 3д недвижимости
игр
Особенности Away3D
• Lathe , Extrude и Mirror позволяют программно генерировать 3д сцены, что
существенно уменьшает размер файлов
• Туман позволяет рендерить меньше полигонов
• NormalMapping позволяет с помощью текстур увеличивать качество модели
• Skinextrude позволяет делать рельеф на базе карты глубин
• Возможность указания движения по рисованному пути существенно облегчает
анимацию
• Возможность рендера в bitmap позволяет добавлять красивые 2Д эффекты
• Кэширование трёхмерных моделей позволяет загружать модели на десятки
тысяч полигонов при статической камере

http://www.closier.nl/playground/smoothtransition.html
http://www.closier.nl/playground/normalmaps3.html
Границы применимости 3д

Лучше применять для: Лучше НЕ применять для:


•Промосайтов •Отображения статей (за
•Отображения галерей исключением оглавлений и облаков
•Игр тегов), ибо почти не индексируется
•Панорам и виртуальных туров •Ресурсов рассчитанных на
•Отображения сложного мобильные телефоны и слабые
оглавления сайта компьютеры (за исключением
•Визуализации телефонов, серверного 3д)
недвижимости и прочих товаров в •Простых сайтов
3D •Низко бюджетных сайтов (3д
•Отображения сложных схем и программируется сложнее)
графов •Простых схем
•Визуализации OLAP кубов и
экономическое статистики
Почему 3д веб не состоялся раньше
Основные причины:
–Медленный интернет (преобладание dial up)
–Сфокусированность крупных компаний на виртуальных мирах,а не на 3д интерфейсах и анимационных эффектах
–Позднее добавление 3D эффектов во флеш
–Пессимизм инвесторов после неудачных первоначальных инвестиций в виртуальную реальность в 90-х годах
–Высокие системные требования для рендеринга 3D сцен с генерируемыми текстурами и геометрией и малое
внимание уделенное таким (например, werkzeug) технологиям со стороны крупных ИТ компаний
Факторы роста популярности 3Д в
будущем
Развитие 3D стимулируется:
• Расширением каналов доступа
• Распространением 3д манипуляторов:
– Microsoft Surface и сенсорные дисплеи.
– Перчатки виртуальной реальности
– Управление с помощью 3д камер.
– Виртуальная сфера и прочие
манипуляторы для ходьбы в 3D мире.
– Прочие 3д манипуляторы.
• Отображения 3д:
– 3д шлемы
• «Закрытые»
• «Дополненная реальность».
– 3д мониторы
Контакты: http://nebgroup.com.ua , office@nebgroup.com.ua

ВОПРОСЫ И
ОБСУЖДЕНИЯ

Оценить