Как воссоздать 3D конструктор тортов на сайте?

Question

[Игорь Морев]

Привет, ребят. На работе попросили сделать 3D конструктор тортов. Чтобы человек, зайдя на сайт, мог "собрать" себе торт из разных ингредиентов, выбрать узоры, цвет. И в идеале, чтобы торт можно было крутить с разных сторон.
Вот пример https://biskitty.com/configurator/frontend

При этом торты могут быть разных размеров и должны выглядеть достаточно реалистично (не 170 000 полигонов конечно, но более менее - чтоб выглядело вкусно в общем). Особенно впечатляюще в примере выглядит эффект выскакивания куска из торта и залёта его обратно.

Как лучше подойти к реализации, какой подход выбрать? Делать раскадровку из фотографий так себе вариант, потому что тортов может быть довольно много. Сам склоняюсь в варианту с webgl. Дизайнер делает модель в 3d max, затем всё это дело отображается в браузере и работать с тем что получится. В чём плюсы, минусы?

Кто нибудь реализовывал подобное? Буду рад услышать ваши советы по этой, как по мне, интересной теме.

p.s. Прошёл где-то уже год как этот проект заморозили. Но постепенно появляется интерес к 3D. Начал осваивать CINEMA 4D, ещё поглядываю на blender, говорят, хороший редактор.

Comments

[brenat]

Ты разобрался с этим конструктором? У меня сейчас похожая задача... думаю как лучше сделать, хотел посоветоваться

[Игорь Морев]

brenat: Нет, т.к. проект заморозили

Answer 1

[Александр Павлюк]

На приведенном сайте все сделано путем набора фотографий и видео.

Если хотите сделать в полном 3d, то можно использовать three.js или Blend4Web, например. Это будет быстрее, чем с нуля на голом WebGL.

Answer 2

[Виктор Королев]

Вот рабочий пример конструктора сделанного на Blend4Web. Грузится нехило, так как ребята запихали слишком качественные модели. Имхо, их надо было сделать полегче. А так, хороший вариант для тестирования на разных платформах. Можно определитсься к пригодности Blend4Web и webgl в целом к таким задачам.

Comments

[Игорь Морев]

Спасибо за пример.

[madved]

www.viscircle.de/realtime-3d-visualizations-perfor... вот конструктор попроще но графика в разы лучше (тоже Blend4Web)

Answer 3

[Иван]

я бы не брался за реализацию в браузере 3D, потому что это еще сыро (СЫРО)
вариант, что не заработает в браузере заказчика, например.
Самое надежное - это ренедерить ролики и крутить таймлайн, изображая три дэ. Натрахаетесь с этим гарантированно меньше, результат будет гарантированно стабильней и почти наверняка красивей

Comments

[Александр Павлюк]

Очень маловероятно, что не заработает. caniuse.com/#feat=webgl
Особенно если использовать готовые библиотеки.

[Иван]

Александр Павлюк: это интересно, что вы присылаете ссылку, где у Firefox, Opera, Android - partial support, а IE 9-10 вообще не поддеживается ))

[Иван]

Люди имеют геморрой даже со стабильными системами, типа нативных приложений под мобилками, а тут речь идет о частично поддерживаемом, не стандартизированной технологии в зоопарке браузеров.

[Александр Павлюк]

Иван: partial support полностью решается использованием three.js, которая адаптируется под такие ситуации.
Если делать не в 3д, а с помощью видео, то можно хлебнуть не меньше горя с поддержкой антиквариата.
caniuse.com/#search=video
caniuse.com/#search=canvas

[Иван]

ну и не забываем о такой неясной вещи, как производительность устройств. Чтобы торт классно выглядел , сколько полигонов надо? Сколько полигонов может отобразить девайс пользователя?

Принципиальный вопрос здесь - для какой цели делается проект. Если это экспериментальная, промо-фича, которая должна привлечь пользователя на сайт (смотрите, настоящие торты в 3Д!) и поразить технологичностью - то это одно. Можно показывать всем табличку - "работает только в Chrome последней версии на десктопе", и люди будут ставить хром и т.д. Но готовьтесь к трудозатратам, тем более что вещь для вас новая.

Или это сайт, на котором люди действительно заказывают торты, и заказчику интересно, чтобы заказывать торты могли все, как можно больше, чтобы проект был готов быстрее и с гарантированным результатом. Тогда фотосессия - ваш выбор. Вы точно справитесь, это будет хороший проект.

[Иван]

Александр Павлюк: у вас есть опыт таких и эдаких проектов? смотреть caniuse это одно, шишки в реальности набиваются совсем в других местах (неожиданных всегда)

[Александр Павлюк]

Иван: Работал с WebGL уже много раз, partial support там в определенных местах только типа размерности текстур не под степень двойки. Больших проблем с поддержкой браузеров не было.
Судя по ТЗ автора, проект именно рассчитан на вау-эффект.
Много полигонов для торта не понадобится, тут главное освещение и шейдеры грамотно сделать. Запечь реалистичные лайтмэпы и будет уже 50% успеха. Плюс, в WebGL ведь нет старого пайплайна по системе glBegin() glVertex().... glEnd(). API прямо таки заставляет использовать VBO, так что написать медленную отрисовку, это надо постараться.

[Иван]

Александр Павлюк: класс, спасибо за ответ. А как оно на планшетах вертелось? не тормозило?

[Игорь Морев]

Александр Павлюк: А можно посмотреть на ваши работы?

[Александр Павлюк]

Игорь Морев: я WebGL+js использую для прототипирования игр, публичных работ у меня нет по этой теме. Могу из спортивного интереса на выходных сделать вам прототип торта, потестите в разных условиях )))

[Александр Павлюк]

Иван: на мобильных устройствах сейчас неплохо с этим. Мой старенький Nexus 4, например, без проблем тянет анимашку робота из заголовка скетчфаба https://sketchfab.com/
Кстати, можете пооткрывать там разные модели с планшета, оценить производительность.

[Игорь Морев]

Александр Павлюк: Да, спасибо. Вы бы мне очень помогли. [e-mail]

[madved]

Иван: WebGL Стандарт с 2011 года
Поддержка возможностей webgl разными конфигурациями мониторится тут webglstats.com , и показывает что всё норм, а будет лучше.

[Иван]

покажите торт, если получился! :)

[Игорь Морев]

Иван: дело не дошло, отменили проект)

Answer 4

[Николай]

three.js и вперед) вообще это на долго!

Answer 5

[lukoie]

Тю. Там же всё просто.
Есть гифка, в которой стейты разные, например, 10 картинок одного торта, первая картинка вид сбоку, последняя - вид сверху, и между ними переходные состояния. Когда надо - жаваскрипт их перебираем по очереди - так мы получили эффект 3Д переворачивания торта. Так же и с топпингами.
Внутрянка торта это тоже картинка, она просто поверх фотографии(!) цилиндра накладывается.
Вот как бы и всё, просто и примитивно. Хотя смотрится оно там вообще бомбезно.

Answer 6

[Kacar]

Есть идея создать на сайте конструктор спортивных площадок.
Есть стойки-трубы, есть навесные элементы на хомутах - турники, брусья, рукоходы, лавки для преса и тд.
Есть свое видение простого конструктора - в 2Д вид сверху собираютси все навесные элементы, стойки добавляются автоматом, а при переходе в 3Д уже видно всю площадку.

Может есть свое видение как это сделать просто, еще лучше.

Если есть профессионалы, которые могут такое реализовать, по уточнениям и обсуждению оплаты пишите на [e-mail]