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

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

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

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