Технологии для создания и отображения 3D графики в браузере

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

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

С развитием HTML, web-разработчики получали новые возможности для создания все более и более сложных web-приложений. Изначально HTML предлагал только возможность отображения статического контента, но с добавлением поддержки языка JavaScript появилась возможность реализации более сложных видов взаимодействий с пользователем и отображения динамического контента. В стандарте HTML5 добавились дополнительные возможности, включая поддержку двухмерной графики в виде тега canvas. Таким образом появилась возможность размещать на страницах разные графические элементы, от танцующих мультипликационных персонажей до вывода анимации, соответствующей вводу пользователя. Рассмотрим несколько технологий.

WebGL

WebGL (веб-графическая библиотека) - это библиотека программного обеспечения, связанная с графикой, которая предназначена для интеграции расширенного языка программирования JavaScript с OpenGL ES (OpenGL для встроенных систем) для создания ускоренной 3D-графики.

WebGL предоставляет 3D-графические API-интерфейсы для холста HTML5 без каких-либо плагинов для браузера

WebGL - это мощный API, который включен в состав Firefox, Chrome и Safari. Этот API обеспечивает привязку JavaScript к функциям Open GL ES, что позволяет обеспечить аппаратное ускорение 3D-контента на вебстранице. Этот API, в то время как мощный, его использование требует значительного понимания 3D-программирования и 3D-математики. Вебразработчики могут обнаружить, что это непривлекательно или слишком много хлопот из-за его низкого уровня. Один из способов упростить использование веб-разработчиками WebGL заключается в предоставлении API среднего уровня.

Создание технологии WebGL стало шагом вперед, позволившим отображать и манипулировать трехмерной графикой на web-страницах с помощью JavaScript. Благодаря WebGL, разработчики могут создавать продвинутые пользовательские интерфейсы, трехмерные игры и использовать трехмерную графику для визуализации различной информации из Интернета. Несмотря на внушительные возможности, WebGL отличается от других технологий доступностью и простотой в использовании, что способствует её быстрому распространению.

Некоторые задачи, где может использоваться WebGL:

• •    браузерные игры — весь игровой процесс происходит непосредственно в окне браузера;

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

• •    презентации на сайте — позволит пользователю подробно показать план объектов строительства, с возможностью совершения виртуального тура;

• •    on-line проектирование - 3D-проектирование, с возможностью одновременной работы нескольких пользователей.

Достоинства WebGL:

• •    работает в браузере без установки стороннего ПО (плагинов);

• •    кроссплатформенность (работа в различных ОС, в том числе мобильных);

• •    открытость стандарта. Не требует лицензионных отчислений;

• •    основан на знакомой разработчикам технологии OpenGL;

• •    интегрируется с другими браузерными технологиями;

• •    вы можете заниматься разработкой приложений с трехмерной графикой, используя только текстовый редактор и браузер;

• •    вы можете использовать всю широту возможностей браузеров.

Кроме того, существует множество библиотек и игровых движков, использующие WebGL. Они позволяют не создавать весь 3D контент с нуля и упрощают разработку приложения.

C3DL

C3DL - это библиотека JavaScript, которая предоставляет некоторые базовые функции 3D для веб-разработчиков, которые хотят разрабатывать 3D-контент в браузере, не вникая в тонкости WebGL и 3D-математики. C3DL имеет следующие функции:

• •    Загрузка модели Collada

• •    Выбор мыши

• •    Система освещения

• •    Система камеры

• •    Система частиц

• •    Линии и точки

• •    Система эффектов, которая позволяет применять заменяемый шейдер для изменения внешнего вида.

Processing - это язык программирования с открытым исходным кодом, первоначально разработанный Бен Фрай и Кейси Реасом. Язык был реализован с помощью Java, и для его использования через Интернет требуется подключаемый модуль. В 2008 году Джон Ресиг создал частичную реализацию 2D-контекста для обработки с использованием JavaScript и Canvas, позволяя использовать Обработку в любом веб-браузере, который поддерживает элемент HTML5 без каких-либо подключаемых модулей. WebGL позволяет переносить через 3D-части языка обработки. Язык обработки был сделан для уменьшения сложности графического программирования, более доступного в эпоху C ++ и Java. Processing.js привносит эту идею в сеть, уменьшая сложность рисования с помощью WebGL и .

Заключение. Добавление 3D в среду браузера позволит использовать уникальные возможности для приложений. Например, возможность визуально 3D-сцен в браузере позволит совместное редактирование 3D-сцен. Библиотеки более высокого уровня, такие как C3DL и Processing.js, сделают ее более доступной для веб-разработчиков, которые не хотят иметь дело с деталями 3D-математики и низкого уровня