Приклади WebGL 3d графіки візуалізації моделей з Babylon.js для web-сторінок сайтів
Для інтерактивного представлення складних об'єктів на веб-сайті застосовується сцена WebGL. Через обмеження вбудованої графіки ноутбуків WebGL 2 не підходить для ювелірних виробів з дорогоцінним камінням, але візуалізація архітектурних проектів зі склом та водою в басейнах виконується на високому рівні.
Роботу з 3d графікою webgl на сайті виконує фреймворк з відкритим кодом Babylon.js з описом послідовності завантаження сцени на мові програмування TypeScript.
Послідовність завантаження:
- підключення фреймворку та 3d моделі у форматі babylon или gltf (GL Transmission Format);
- встановлення камери з джерелами світла
- відображення матеріалів, не створених текстурами: скло, поверхня води, метали та дорогоцінні каміння.
Babylon.js дозволяє показувати точну віртуальну копію 3D об'єкта в браузері, раніше створеного в Blender 3D. WebGL 2.0 підтримується у всіх основних браузерах із версткою 3D сцени для мобільних пристроїв. В архітектурній візуалізації можливе виведення одразу великої 3д сцени: земельної ділянки з огорожею та архітектурного проекту. Подання тривимірної моделі в браузері — найкращий спосіб візуальної оцінки складних об'єктів, яких ще не існує, або тільки вони готуються до виробництва.
Відображено різні варіанти верстки та виведення 3D сцени на сайті: HTML5 тегом iframe для відображення на поточній сторінці або посиланням на окрему веб-сторінку.