Примеры WebGL 3d графики визуализации моделей с использованием Babylon.js для web-страниц сайтов

Под 360° фото подразумевается создание бесшовной сферической панорамы. При просмотре 3D сцены в браузере создается визуализация панорамы с эффектом присутствия внутри объекта или участке ландшафта с круговым обзором пространства (360×180 градусов). Виртуальный тур такого типа используются для интерактивной визуализации интерьера помещений, или ландшафта где возможен круговой обзор камеры вокруг оси. При наличии готовой сцены интерьера в Blender 3D фото 360 делается довольно быстро. Самый доступный и быстрый способ самостоятельного создание 3D панорам 360° для веб-сайта для просмотра в браузере, использовать визуализацию на WebGL, применяя BabylonJS с технологией панорам PhotoDome. В настоящее время WebGL поддерживается всеми браузерами и мобильными устройствами. Для подключения PhotoDome требуется исходное изображение, которое должно быть «равнопрямоугольным» соотношение ширины к высоте рендера должно быть 2:1, с другими соотношениями сторон визуализация панорамы отображается неправильно! Самостоятельное создание 3D панорам (фото 360) в Blender для браузера. Пошаговая инструкция рендера бесшовной сферической панорамы с последующим…
Виртуальный 3D тур на основе 360 фото с используя Blender 3D и WebGl

Интерактивная визуализация проекта двухэтажного дома с бассейном (3D модель дома с бассейном и ограждением участка, без растительности) выполнена с использованием Babylon.js5.37 WebGL2, отображается на отдельной веб-странице. Сцена состоит из 2176240 полигонов, 36 текстур без теней от одного источника света, расположенного сверху над домом. Рендер теней не выполнялся для сильной освещенности участка сцены бассейна. Выполнен рендер прозрачности остекления с визуальным осмотром планировки дома и рендер водной поверхности в бассейне.
3D Визуализация WebGL2 проекта двухэтажного дома с бассейном

На основе ранее представленной 3D модели проекта одноэтажного дома, выполнена интерактивная визуализация (3D модель дома с ограждением участка, без растительности) с использованием Babylon.js5.37 WebGL2, с отображением на отдельной веб-странице. Сцена состоит из 1123941 полигонов, 35 текстур и тенями дома от одного источника света, расположенного сверху перед фасадом. Также выполнен рендер прозрачности оконного остекления с визуальным осмотром планировки комнат в доме.
3D Визуализация WebGL2 проекта одноэтажного дома

Фото 360° для стиля интерьеров и интерактивные 3D презентации экстерьера архитектурных проектов с использованием WebGL

Для интерактивного представления сложных объектов в браузере на веб-сайтах применяется WebGL сцены с высоким качеством и реалистичностью 3D-графики. Сценами WebGL можно создавать фото 360° для интерьеров в виде сферической 360° панорамы и наглядно демонстрировать презентации экстерьера архитектурных проектов. Из-за ограничений встроенной графики ноутбуков WebGL 2 не подходит для ювелирных изделий с драгоценными камнями, но визуализация архитектурных проектов с оконными стеклами и водой в бассейнах выполняется на высоком уровне.

Работа с 3д графикой webgl на сайте для создания масштабируемых и интерактивных веб-приложений выполняет фреймворк с открытым исходным кодом Babylon.js с описанием последовательности загрузки сцены на языке TypeScript.

Последовательность загрузки:

  1. загрузка фреймворка и 3d модели в форматах babylon или gltf (GL Transmission Format);
  2. установка координат камеры с источниками света;
  3. отображение материалов, не созданных текстурами: щейдеры стекла, поверхность воды, металлы и драгоценные камни.

Babylon.js позволяет показ точной виртуальной копии 3D объекта в браузере, ранее созданного в Blender 3D. WebGL 2.0 поддерживается во всех основных браузерах с версткой 3D сцены для мобильных устройств. В архитектурной визуализации возможен вывод сразу большой 3д сцены: земельного участка с ограждением и архитектурного проекта. Представление трехмерной модели в браузере — лучший способ визуальной оценки сложных объектов, которых еще не существует или только они готовятся к производству.

Представлены различные варианты верстки и вывода 3D сцены на сайте: HTML5 тегом iframe для встраивания на текущей странице или ссылкой на отдельную web-страницу.

.