WebGL (Web Graphics Library) - это JavaScript API для рендеринга интерактивной 2D и 3D графики в любом совместимом веб-браузере без использования плагинов.
WebGL исполняется как элемент HTML5 и поэтому является полноценной частью объектной модели документа (DOM API) браузера.
API построена OpenGL ES, который в свою очередь представляет собой спецификацию, определяющую платформонезависимый программный интерфейс для написания приложений, использующих двухмерную и трехмерную графику (оф. документация). Примечательно, что разработкой OpenGL ES так же занималась Khronos Group.
Имеет две версии:
Технология получила широкое распостранение благодаря тому, что может использоваться с любым языком программирования, который работает с DOM API:
Three.js является легковесной кроссплатформенной JavaScript библиотекой, построенной поверх WebGl.
Основная цель проекта - создание простой в использовании, легкой и кросс-браузерной 3D-библиотеки общего назначения.
Официальный сайт располагает интерактивной песочницей, предоставляющей возможность попробовать функционал.
Библиотека оперирует следующими элементами:
К примеру, код по созданию куба выглядит следующим образом (без учета текстуры, камеры, освещения и рендерера):
const width = 8; // ui: width
const height = 8; // ui: height
const depth = 8; // ui: depth
const geometry = new THREE.BoxGeometry(width, height, depth);
Для интеграции с Angular существует отдельная библиотека atft (github), а для рендеринга в Vue - vue-gl (github).
Three.js изобилует большим количеством примеров. Одним из самых известным является та самая планета на главной странице GitHub.
Babylon.js - Легковесный кроссбраузерный JavaScript-фреймворк, использующий API WebGL для отображения 2D и 3D-графики в браузере без использования каких-либо сторонних плагинов и дополнений.
В число возможностей фреймворка входит:
В ряде некоторых проектов Babylon.js можно сочетаь c Cannon.js (речь о котором пойдет далее).
Для сравнения с Three.js, в Babylon.js код по созданию куба выглядит следующим образом
const box = BABYLON.MeshBuilder.CreateBox("box", {});
Примеры работ:
Cannon.js - легковесный 3D физический движок JavaScript с открытым исходным кодом. Главным его преимуществом является хорошая симуляция физики и столкновения частиц. Сама идея проекта вдохновлена такими библиотеками Three.js и ammo.js.
Движок твердого тела включает в себя простое обнаружение столкновений, различные формы тел, контакты, трение и т.д.. Cannon.js написан на JavaScript и может использоваться с любым движком рендеринга или игровым движком, который поддерживает браузеры. Как было упомянуто ранее, данный движок неплохо сочетается с Three.js и Babylon.js.
Отойдем от уже привычного примера создания куба, и создадим МИР:
const world = new CANNON.World();
world.gravity.set(0,0,-9.82);
Собственно, каждое Cannon.js приложение на самом деле именно с этого и начинается - с создания мира. CANNON.World - это физический центр управления объектами и симуляциями. Процесс работы с движком отмечается своей простотой.
Cannon.js не является единственным возможным движком, который можно использовать при написании JavaScript. В число его аналогов входят таких движки как Ammo.js и Oimo.js.
Демо работы Cannon.js:
Правда большинство встреченных работ страдают отсутствием корректного освещения в следствие того что Cannon.js не занимается вопросами освещения. Чаще всего на себя эту ответственность берет либо Three.js, либо Babylon.js, либо любая другая библиотека, которая идет в связке с движком. Примечательно, что каждый цикл отрисовки придется вручную перемещать соответствующий объект на сцене на место расположения физического объекта.
К сожалению, на сегодняшний день движок не развивается и последний раз обновлялся 3 мая 2016 года. Ссылки на документацию и примеры из официального сайта сломаны (однако их все еще можно найти в интернете). В виду этого, возможно, очень скоро (а возможно даже уже) использование библиотеки на проектах будет под вопросом.
Так же известен под названием ammonext. Еще один движок для реализации физики. Является портом Bullet physics engine на JavaScript. Соответственно, исходный код библиотеки написан на С++. В связи с этим возникают некоторые трудности использования - например, указатели добавляют дополнительный уровень сложность. Однако мест, которые затронуты подобными проблемами не так много.
Функционал библиотеки достаточно обширен. Сюда входит и непрерывное обнаружение столкновений, ограничения, мощную систему транспортных средств и множество способов точной настройки сцены. Как и в случае с Cannon.js, для работы с ним потребуется отдельная библиотека для визуализации. И так же необходимо синхронизировать каждый цикл перерисовки объекта на сцене с его физической моделью.
Явно хорошим качеством является то, что библиотека продолжает развиваться и по сей день. В некоторых случаях API запутано и документация не дает ответы на все вопросы.
Bullet Physics Library - физический движок, который поддерживает обнаружение 3D- столкновений , моделирование физики твердого тела и моделирование неупругой физики с деформациями. Он используется при разработке компьютерных игр и для создания визуальных эффектов в фильмах. (github)
Способ создания физических объектов может выглядеть затянуто, однако ammo.js позволяет выполнять детальную настройку. К сожалению, из всего перечня возможной 3D функциональности, библиотека не поддерживает события столкновений. Чтобы найти и обработать коллизии, придется получить список объектов и преобразовать их.
Общее ревью по библиотеке:
Небольшие демо с документации:
Oimo.js — 3D физический движок для JavaScript. В сравнении с другими решениями, обладает очень хорошей производительностью и точностью, однако поддерживает только примитивную геометрию.
Примечательно, что движок включен в состав Babylon.js.
Большим минусом движка является не очень качественная документация.
Демо примеры с официального сайта:
Cesium.js - представляет собой JavaScript библиотеку для создания 3D-глобусов и 2D-карт. Он использует WebGL для графики с аппаратным ускорением, является кроссбраузерным и настроенным для визуализации динамических данных.
В базовый функционал входит
Примеры работ (больше на официальном сайте):
Deck.gl представляет собой еще одну библиотеку для отображения 2D и 3D карт. Предназначение - упрощение визуального восприятия картографических данных на основе WebGL.
Deck.gl отображает данные (обычно массив объектов в JSON) в стек визуальных слоев - например иконки, полигоны, тексты. Библиотека решает ряд задач:
Демо:
Lume - активно развивающаяся библиотека, призванная упростить создание насыщенных и интерактивных 2D и 3D приложений.
Библиотека состоит из:
Демо c официального сайта:
Работает на всех браузерах, поддерживающих HTML5.