Программная библиотека для языка программирования JavaScript Web-based Graphics Library (WebGL) позволяет реализовать элементы 3D-графики на веб-страницах[5].

Одним из главных преимуществ WebGL является построение 3D-элементов непосредственно как веб-страницы, что не требует установки дополнительных расширений или подключения дополнительных библиотек со стороны пользователя. Это позволяет WebGL программам благополучно исполняться практически на любом устройстве пользователя (и на стационарных компьютерах, и планшетных компьютерах, на смартфонах, и игровых консолях…).

Однако, технология WebGL использует низкоуровневый набор методов для создания приложений. Это, с одной стороны,способствует внедрению технологии разработчиками браузеров в свои продукты, но создает большие трудности при создании интерфейсов.

При разработке WebGL приложений часто используется кроссбраузерная библиотека three.j, применяемая для создания и отображения анимированных трехмерных изображений.

Перед тем как приступить к созданию 3D объекта с использованием библиотек желательно, для удобства работы, установить на свой компьютер программу для создания и редактирования кода web-страницы и программу, которая создаст сервер, для того, чтобы после сохранения объект можно было просмотреть в браузере. Например, в первом случае можно использовать VisualStudioCode для создания и редактирования исходного кода[6], а для создания веб-сервера – Сaddy[7].

Далее для последующей работы необходимо скачать библиотеку three.js[8].После чего можно приступать к написанию кода. Для того, чтобы функции библиотеки вступили в силу необходимо в html-коде прописать путь к ней:<scriptsrc=”libs/three.min.js”></script>.

Рассмотрим возможности технологии WebGLна примере создания куба.

Для того,чтобы создать WebGL приложение, содержащее трехмерное изображение, необходимо:

1) определить область вывода изображения, в котором оно будет отображаться:

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); // создание камеры

camera.position.z = 400; //выбор положения

var texture = new THREE.TextureLoader().load( ‘textures/cube.jpg’ ); //добавление текстуры

var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 ); //определение размера куба

var material = new THREE.MeshBasicMaterial( { map: texture } ); //определение материала состоящего из текстуры

В данном случае «cube.jpg» - это картинка, выбранная заранее.

renderer = newTHREE.WebGLRenderer(); // Настройка среды рендеринга в среду WebGL

renderer.setPixelRatio(window.devicePixelRatio ); //задание геометрии пикселей на устройстве отображения

renderer.setSize(window.innerWidth, window.innerHeight ); //определение границ области рендринга

document.body.appendChild(renderer.domElement );

Для того, чтобы объект можно было вращать и просматривать его со всех сторон при написании кода были использованы функции:

• startRotateCube– обработка события нажатия на левую кнопку мыши;
• endRotatingCube – обработка события отпускания левой кнопки мыши;
• rotateCube– процесс движения курсора мыши

После чего, созданный код необходимо сохранить как html-файл. Созданный файл можно просмотреть в браузере (рис.1).

Рис.1. Отображение 3D-объекта в браузере Google Chrome

Данный пример показывает, как много манипуляций потребовалось по скачиванию и установке тех или иных файлов, чтобы приступить к работе. Так же, само написание кода объекта требует определенных навыков в программировании. Сам текст кода довольно объемный для такого простого объекта (для этого проекта общее количество строк кода составило 122). А значит, можно сделать вывод, на сколько трудно будет создавать более сложные объекты, используя технологиюWebGL.

Blend4Web предназначена для создания визуализаций, презентаций, интернет-магазинов, игр и других web-приложений.

Данный фреймворк тесно связан с пакетом 3D моделирования и анимации Blender.

Графический движок можно комбинировать со звуковой системой, физическим движком, системой, которая реализуетискусственный интеллект, сетевую систему, а также редактор сцен и логики, формируя интегрированный инструментарий для создания 3D приложений – трехмерный движок.

Blend4Web предлагает всю визуальную работу выполнять в Blender: настраивать сцену, создавать модели и расставлять их, управлять физикой или частицами.

Рассмотрим возможности технологии Blend4Web на примере создания куба.

Для того, чтобы создать Blend4Web приложение, содержащее трехмерное изображение, необходимо:

1. Скачать Blend4Web с официального сайта [1] и выполнить установку на компьютер.
2. Выполнить настройку редактора Blender под технологию Blend4Web.
3. Затем Необходимо выбрать фигуру «Cube» во вкладке «Add Primitive» (Рис.1)

   

   Рис.1 Выбор фигуры «Куб»

4. Далее необходимо выбрать материал куба, выполнить настройку отображения «Image Movie» и загрузить текстуру. В данном случае это заранее выбранная картинка «Cube.jpg» (Рис.2)

   

   Рис.2 Выбор текстуры

5. После, нужно настроить освещение, чтобы куб можно было увидеть при экспорте в браузер. Выбрать во вкладке «Create» настройку «Sun». В окне предварительного просмотра можно наблюдать за процессом изменения создаваемого объекта (Рис.3)

   

   Рис.3 Окно предварительного просмотра «Preview»

6. Для того, чтобы изображение можно было просматривать в браузере необходимо его экспортировать в html – файл.

Созданный файл можно просмотреть и вращать в браузере без дополнительных настроек (рис.1).

Рис.4. Отображение 3D-объекта в браузере GoogleChrome

