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

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

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

Для интерактивного представления сложных объектов на веб-сайте применяется WebGL сцены. Из-за ограничений встроенной графики ноутбуков 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-страницу.

.