3D рендер в WEB?

Question

[Константин]

Здравствуйте, подскажите инструменты для релизации в WEB, серверная сторона PHP 7.2

такого вот интсрумента для 3D рендеринга интерьера
kronostar.esignserver2.com/gallery.do;jsessionid=9...

Answer 1

[Максим Тимофеев]

Там нет 3d и в помине. Там картинки меняются:
kronostar.esignserver2.com/image?maxwidth=1024&max...
Есть набор вариантов и все. Теоретически конечно на сервере можно это рендерить, но не думаю что это в принципе здраво, ибо задача ресурсоемкая. Так что есть смысл 1 раз нагенерить вариантов и закинуть на сервер.
Как вариант - несколько картинок, на каждой свой слой и динамически собирается 1, накладывая слои. Но точно не 3d.
Есть библиотеки типа https://www.babylonjs.com но в данном примере таким и не пахнет и они выполняются на клиенте, а не на сервере.

Answer 2

[Николай Чуприк]

Дополню Максим Тимофеев. Если картинки статичные или квазистатичные (цикличная анимация или известное перемещение камер по ограниченным позициям, например, обзор автомобиля 360 градусов), то надо заранее обсчитывать кадры с хорошим качеством в нормальных пакетах типа 3dsmax или blender, выдавая на клиент готовые png, возможно, послойно с прозрачностями.

Раньше я делал такое: обход здания по кругу с плавной заранее отрендеренной раскадровкой через 5 градусов (4-5 часов предварительного рендера в средненьком качестве). Где-то лежит в архиве, но это ещё даже на flash делалось.

Рендерить в браузере имеет смысл только истинно динамические изменяемые сцены или при сложном управлении камерой со стороны пользователя. Сейчас я пользуюсь three.js. При этом важно понимать, что высокого качества и фотореалистичности, сравнимых с тем же 3dsmax, от рендера на javascript, ждать не стоит. Для схематичной графики или абстрактных миров сойдёт, но не более.

Ну и как можно догадаться, динамически рендерить на стороне сервера нельзя в принципе из-за лагов. Только на клиенте.

Answer 3

[Egor Padalka]

Скажу как исполнитель подобной задачи. Это пре-рендер подложки.
В моей версии была PNG с тенями поверх всего интерьера. Цвет стен можно было менять в реалтайме, засчет наложенных теней все выглядело реалистично. У меня еще и свет включался разный - три разные PNG с тенями/светами

Answer 4

[Ivan Bogachev]

Добавлю еще пару слов про эту задачу в целом (не про сайт по ссылке в вопросе, а вообще). Если нужно делать такую статичную штуку с выбором цвета стен, обоев, полов и.т.д., особенно если нужно дать пользователю возможность выбирать свой вариант, то можно поиспользовать SVG. Это немного внезапно, но тем не менее. Основная часть комнаты, тени и рефлексы - это обычная картинка с прозрачностью в нужных местах (ее можно встроить в SVG через тег image), стены, полы - это простые прямоугольники, на которые наложены 3D-трансформации. Дальше их можно заливать как угодно - цветами, текстурами... и не нужно будет ломать себе мозг вопросом о том, как на лету повернуть "нормальную" текстуру и сделать из нее пол с перспективой. Мебель заливается цветом не намного сложнее - делается SVG-маска в форме предмета мебели и применяется фильтр hue-rotate. Таким образом можно "на коленке" соорудить работающий вариант такой презентации.

Answer 5

[Андрей Ларин]

При желании можно такое сделать на WEBGL движке. Еще можно будет покрутить камеру в сцене.

Comments

[0ffff0]

типа такого?
bullet.js

Answer 6

[Константин]

картинки меняются, это понятно, сервер ререндерит сцену, и отдает готовую картинку.

там очень большое кол-во этих фото, должно быть, наверняка генерится на лету

Comments

[mShpakov]

на лету можно, но это крайне ресурсоемко. Намного проще нагенерировать все возможные варианты 1 раз и потом отдавать их с сервера.

[Максим Тимофеев]

Вы читали что я Вам ответил?

Теоретически конечно на сервере можно это рендерить, но не думаю что это в принципе здраво, ибо задача ресурсоемкая.

Откройте какой-нибудь редактор у себя на компе, создайте 3d сцену и замерьте сколько она рендерится в картинку. Вы хотите подобную нагрузку иметь при каждом запросе? Это реально, но только не совсем здраво. Но говорят это лечится.

[Николай Чуприк]

Не так и много картинок там надо приготовить. 60 сцен (уж моделить их точно дольше, чем рендерить). Затем, я не смотрел сейчас с телефона, как там накладывают изображения, но почти уверен, что там прозрачные png накладывают сверху с тем или иным цветом мебели, стен, пола. Поэтому нет необходимости иметь все готовые комбинации, коих под тысячу наверное для каждой из сцен.

Кроме того, я уверен, отрендеренная мебель обтравливалась и её тон меняли уже просто в Фотошопе. То же со стенами и полами. Да, работа большая, но вполне посильная.

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

Николай Чуприк, можно даже н обтравливать, почти каждый нормальный 3д-пакет позволяет рендерить сцену по слоям с автоматическим получением масок.

[Николай Чуприк]

Александр Павлюк, ну да конечно. Я естественно так и делаю, мышкой контур не травлю. Но в моём случае (AutoCAD), маски накладывать приходится всё равно в Фотошопе.

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

Николай Чуприк, легче же скриптик написать, который наложит маски. С помощью Imagemagick, например.

[Николай Чуприк]

Александр Павлюк, ну это уже конкретный инструментарий, который зависит от конкретной задачи.