Дополненная реальность в браузере | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Несмотря на коронавирус, электронный вариант журнала выйдет 18 апреля.

Опубликовать статью в журнале

Автор:

Научный руководитель:

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №51 (289) декабрь 2019 г.

Дата публикации: 18.12.2019

Статья просмотрена: 47 раз

Библиографическое описание:

Игнатьев, А. Ю. Дополненная реальность в браузере / А. Ю. Игнатьев. — Текст : непосредственный, электронный // Молодой ученый. — 2019. — № 51 (289). — С. 13-16. — URL: https://moluch.ru/archive/289/65377/ (дата обращения: 08.04.2020).



В данной статье рассматриваются технологии для построения дополненной и виртуальной реальностей в браузере, описываются основные компоненты дополненной реальности и библиотеки, упрощающие ее создание.

Ключевые слова: дополненная реальность, виртуальная реальность, WebGL, Three.js, A-Frame.

Современные веб-технологии стремительно развиваются, всё более вытесняя привычные программы. У веб-приложений есть множество преимуществ перед обычными приложениями: кроссплатформенность, полностью закрытый от вмешательства и копирования исходный код, широко настраиваемый пользовательский интерфейс, мгновенное обновление программного продукта и т. д. К недостаткам веб-приложений можно отнести необходимость подключения к сети интернет (однако, благодаря технологии ServiceWorkers подключение к сети интернет становится не обязательным, поскольку ответы на запросы и контент хранятся в кэше браузера) и слабая, по сравнению с обычными приложениями, производительность вычислений, особенно графических, задействующих видеокарту. Но несмотря на это, веб-технологии обладают достаточными возможностями, чтобы запустить тренд последних нескольких лет — виртуальную реальность — в браузере. Виртуальная реальность востребована во многих сферах деятельности. В Интернет-торговле виртуальная реальность может применяться для отображения товара в различных ракурсах, чтобы покупатель мог осмотреть товар со всех сторон. В сфере туризма — для предоставления 3D панорамы местности. Для обучения и инженерии с помощью виртуальной реальности может создать различные физические модели и продемонстрировать их работу в объеме.

Помимо виртуальной реальности существует и дополненная реальность. Они используют схожие технологии и подходы, но имеют разную степень отличия от реального мира. Виртуальная реальность — это полностью смоделированное и нарисованное окружение. Она имитирует окружающий мир через воздействие на органы чувств пользователя: зрение, слух, осязание и т. д. Дополненная же реальность не имитирует своё окружение, она дополняет существующий мир через добавление слоёв с моделями на изображение реального мира, взятого, например, с камеры.

Виртуальная и дополненная реальности основаны на построении 3D моделей объектов, их отображении пользователю и реакции на действия пользователя, такие как передвижение и взаимодействие. Html не имеет встроенной возможности работы с 3D моделями, но их можно рисовать в 2D проекции в специальный тэг canvas. Данный тэг не имеет широких возможностей по умолчанию, он может рисовать точки, прямые, различные геометрические фигуры, закрашивать их и т. п. Этого недостаточно для полноценной работы с виртуальной реальностью. Поэтому существует несколько библиотек, позволяющих облегчить процесс рисования в canvas.

WebGL

WebGL (Web-Based Graphics Library — Веб-ориентированная библиотека графики) представляет собой средство растеризации сцены на основе написанного кода [1]. Она отображает точки, линии и треугольники, описанные в сцене, под которой понимается совокупность 3D объектов, находящихся в одном пространстве. WebGL выполняется на графическом процессоре компьютера. Для работы WebGL используются две функции — вершинный и фрагментный шейдеры, написанные на языке GLSL. Задачей вершинного шейдера является вычисление положения вершин модели, а WebGL, исходя из этих данных, строит различные примитивы, например, точки, прямые и треугольники. Фрагментный шейдер отвечает за вычисление цвета для каждого пикселя примитива.

Почти вся работа с WebGL заключается в настройке параметров для этих функций. Для этого необходимо установить настройки для каждого объекта в сцене, а затем выполнить функции gl.drawArrays и gl.drawElements, которые выполнят шейдеры на графическом процессоре.

Существует несколько вариантов передачи данных шейдеру:

  1. Атрибуты и буферы. Буферы — это массивы бинарных данных, которые могут содержать положение вершин, нормали, координаты текстур и т. д. А атрибуты определяют, как данные из буферов передаются в вершинный шейдер.
  2. Глобальные переменные. Они устанавливаются перед выполнением шейдеров.
  3. Текстуры. Это массивы данных, к которым есть произвольный доступ шейдера. Чаще всего это изображение.
  4. Варьируемые переменные. Они позволяют передать данные из вершинного шейдера фрагментному шейдеру.

