1. Вступление
2. демонстрация
3. Настройка JSARToolKit
4. Использование getUserMedia для доступа к веб-камере
5. Обнаружение маркеров
6. Матричное отображение
7. Интеграция Three.js
8. Резюме

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

Вступление

Эта статья об использовании JSARToolKit библиотека с WebRTC API getUserMedia для создания приложений дополненной реальности в Интернете. Для рендеринга я использую WebGL из-за повышенной производительности, которую он предлагает. Конечным результатом этой статьи является демонстрационное приложение, которое помещает 3D-модель поверх маркера дополненной реальности в видео с веб-камеры.

JSARToolKit - это библиотека дополненной реальности для JavaScript. Это библиотека с открытым исходным кодом, выпущенная под лицензией GPL и прямым портом Flash FLARToolKit что я сделал для Mozilla Демо ремикс Reality , FLARToolKit сам по себе является портом Java NyARToolKit , который является портом C ARToolKit , Долгий путь, но мы здесь.

JSARToolKit работает с элементами canvas. Поскольку необходимо прочитать изображение с холста, оно должно происходить из того же источника, что и страница, или использовать CORS обойти политику того же происхождения. В двух словах, установите свойство crossOrigin для элемента изображения или видео, которое вы хотите использовать в качестве текстуры, на «» или «анонимно».

Когда вы передаете холст в JSARToolKit для анализа, JSARToolKit возвращает список маркеров AR, найденных на изображении, и соответствующие матрицы преобразования. Чтобы нарисовать 3D-объект поверх маркера, вы передаете матрицу преобразования в любую используемую вами библиотеку 3D-рендеринга, чтобы ваш объект был преобразован с использованием матрицы. Затем нарисуйте видеокадр в вашей сцене WebGL и нарисуйте объект поверх этого, и все готово.

Чтобы проанализировать видео с помощью JSARToolKit, нарисуйте видео на холсте, а затем передайте холст JSARToolKit. Сделайте это для каждого кадра, и у вас есть видео отслеживание AR. JSARToolKit достаточно быстр на современных движках JavaScript, чтобы делать это в реальном времени даже на видеокадрах 640x480. Однако чем больше видеокадр, тем дольше он обрабатывается. Хороший размер видеокадра составляет 320x240, но если вы планируете использовать маленькие маркеры или несколько маркеров, предпочтительнее 640x480.

демонстрация

Для просмотра демо-версии веб-камеры в вашем браузере должен быть включен WebRTC (в Chrome перейдите в раздел about: flags и включите MediaStream). Вам также необходимо распечатать маркер AR ниже. Вы также можете попробовать открыть изображение маркера на телефоне или планшете и показать его веб-камере.

AR маркер.

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

(если у вас нет WebRTC, вот версия с предварительно консервированным видео )

Настройка JSARToolKit

API-интерфейс JSARToolKit очень похож на Java, поэтому для его использования вам придется сделать некоторые искажения. Основная идея заключается в том, что у вас есть объект-детектор, который работает с растровым объектом. Между детектором и растром находится объект параметров камеры, который преобразует растровые координаты в координаты камеры. Чтобы получить обнаруженные маркеры от детектора, вы перебираете их и копируете их матрицы преобразования в свой код.

Первым шагом является создание растрового объекта, объекта параметров камеры и объекта детектора.

// Создаем растровый объект RGB для 2D холста. // JSARToolKit использует растровые объекты для чтения данных изображения. // Обратите внимание, что вам нужно установить canvas.changed = true для каждого кадра. var raster = new NyARRgbRaster_Canvas2D (canvas); // FLARParam - это то, что используется FLARToolKit для установки параметров камеры. // Здесь мы создаем FLARParam для изображений с размерами 320x240 пикселей. var param = новый FLARParam (320, 240); // FLARMultiIdMarkerDetector является фактическим механизмом обнаружения для обнаружения маркера. // Он обнаруживает несколько ID-маркеров. Идентификационные маркеры - это специальные маркеры, которые кодируют число. переменный детектор = новый FLARMultiIdMarkerDetector (параметр, 120); // Для отслеживания видео установите режим продолжения в true. В режиме продолжения детектор // отслеживает маркеры в нескольких кадрах. detector.setContinueMode (истина); // Скопируйте матрицу перспективы камеры из FLARParam в матрицу камеры библиотеки WebGL. // Второй и третий параметры определяют плоскости zNear и zFar для матрицы перспективы. param.copyCameraMatrix (display.camera.perspectiveMatrix, 10, 10000);

