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

Віртуальний 3D тур на основі 360 фото за допомогою Blender 3D і WebGl

Фото 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 для відображення на поточній сторінці або посиланням на окрему веб-сторінку.