Интерфейс, предоставляемый WebGL, заметно упрощает работу с графикой в веб-приложении, однако он всё равно является слишком сложным для быстрой и удобной разработки дополненной реальности.

Three.js

Three.js — это JavaScript библиотека для построения 3D графики в браузере, использующая в своей основе WebGL. То обстоятельство, что библиотека написана на JavaScript, позволяет использовать её на любом JavaScript окружении, например, в браузере пользователя или на сервере, написанном на Node.js. [2, 3].

Любая графика основывается на большом количестве математических функций и расчётов, и Three.js для этого имеет свою математическую библиотеку, которая предоставляет конечному пользователю упрощенный интерфейс построения графики.

Каждое Three.js приложение состоит из следующих компонентов:

  1. Сцена — это хранилище всех остальных компонентов. Одновременно может отображаться только одна сцена. В сравнении с реальным миром, сцена — это вселенная, которая состоит из множества других объектов. Сцена не должна иметь какую-то 3D модель, она просто описывает иерархию объектов. Three.js позволяет задать цвет сцены, а также добавлять и удалять объекты из неё. Именно сцена отображается в элементе canvas.
  2. Камера — определяет позицию, направление и другие параметры того, как пользователь должен видеть сцену. Существует два вида камер: перспективная, где размеры объектов уменьшаются с их удалением от камеры, как в реальном мире, и ортогональная, где размеры объектов не изменяются с их удалением от камеры. Камера имеет множество параметров для настройки: вектор позиции, вектор направления, вертикальный и горизонтальный углы обзора, ближняя и дальняя плоскость рендеринга (объекты, которые находятся вне данных плоскостей, отображаться не будут), соотношение сторон. Схема работы камеры представлена на рисунке 1.

C:\Users\bamix\Downloads\Untitled Diagram.png

Рис. 1. Схема работы камеры Three.js

  1. Объекты (меши) — непосредственно сами 3D модели, которые видит пользователь. Все объекты состоят из геометрии и материала. Геометрия определяет форму объекта и может быть задана несколькими способами: задание массива вершин, встроенные функции для создания примитивов, таких как кубы, сферы, цилиндры и т. п., внешние модели. Внешние модели — это модели, построенные в различных программах для моделирования, таких как 3DS Max, Maya, Blender и т. п. Данные модели могут содержать абсолютно любые формы, которые затруднительно построить встроенными в Three.js средствами. Но данные модели должны иметь формат, поддерживаемый веб-технологиями, а именно glTF. Материал определяет, как объект будет выглядеть, т. е. цвет, отражающие способности, свечение и т. п. Также материал может содержать текстуру — изображение, отображающее визуальные свойства каких-либо поверхностей, например, дерева или металла. Помимо текстур материал может содержать карты нормалей, которые изменяют отображение геометрии без изменения самой геометрии, это используется для создания шероховатостей, рельефа и т. п.
  2. Освещение — определяет все источники света в сцене. Они могут быть глобальными (солнце), направленными (прожекторы), точечными (лампочка), полусферными (отраженный свет от неба и облаков), прямоугольными (свет от телевизора). Различные виды освещения имеют различные настройки, но основными являются цвет, интенсивность свечения, коэффициент отбрасывания теней.
  3. Рендерер — программный элемент, который, исходя из сцены и камеры, рисует изображения и помещает их в элемент canvas. Существует несколько рендереров в Three.js, но самый богатый функционал имеет WebGLRenderer, который использует в своей основе WebGL. В параметрах рендерера необходимо задать ширину и высоту выходного изображения, а также соотношение пикселей сцены и устройства вывода.

Общая схема работы Three.js представлена на рисунке 2.

C:\Users\bamix\Downloads\three-js.png

Рис. 2. Обобщенная схема работы Three.js

Помимо перечисленной функциональности, Three.js имеет множество других возможностей: анимации, аудио, шейдеры, видео-текстуры, различные загрузчики объектов и текстур и т. д.

Возможностей данной библиотеки достаточно для построения различных приложений виртуальной и дополненной реальностей. Но также существует несколько библиотек, использующих в своей основе Three.js и ещё больше упрощающих разработку приложений дополненной реальности.

A-Frame

A-Frame — это фреймворк для дополненной реальности, особенностью которого является добавление объектов в сцену не через JavaScript, а через Html, что улучшает наглядность иерархии сцены. Все объекты сцены представлены как html-компоненты, которые являются последним трендом разработки веб-приложений и знакомы всем разработчикам Angular, React, Vue и других одностраничных фреймворков. Также данный фреймворк имеет визуальный редактор сцены со всеми объектами этой сцены.

Веб-технологии стремительно развиваются с каждым днём, и то, что казалось невозможным еще 20 лет назад, сейчас распространено повсеместно. Рассмотренные библиотеки не являются единственным решением для построения дополненной реальности. Технология WebAssembly, которая позволяет выполнять код, написанный на языках Java, C++, C#, Python и других, в браузере с близкой к нативным приложениям производительностью выводит разработку веб-приложений на новый уровень.

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