Использование getUserMedia для доступа к веб-камере

Далее я собираюсь создать элемент видео, который получает видео с веб-камеры через API WebRTC. Для предварительно записанных видео просто установите в качестве атрибута источника видео URL-адрес видео. Если вы определяете маркер по неподвижным изображениям, вы можете использовать элемент изображения почти таким же образом.

Поскольку WebRTC и getUserMedia по-прежнему являются новыми развивающимися технологиями, вам необходимо использовать функцию их обнаружения. Для более подробной информации, ознакомьтесь со статьей Эрика Бидельмана на Захват аудио и видео в HTML5 ,

var video = document.createElement ('video'); video.width = 320; video.height = 240; var getUserMedia = function (t, onsuccess, onerror) {if (navigator.getUserMedia) {return navigator.getUserMedia (t, onsuccess, onerror); } else if (navigator.webkitGetUserMedia) {return navigator.webkitGetUserMedia (t, onsuccess, onerror); } else if (navigator.mozGetUserMedia) {return navigator.mozGetUserMedia (t, onsuccess, onerror); } else if (navigator.msGetUserMedia) {return navigator.msGetUserMedia (t, onsuccess, onerror); } else {onerror (new Error ("Не найдена реализация getUserMedia.")); }}; var URL = window.URL || window.webkitURL; var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL; if (! createObjectURL) {throw new Error ("URL.createObjectURL not found."); } getUserMedia ({'video': true}, функция (поток) {var url = createObjectURL (поток); video.src = url;}, функция (ошибка) {alert ("Не удалось получить доступ к веб-камере.");} );

Обнаружение маркеров

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

// Рисуем видеокадр на растровом холсте, масштабируемом до 320x240. canvas.getContext ('2d'). drawImage (video, 0, 0, 320, 240); // Сообщаем растровому объекту, что базовый холст изменился. canvas.changed = true; // Обнаружение маркера с использованием объекта детектора на растровом объекте. // Параметр threshold определяет пороговое значение // для преобразования видеокадра в 1-битное черно-белое изображение. // var markerCount = Detector.detectMarkerLite (растр, порог);

Последний шаг - перебрать обнаруженные маркеры и получить их матрицы преобразования. Вы используете матрицы преобразования для размещения 3D-объектов поверх маркеров.

// Создать объект NyARTransMatResult для получения матриц перевода маркера. var resultMat = new NyARTransMatResult (); маркеры var = {}; // Пройдите через обнаруженные маркеры и получите их идентификаторы и матрицы преобразования. for (var idx = 0; idx <markerCount; idx ++) {// Получить данные идентификатора маркера для текущего маркера. // Идентификационные маркеры - это особый вид маркеров, которые кодируют число. // Байты для числа находятся в данных маркера ID. var id = Detector.getIdMarkerData (idx); // Чтение байтов из пакета id. var currId = -1; // Этот код обрабатывает только 32-битные числа или короче. if (id.packetLength

Матричное отображение

Вот код для копирования матриц JSARToolKit в матрицы glMatrix (которые состоят из 16 элементов) FloatArrays с колонкой перевода в последних четырех элементах). Он работает по волшебству (читай: я не знаю, как настраиваются матрицы ARToolKit. Моя догадка - инвертированная ось Y). В любом случае, этот бит вуду с обратным знаком делает матрицу JSARToolKit работать так же, как glMatrix.
Чтобы использовать библиотеку с другой библиотекой, такой как Three.js, вам нужно написать функцию, которая преобразует матрицы ARToolKit в матричный формат библиотеки. Вам также необходимо подключиться к методу FLARParam.copyCameraMatrix. Метод copyCameraMatrix записывает матрицу перспективы FLARParam в матрицу в стиле glMatrix. function copyMarkerMatrix (arMat, glMat) {glMat [0] = arMat.m00; glMat [1] = -arMat.m10; glMat [2] = arMat.m20; glMat [3] = 0; glMat [4] = arMat.m01; glMat [5] = -arMat.m11; glMat [6] = arMat.m21; glMat [7] = 0; glMat [8] = -arMat.m02; glMat [9] = arMat.m12; glMat [10] = -arMat.m22; glMat [11] = 0; glMat [12] = arMat.m03; glMat [13] = -arMat.m13; glMat [14] = arMat.m23; glMat [15] = 1; }

