Приклади 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, відображається на окремій веб-сторінці. Сцена складається з 2176 240 полігонів, 36 текстур без тіней від одного джерела світла, розташованого зверху над будинком. Рендер тіней не виконувався для сильного освітлення ділянки сцени басейну. Виконано рендер прозорості скла з візуальним оглядом планування будинку та рендер водної поверхні у басейні.
3D Візуалізація WebGL2 проекту двоповерхового будинку з басейном

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

Фото 360° для стилю інтер'єрів та інтерактивні 3D презентації екстер'єру архітектурних проектів з використанням WebGL

Для інтерактивного представлення складних об'єктів у браузері на веб-сайтах застосовується WebGL сцени з високою якістю та реалістичністю 3D-графіки. Сценами WebGL можна створювати фото 360° для інтер'єрів у вигляді сферичної 360° панорами та наочно демонструвати презентації екстер'єру архітектурних проектів. Через обмеження вбудованої графіки ноутбуків WebGL 2 не підходить для ювелірних виробів з дорогоцінним камінням, але візуалізація архітектурних проектів з шибками та водою в басейнах виконується на високому рівні.

Роботу з 3d графікою 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 для відображення на поточній сторінці або посиланням на окрему веб-сторінку.