Данный пример показывает, что использование Blend4Web для разработки трехмерных изображений довольно удобно пользователю, так как разработка происходит по большей части в графическом интерфейсе, нежели составлением громоздких кодов (например, как в WebGL). Максимально снижаются барьеры вхождения разработчиков в технологию WebGL и других менее используемых технологий основанных на составлении кода. Тем самым сокращается и время создания объекта.

WebGL – это программная библиотека для JavaScript, которая позволяет создавать 3D графику, функционирующую в браузерах. Данная библиотека основана на архитектуре OpenGL. WebGL использует язык программирования шейдеров GLSL, имеющий C-подобный синтаксис. Особенность WebGL заключается в том, что код моделируется непосредственно в браузере с использованием элемента canvas, введенного в HTML5.

Работа с WebGL и шейдерами в частности — довольно трудоемкий процесс, требующий описания каждой точки, линии и грани. Для визуализации необходимо прописывать объемные фрагменты кода. Чтобы ускорить разработку, была создана библиотека Three.js, которая представляет собой набор готовых классов для создания и отображения интерактивной 3D графики. Three.js для WebGL — это как jQuery для JavaScript: библиотека предлагает декларативный синтаксис и абстрагирует разработчика от сложностей, связанных с 3D в браузере.

Для создания сцены с геометрическими фигурами мы использовали современный подход с импортом модулей:

javascript

import * as THREE from ‘three’;

import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;

Такой способ подключения (с использованием import maps) является более чистым и предпочтительным в современных веб-приложениях.

Инициализация сцены и основных компонентов

Первым шагом мы создаем сцену, камеру и рендерер:

javascript

const container = document.createElement(‘div’);

document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);

camera.position.set(300, 500, 1200);

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

Камера установлена на оптимальном расстоянии (1200 единиц), чтобы хорошо видеть оба ряда фигур. Параметр antialias включает сглаживание для более плавных краев объектов.

Освещение сцены

Для корректного отображения цветов и теней мы добавили два типа освещения:

javascript

ambientLight = new THREE.AmbientLight(0×404040, 2.0);

light = new THREE.DirectionalLight(0xffffff, 1.5);

light.position.set(1, 2, 1);

Фоновый свет (AmbientLight) обеспечивает базовое освещение всех поверхностей, а направленный свет (DirectionalLight) создает объем и подчеркивает форму объектов.

Управление камерой

Для интерактивного взаимодействия с пользователем подключены контроллеры OrbitControls, позволяющие вращать камеру вокруг сцены, приближать и отдалять изображение:

javascript

controls = new OrbitControls(camera, renderer.domElement);

controls.rotateSpeed = 0.5;

controls.enableZoom = true;

controls.minDistance = 300;

controls.maxDistance = 2000;

controls.enableDamping = true;

Размещение фигур в пространстве

Для организации фигур мы использовали Декартову систему координат и расположили объекты в два ряда. Каждая фигура имеет свои координаты position.set(x, y, z):

javascript

// Параметры расположения

const spacingX = 300;       // расстояние между фигурами по X

const startX = -450;        // начальная координата X

const row1Z = -200;         // координата Z для первого ряда (задний)

const row2Z = 200;          // координата Z для второго ряда (передний)

Создание геометрических фигур

В нашей сцене представлены различные типы геометрических тел, созданные с помощью встроенных классов Three.js:

1. Прямоугольник (BoxGeometry)

javascript

const geomBox = new THREE.BoxGeometry(300, 200, 220);

const box = new THREE.Mesh(geomBox, new THREE.MeshPhongMaterial({ color: 0xFFFF00 }));

2. Цилиндры и призмы (CylinderGeometry)

Класс CylinderGeometry универсален и позволяет создавать различные фигуры путем изменения параметров:

• Цилиндр (равные радиусы сверху и снизу, много сегментов)
• Треугольная призма (равные радиусы, 3 сегмента)
• Пятиугольная и шестиугольная призмы (равные радиусы, 5 и 6 сегментов)

3. Пирамиды и конусы

Установка верхнего радиуса в 0 превращает цилиндр в пирамиду или конус:

• Четырехугольная пирамида (верхний радиус 0, 4 сегмента)
• Шестиугольная пирамида (верхний радиус 0, 6 сегментов)
• Конус (верхний радиус 0, много сегментов для гладкости)

Цветовое оформление

Для каждой фигуры подобран индивидуальный цвет, делающий композицию яркой и наглядной:

• Желтый прямоугольник (0xFFFF00)
• Синий цилиндр (0x0000FF)
• Красная треугольная призма (0xFF0000)
• Зеленая шестиугольная пирамида (0x00FF00)
• Голубая пятиугольная призма (0x87CEEB)
• Салатовая четырехугольная пирамида (0x90EE90)
• Розовая шестиугольная призма (0xFFC0CB)
• Золотой конус (0xFFD700)

Визуализация и анимация

Для непрерывной отрисовки сцены используется цикл анимации:

javascript

function animate() {

    requestAnimationFrame(animate);

    controls.update();

    render();

}

function render() {

    renderer.render(scene, camera);

}

Обработчик изменения размера окна обеспечивает корректное масштабирование сцены:

javascript

window.addEventListener(‘resize’, onWindowResize, false);

Результат

В результате выполнения кода мы получаем интерактивную 3D-сцену с двумя рядами геометрических фигур (всего 8 объектов), расположенных на сером фоне со вспомогательной сеткой. Пользователь может свободно вращать камеру, приближать и рассматривать каждую фигуру с разных ракурсов, что делает данное решение отличным демонстрационным материалом для изучения возможностей Three.js и WebGL.