Как сделать 3D конфигуратор под браузер без webGl?

Question

[Игорь Самохин]

Здравствуйте,

подскажите, как такое сделать? https://audirs5.zerolight.com/

Если смотреть в консоле, то всё дело в теге video с src: blob:https://audirs5.zerolight.com/3b71d330-3605-4c2c-a...

Но я не представляю как сделать так, чтобы можно было вращать эту сцену, менять диски... Даже если запустить конфигуратор в режиме видео, то во время просмотра можно менять диски и цвет.

Answer 1

[profesor08]

Там при каждом движении мышки отправляется на сервер инфа и загружается кусок видео, который воспроизводится. Отсюда и задержки. Возможно оно рендерится прямо на клиенте, так как подгружаются куча картинок. Но так и не понятно в чем тут смысл, если можно сделать на webgl гораздо лучше и удобнее, 60fps и без задержек.

Comments

[Игорь Самохин]

на webGl качество модели на порядок хуже

[Игорь Самохин]

Запросы из консоли на сервер вижу, но в ответе приходит подобное: {"timestamp": 1533129226, "return": "pong", "success": true}

То есть на лету src в video не подменяется как я понял из ответа на запрос сервера

[profesor08]

Игорь Самохин, там websocket активный

[Игорь Самохин]

profesor08, через что сокет смотрите?

[profesor08]

Игорь Самохин, там же, где и все остальные подключения, есть отдельная вкладка

[profesor08]

Игорь Самохин, а что касается качества, то если присмотреться, то это обычная 3d сцена, с обрезанной травой, skymap в виде гор и 3d моделькой машины, у которой в некоторых местах на стыках ligthmap багует. Да и рендерится скорее всего на клиенте на том-же webgl, а из кадров склеивается видео и кодируется.

[Игорь Самохин]

profesor08, если рендерится на клиенте, то значит средствами webgl. А качество сцены как в 3д максе. То есть я так понимаю отрендерили 1000 видео в разных ракурсах и 1000 картинок и все это как то подружилось..

[profesor08]

Игорь Самохин, текстуры подгружаются там, значит рендер на клиенте. Фильтры и сглаживание никто не отменял.
https://threejs.org/examples/webgl_postprocessing_...

[Игорь Самохин]

profesor08, под рендером вы подразумеваете webgl все же? Или просто средствами js идет склейка jpg кадров в реальном времени в зависимости от того куда я кручу сцену?

[profesor08]

Игорь Самохин, вообщем, если посмотреть сам сайт, то станет понятно, что эта демка представляет собой некий стрим, который передает видео. Получается что-то вроде 3D видео, только в центре некий объект, а не зритель. Они заранее отрендерили огромное количество малюсеньких отрезков видео с разных позиций. А на сайте, когда крутишь мышкой, то передаются координаты на сервер, а сервер по вебсокетам передает кусочки видео на клиент. Как-то так.

[Игорь Самохин]

profesor08, посчитал количество рендера картинок для этого проекта. Только раскадровка анимаций двери для каждого ракурса это 2 000 000 картинок. То есть всего на проект уйдет миллионов 20.

Я смотрю сейчас при зуме - меняются блики на корпусе

И почему вы думаете, что это видео, знаете какое количество нужно отрендерить? И если посомтерть там все в canvas элементе происходит. Почему думаете, что это не отрисовано с помощью webgl?

[profesor08]

Игорь Самохин, потому что я увидел только один канвас, который ниже по странице, на котором рисуется график. Далее видеокарта практически не нагружается, а мощностью процессора так быстро рендерить не выйдет. И в инспекторе там тег видео, и при движении там по вебсокету гоняется куча данных. Как я написал выше это стрим, что на клиенте ясно понятно, что на сервере можно только гадать. Я предположил что там заранее отрендеренные куски данных. Так как для рендера в реальном времени нужно время, время нужно на кодирование, время нужно на передачу. Но тут сразу идет передача данных и воспроизведение. Что-то еще предполагать и гадать не имеет смысла, проще декомпилировать кусок кода и убедиться лично что там на самом деле происходит.

Answer 2

[Михаил Бухман]

А зачем без WebGL? Трёхмерная графика будет грузиться намного быстрее чем секвенции, а готовить её намного проще.

Comments

[Игорь Самохин]

WebGL это посредственное качество. Обратите внимание, что конструкторы автомобильных брендов в вебе не на WebGL

[Михаил Бухман]

Игорь Самохин, качество может быть очень неплохим, посмотрите на портфолио движков blend4web или verge 3d. Автомобильные бренды представлены и в довольно большом количестве.