Интеграция Three.js

Three.js - популярный движок JavaScript 3D. Я собираюсь рассказать, как использовать вывод JSARToolKit в Three.js. Вам понадобятся три вещи: полноэкранный квад с нарисованным на нем видеоизображением, камера с перспективной матрицей FLARParam и объект с маркерной матрицей в качестве преобразования. Я проведу вас через интеграцию в коде ниже.
Вот ссылка на демоверсию Three.js В бою. Он имеет отладочный вывод, поэтому вы можете увидеть некоторые внутренние механизмы работы библиотеки JSARToolKit. // Я собираюсь использовать матрицу в стиле glMatrix в качестве посредника. // Итак, первый шаг - создать функцию для преобразования матрицы glMatrix в матрицу Three.js Matrix4. THREE.Matrix4.prototype.setFromArray = function (m) {вернуть this.set (m [0], m [4], m [8], m [12], m [1], m [5], m [ 9], м [13], м [2], м [6], м [10], м [14], м [3], м [7], м [11], м [15]); }; // матрицы glMatrix - это плоские массивы. var tmp = new Float32Array (16); // Создать камеру и корневой объект маркера для вашей сцены Three.js. var camera = new THREE.Camera (); scene.add (камера); var markerRoot = new THREE.Object3D (); markerRoot.matrixAutoUpdate = false; // Добавляем модели маркеров и тому подобное в корневой объект вашего маркера. var cube = new THREE.Mesh (новый THREE.CubeGeometry (100,100,100), новый THREE.MeshBasicMaterial ({color: 0xff00ff})); cube.position.z = -50; markerRoot.add (куб); // Добавить корень маркера на вашу сцену. scene.add (markerRoot); // Далее нам нужно заставить камеру Three.js использовать матрицу FLARParam. param.copyCameraMatrix (tmp, 10, 10000); camera.projectionMatrix.setFromArray (TMP); // Для отображения видео сначала создайте текстуру из него. var videoTex = new THREE.Texture (videoCanvas); // Затем создаем плоскость, текстурированную с помощью видео. var plane = new THREE.Mesh (новая THREE.PlaneGeometry (2, 2, 0), новая THREE.MeshBasicMaterial ({map: videoTex})); // Видеоплоскость не должна заботиться о z-буфере. plane.material.depthTest = false; plane.material.depthWrite = false; // Создаем камеру и сцену для видеоплоскости и // добавляем камеру и видеоплоскость к сцене. var videoCam = new THREE.Camera (); var videoScene = new THREE.Scene (); videoScene.add (плоскость); videoScene.add (VideoCAM); ... // На каждом кадре выполните следующее: function tick () {// Нарисуйте видеокадр на холсте. videoCanvas.getContext ('2d'). drawImage (video, 0, 0); canvas.getContext ('2d'). drawImage (videoCanvas, 0, 0, canvas.width, canvas.height); // Сообщаем JSARToolKit, что холст изменился. canvas.changed = true; // Обновляем текстуру видео. videoTex.needsUpdate = true; // Обнаружение маркеров в видеокадре. var markerCount = Detector.detectMarkerLite (растр, порог); for (var i = 0; i <markerCount; i ++) {// Получить матрицу маркеров в матрицу результатов. detector.getTransformMatrix (i, resultMat); // Копируем матрицу маркера в матрицу tmp. copyMarkerMatrix (resultMat, tmp); // Скопируйте матрицу маркера в корневой объект вашего маркера. markerRoot.matrix.setFromArray (TMP); } // Визуализация сцены. renderer.autoClear = false; renderer.clear (); renderer.render (videoScene, videoCam); renderer.render (сцена, камера); }

Резюме

В этой статье мы рассмотрели основы JSARToolKit. Теперь вы готовы создавать свои собственные приложения с дополненной реальностью для веб-камеры с помощью JavaScript.
Интеграция JSARToolKit с Three.js немного хлопотна, но, безусловно, возможна. Я не уверен на 100%, правильно ли я делаю это в своей демоверсии, поэтому, пожалуйста, дайте мне знать, если вы знаете лучший способ добиться интеграции. Патчи приветствуются :)

Рекомендации

Похожие

Комментарии