Городской портал города Оленегорск


Написание приложений дополненной реальности с использованием JSARToolKit

  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. Покажите маркер на камеру, и он поместит фотографию на нее. Переместите маркер из поля зрения камеры и покажите его снова, и изображение изменилось.

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%, правильно ли я делаю это в своей демоверсии, поэтому, пожалуйста, дайте мне знать, если вы знаете лучший способ добиться интеграции. Патчи приветствуются :)

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

Похожие

Тематизация веб-формы в Drupal 7
Онлайн-формы являются одним из наиболее распространенных методов сбора значимой информации и связи с клиентами и потенциальными клиентами на вашем веб-сайте. В Drupal 7 всегда есть необходимость добавить пользовательские темы или функциональность к вашим веб-формам, и мы рассмотрим несколько различных вариантов, которые позволят вам настраивать веб-форму по своему желанию. Варианты тематики, описанные в этом блоге: Тематические элементы через пользовательский интерфейс
bingmaps
... кциональности по обнаружению ошибок в вашей IDE"> Это официальные определения
SQLcl: новый претендент на корону SQL Plus
Я тот сварливый старик, который приходит на твою вечеринку и сидит в углу с лицом, похожим на собачью заднюю часть. Вы знаете, тот парень, который ненавидит все новое: Адель? Она не Уитни Хьюстон! Блю рей? Это не так хорошо, как Betamax! ЖАБА? Это не так хорошо, как SQL Plus! Я преувеличиваю - но только немного. Если в вашу работу не входит запуск большого количества сценариев sql или вы застряли на каком-либо серверном терминале,
Справка
Выберите в тексте, чтобы перейти к соответствующему экрана настроек. Устройство можно подключать к телевизору через беспроводную связь без применения беспроводного маршрутизатора. При этом вы сможете осуществлять потоковую передачу видео, фотографий и музыки с устройства непосредственно на телевизор.
Как создать визуализацию дорожной карты продукта
Человек мозговые процессы визуальные эффекты в 60 000 раз быстрее, чем текст. Тем не менее, многие команды разработчиков продолжают работать и общаться с помощью разрозненных текстовых программ, таких как электронные таблицы, вики и письменные отчеты на собрании за собранием за собранием. В быстро меняющемся мире гибкой разработки пробелы в коммуникациях и задержки могут стать причиной дорогостоящих отстой и
Как добавить карты в проекты Django Web App с помощью Mapbox
Создание интерактивных карт в Джанго веб-приложение может показаться пугающим, если вы не знаете, с чего начать, но это проще, чем вы думаете, если вы используете инструмент разработчика, такой как MapBox , В этой статье мы создадим простой проект Django с одним приложением и добавим интерактивную карту, подобную той, которую вы видите ниже, на веб-страницу, которую Django отображает
Стоп! Почему ваше видео вступление НЕ должно начинаться с логотипа
... ключительно по их логотипу… Under Armour, Dairy Queen, Facebook. И да, я знаю, что у многих компаний есть руководящие принципы бренда, согласно которым их логотипы должны быть размещены в начале видео. Так что то, что я собираюсь сказать, может быть непопулярным среди профессионалов в области маркетинга. На самом деле, я собираюсь быть совершенно спорным. Я не хочу унижать кого-либо или любую компанию. Я никого не выделяю. Здесь это идет: Не начинайте видео с вашего логотипа
Этот документ является частью руководства Лучшие практики непрерывной интеграции (CI) с SAP , Чтобы все п...
Этот документ является частью руководства Лучшие практики непрерывной интеграции (CI) с SAP , Чтобы все примеры работали должным образом, убедитесь, что вы выполнили инструкции по установке для всех компонентов, перечисленных в поле «Предварительные условия». Для разработки классической модели (XSC) SAP HANA Extended Application Services (XS) вы можете использовать либо SAP HANA Studio, либо инструментальные
Samsung Galaxy S8
Samsung задает темп для мощности смартфона в 2017 году с Galaxy S8 ($ 750 в тесте). Это лучшее Телефон практически во всем, что бы он ни делал, будь то подключение к Интернету, звонки, игры, фотосъемка
HTML
PhpStorm обеспечивает мощную поддержку HTML, которая включает подсветку синтаксиса и ошибок, форматирование в соответствии со стилем кода, проверку структуры, завершение кода, предварительный просмотр на лету во время сеанса отладки ( Live Edit ), и многое другое. Спецификация HTML настраивается с помощью предпочтения Уровень языка HTML по умолчанию на странице настроек PhpStorm (Ctrl + Alt + S). По умолчанию предполагается
Цель Директивы ЕС по аккумуляторов - минимизировать влияние аккумуляторов на окружающую среду и поощрять перер...
Цель Директивы ЕС по аккумуляторов - минимизировать влияние аккумуляторов на окружающую среду и поощрять переработку материалов, которые они содержат. В Великобритании нормативные требования по переработке аккумуляторов (аккумуляторных батарей) были представлены в 2009 г. Цель нормативных требований по отработанных аккумуляторов - значительно увеличить сбор и утилизацию использованных переносных аккумуляторов в Великобритании с 3% в 2007 году до 25% в 2012 г. с последующим увеличением до

Комментарии

Почему бы не создать папку для группировки похожих приложений?
Почему бы не создать папку для группировки похожих приложений? Это намного проще, чем вы думаете. Нажмите и удерживайте любой значок, пока значки не начнут покачиваться. Перетащите значок поверх другого. Затем система автоматически создает именованную папку с двумя значками, расположенными под ней. Перетащите больше похожих приложений в папку, когда это необходимо.
Или в другом месте нет доступа в интернет?
Или в другом месте нет доступа в интернет? Ведь Reader требует активного подключения. К счастью, существует множество программ, которые позволяют читать RSS-каналы в автономном режиме. Я неравнодушен к

Вы знаете, тот парень, который ненавидит все новое: Адель?
Блю рей?
ЖАБА?
Почему бы не создать папку для группировки похожих приложений?
Или в другом месте нет доступа в интернет?
Или в другом месте нет доступа в интернет?

Новости

Рыбалка в Териберке
На марте туда пожалуй под закрытие дороги, становилось снять номер в мотельчике на Очередном шоссе. Галопом вылетели из строя, успели как раз к слову движения колонны. С уловкой в общем било, один-единственный

Футболка рыбалка
Главная   /  Мой блог ← Футболки логотипом armin van buuren   |  В начало  |  Футболка the pirate bay → Качественные футболка рыбалка |

Клевое место рыбалка
Мы предлагаем рыбалку и отдых в уникальном месте Москвы, национальном парке "Лосиный остров"! Нижний пруд Очищенная береговая территория идеально подходит для ловли на удочку, штекер и удобного

Светлые горы рыбалка
«Светлые горы» в Подмосковье - одно из мест, где москвичи, да и гости, могут провести время в свое удовольствие и одновременно с пользой. База расположена неподалеку от столицы. Не нужно далеко

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

Рыбалка в савельево
Ленинградское шоссе проходит по живописным местам. К ним относятся водные просторы в Карелии, живописные заводи в Завидово. Однако поехать туда, чтобы порыбачить, может не каждый. Это связано со значительной

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

Рыбалка в карелии
Республики Карелия находится в северо-западной части страны, климат довольно мягкий, с большим количеством осадков. Характерно, что зима вступает в свои права рано, она, как правило, снежная, но без сильных

Русская рыбалка 3
Игра русская рыбалка 3 - это последняя официальная версия игры, в которой есть одиночный режим. За эту игру не надо платить никаких денег – она абсолютно бесплатна, просто скачиваете ее себе на компьютер

Триал русская рыбалка
триал русская рыбалка Уважаемые рыбаки и гости, фото отчёт за 31.08.2017 года, было произведено зарыбление водоема карпом, общим весом 700 кг, навеска 0.7-1 кг. Всем успехов.

                                                                                                                                               ОЛЕНЕГОРСК 2010 - 2014                                                                                                 

создание сайта - Старт Икс