В силу своей новизны технология WebAssembly ещё не везде распространена и не имеет стабильных библиотек для дополненной и виртуальной реальностей.

Литература:

  1. Основы WebGL. — URL: https://webglfundamentals.org/webgl/lessons/ru/webgl-fundamentals.html (дата обращения: 10.03.2019).
  2. What is three.js? — URL: https://medium.com/@pailhead011/what-is-three-js-7a03d84d9489 (дата обращения: 10.03.2019).
  3. Missing Manual for three.js — URL: https://discoverthreejs.com/ (дата обращения: 10.03.2019).
Основные термины (генерируются автоматически): виртуальная реальность, дополненная реальность, сцена, реальный мир, модель, библиотека, GLSL, схема работы камеры, браузер, возможность.


Похожие статьи

Дополненная реальность — новые возможности в киноиндустрии

Ключевые слова: дополненная реальность, виртуальная реальность

Принцип работы системы заключается в том, что пользователи прикрепляют один трекер к камере, а также как

Виртуальная реальность — это созданный техническими средствами мир, в котором человек...

Расширение сознания за счёт переноса в реальный мир...

Так что же такое дополненная реальность?

Виртуальная реальность — это созданный техническими средствами мир, в котором человек ощущает

В процессе построения модели выделяются наиболее значимые свойства: модель самолета должна иметь геометрическое...

Дополненная и виртуальная реальность в образовании

Про виртуальную и дополненную реальности и возможности их применения в образовании дальше и пойдет речь.

Хотя в образовании дополненная реальность пока применяется довольно редко, но всё больше учителей, исследователей и разработчиков начинают двигаться...

Дополненная или виртуальная реальность в музейном...

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

Захватывающая мир тенденция включает в себя виртуальную реальность, устройства управления жестами, размывает...

Система управления техникой с применением технологии VR

Виртуальная реальность — это созданный техническими средствами мир, в котором

Дополненная и виртуальнаяреальность в образовании. ‒ системы прямого подключения к

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

Устройства виртуальной реальности | Статья в сборнике...

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

Развитие виртуальной реальности | Статья в журнале...

Краткая история развития технологии виртуальной реальности (VR). В течение долгого времени VR казалась концепцией научной фантастики.

Статистика показывает, что с 2016 года дополненная реальность несколько раз превосходит VR, поскольку она более удобна и...

Человек в виртуальном мире | Статья в журнале...

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

Современные периферийные устройства виртуальной реальности

Система трекинга для виртуальной реальности представляет собой некую копию систем позиционирования и ориентации, существующих в природе. «Естественные» системы трекинга в реальном мире — органы чувств человека. Так, зрение помогает человеку определить, где...

Похожие статьи

Дополненная реальность — новые возможности в киноиндустрии

Ключевые слова: дополненная реальность, виртуальная реальность

Принцип работы системы заключается в том, что пользователи прикрепляют один трекер к камере, а также как

Виртуальная реальность — это созданный техническими средствами мир, в котором человек...

Расширение сознания за счёт переноса в реальный мир...

Так что же такое дополненная реальность?

Виртуальная реальность — это созданный техническими средствами мир, в котором человек ощущает

В процессе построения модели выделяются наиболее значимые свойства: модель самолета должна иметь геометрическое...

Дополненная и виртуальная реальность в образовании

Про виртуальную и дополненную реальности и возможности их применения в образовании дальше и пойдет речь.

Хотя в образовании дополненная реальность пока применяется довольно редко, но всё больше учителей, исследователей и разработчиков начинают двигаться...

Дополненная или виртуальная реальность в музейном...

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

Захватывающая мир тенденция включает в себя виртуальную реальность, устройства управления жестами, размывает...

Система управления техникой с применением технологии VR

Виртуальная реальность — это созданный техническими средствами мир, в котором

Дополненная и виртуальнаяреальность в образовании. ‒ системы прямого подключения к

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

Устройства виртуальной реальности | Статья в сборнике...

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

Развитие виртуальной реальности | Статья в журнале...

Краткая история развития технологии виртуальной реальности (VR). В течение долгого времени VR казалась концепцией научной фантастики.

Статистика показывает, что с 2016 года дополненная реальность несколько раз превосходит VR, поскольку она более удобна и...

Человек в виртуальном мире | Статья в журнале...

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

Современные периферийные устройства виртуальной реальности

Система трекинга для виртуальной реальности представляет собой некую копию систем позиционирования и ориентации, существующих в природе. «Естественные» системы трекинга в реальном мире — органы чувств человека. Так, зрение помогает человеку определить, где...

Задать вопрос