УДК 004.946

ПРИМЕНЕНИЕ ТЕХНОЛОГИИ WEBGL ДЛЯ СОЗДАНИЯ ТРЕХМЕРНЫХ МОДЕЛЕЙ

Белютина Кристина Алексеевна1, Иванова Наталья Александровна2
1Брянский государственный университет имени академика И.Г. Петровского, магистрант
2Брянский государственный университет имени академика И.Г. Петровского, кандидат технических наук, доцент кафедры информатики и прикладной математики

Аннотация
В статье рассматривается создание трехмерной модели куба с использованием технологии WebGL.

Ключевые слова: , , , , , , ,


Рубрика: 05.00.00 ТЕХНИЧЕСКИЕ НАУКИ

Библиографическая ссылка на статью:
Белютина К.А., Иванова Н.А. Применение технологии WebGL для создания трехмерных моделей // Современные научные исследования и инновации. 2017. № 12 [Электронный ресурс]. URL: http://web.snauka.ru/issues/2017/12/85166 (дата обращения: 12.01.2018).

Современные веб-технологии позволяют размещать на страницах веб-ресурсов не только статичную графику, различные варианты анимации, но и трехмерные изображения.

Программная библиотека для языка программирования 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; //выбор положения

2) задать параметры оформления 3D-объекта:

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» - это картинка, выбранная заранее.

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

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.

Поделиться в соц. сетях

0

Библиографический список
  1. Смотрим на WebGL: [Электронный ресурс]. URL: https://alexdev.ru/2156. (Дата обращения: 29.11.2017).
  2. Основы WebGL: [Электронный ресурс]. URL: https://webglfundamentals.org/webgl/lessons/ru/webgl-fundamentals.html. (Дата обращения: 29.11.2017).
  3. Библиотека three.js: [Электронный ресурс]. URL: https://threejs.org/. (Дата обращения: 29.11.2017).
  4. Белютина К.А., Иванова Н.А. К вопросу о выборе технологии для создания трехмерных изображений // Современные научные исследования и инновации. 2017. № 12 [Электронный ресурс]. URL: http://web.snauka.ru/issues/2017/12/85099 (дата обращения: 08.12.2017).
  5. WebGL-publisher: [Электронный ресурс]. URL:http://www.webgl-publisher.com (Дата обращения: 29.11.2017).
  6. Visual Studio Code. Code editing. Redefined: [Электронныйресурс]. URL: https://code.visualstudio.com. (Дата обращения: 29.11.2017).
  7. Caddy: [Электронныйресурс]. URL: https://caddyserver.com. (Дата обращения: 29.11.2017).
  8. Three.js: [Электронныйресурс]. URL: https://threejs.org/. (Дата обращения: 29.11.2017).


Количество просмотров публикации: Please wait

Все статьи автора «Белютина Кристина Алексеевна»


© Если вы обнаружили нарушение авторских или смежных прав, пожалуйста, незамедлительно сообщите нам об этом по электронной почте или через форму обратной связи.

Связь с автором (комментарии/рецензии к статье)

Оставить комментарий

Вы должны авторизоваться, чтобы оставить комментарий.

Если Вы еще не зарегистрированы на сайте, то Вам необходимо зарегистрироваться: