3D просмотр объекта в браузере
Доброго времени суток.
Я с такой задачей не сталкивался, нужен совет, как правильно это сделать.
Суть задачи: реализовать возможность просмотра объекта (этикетки, ручки и т.п.) в виде 3Д, с возможностью вращения этого объекта.
Пример: http://cc.porsche.com/icc_euro/ccCall.do?userID=RU&lang=ru&PARAM=parameter_internet_ru&hookURL=http%3A//www.porsche.com/russia/modelstart/all/default.ashx%3Fmodelrange%3Dboxster&ORDERTYPE=981330&screen=1680x1050&vLevel=2
Если есть люди, которые это реализовывали, прошу вашего совета (как делать корректно рендер объекта, как соединить это все вместе, есть ли ограничения в распознавании текстур)
Комментарии пользователей
как делать я не знаю, но есть сайт для таких целей http://p3d.in/
Могут быть разные варианты: 1. 360°: HTML, CSS, JavaScript. Можно вращать вокруг одной оси на 360°. Суть в том, что грузится готовый набор из 179 картинок, на каждой из них объект повёрнут на 2° по сравнению с предыдущим (ну или 119 картинок и 3°). Пример - http://www.apple.com/html5/showcase/threesixty/ 2. 3D Объект можно вращать по всем осям, он рендерится на стороне клиента - в браузере. Но качество картинки ниже, чем в 360° т.к. лоуполи, неизбежные лесенки и с шейдерами всё грустно, грузит процессор. Тут 2,5 возможных реализации: Flash (не поддерживается в iOS). Пример - http://aerys.in/portfolio/citroen-ds3 WebGL (естественно не поддерживается в IE, даже в 9, и в Safari). Пример - http://carvisualizer.plus360degrees.com/threejs/ Теоретически возможно реализовать на JS (возможно уже есть 3D движки, но ни с одним из них я не сталкивался), но грузить комп будет больше, чем WebGL т.к. последний в оличие от JS использует видеокарту. Примеров не могу привести.
WebGL кстати в Опере ещё не поддерживается. Вариант 2.1: canvas. Но нагрузка на проц — жесть, и качество рендера тоже не айс.
Есть движок для таких целей. Посмотрите, может пригодится http://www.alternativaplatform.com/ru/
Есть рабочий скрипт http://www.magictoolbox.com/magic360/ бесплатный
Тю, там же прям на сайте при просмотре выскакиевает запрос на установку Unity Web Player... вот и ответ... А еще Flash поддерживает 3д модели, я б делал на флеше... работать будет почи у всех и во всех браузерах, за исключением яблочников, но их не много :)
в данном случае порщ сделан в юнити3Д, проекты можно компилировать под платформу как исполнительныйе файлы а можно как штмл страницу http://unity3d.com/ бывает в 2х видах, фри - бесплатный с ограниченным функционалом (но поверьте на фри делается 70-80% всех мириигр) и про стоит 1500$ (по крайней мере мы его за столько покупали), у ПРО есть плюс то что он работает с шейдерами трассировки, т.е. релтайм отражения приломления и каустика. А в случае с Фрии версией вам например для отражений надо будет кубемапу запекать
http://unity3d.com/gallery/demos/live-demos#angrybots - игра сделана полностью на фрии версии, но правда там дописывали много =)
всем спасибо за отзывчивость и помощь. Если я правильно разобрался WebGL - поддерживается не всеми видеокартами. юнити3Д - необходимо дополнительно устанавливать, это не удобно для пользователя. необходимо зайти на сайт и чтобы сразу было понятно, что да как крутить. для поставленной задачи может быть достаточно и такой реализации:
Romka_Petrenkin, понял.
maja4ek, объясните подробнее задачу. На вашем примере можно менять цвет машины, диски, убирать крышу - такие штуки нужны будут? Если да, то с 360° возникнут сложности, т.к. для каждого варианта (например, для каждого из нескольких цветов машины) нужно держать отдельный комплект картинок. А если просто есть объект, который нужно повертеть и одной оси вращения достаточно, не нужно будет его тюнинговать (цвета менять одним нажатием кнопки, что-то ещё) - то 360° - идеальный выбор. Его можно реализовать на html (не обязательно html5, достаточно обычного) и JS, можно на флэше (флэш для 360° не очень целесообразен, но если удобнее - можно реализовать на нём). Так что выбор реализации зависит от нюанса с "тюнингом".
17, В первоначальной задачи - нет необходимости подставлять другие объекты и цвета. Но я этого варианта не исключаю, что в будущем клиенту будет необходима подстановка других цветов. Пример, который вы приводили http://www.apple.com/html5/showcase/threesixty/, для выполнения первоначальной задачи достаточно. Пока разбираюсь в коде. пример кода, который у них на сайте - работает только с "touch eventами"
спасибо за помощь.