Створення додатків доповненої реальності за допомогою JSARToolKit

This article discusses APIs that are not yet fully standardized and still in flux. Be cautious when using experimental APIs in your own projects.

Вступ

У цій статті розглядається використання бібліотеки JSARToolKit з WebRTC API getUserMedia для створення веб-додатків доповненої реальності. Для обробки я використовую технологію WebGL через її високу ефективність. Кінцевим результатом є створення демонстраційної програми, яка розміщує тривимірну модель на маркері доповненої реальності в відео, що знімається веб-камерою.

JSARToolKit - це бібліотека доповненої реальності для мови JavaScript з відкритим початковим кодом, випущена за ліцензією GPL в вигляді безпосереднього порту Flash-пакета FLARToolKit . Вона була створена мною для демонстраційної програми Remixing Reality для браузера Mozilla. Сама бібліотека FLARToolKit є портом Java-пакета NyARToolKit , Який, в свою чергу, являє собою порт бібліотеки ARToolKit , Написаної на мові C. Така структура може здатися складною, але тепер ми можемо перейти до головного.

JSARToolKit працює з елементами canvas. Оскільки бібліотеці потрібно вважати зображення з об'єкта canvas, воно повинно знаходитися там же, де і сторінка, або використовувати специфікацію CORS , Щоб забезпечити відповідність політиці єдиного домену. У загальних рисах необхідно встановити для властивості crossOrigin елемента зображення або відео, що використовується в якості текстури, значення '' або 'anonymous'.

Коли елемент canvas передається на аналіз в бібліотеку JSARToolKit, вона повертає список маркерів доповненої реальності, знайдених в зображенні, а також відповідних матриць перетворення. Щоб намалювати об'єкт поверх маркера, необхідно передати матрицю перетворення в будь-яку бібліотеку, яка використовується для обробки тривимірних моделей, щоб з її допомогою трансформувати обраний об'єкт. Потім досить намалювати видеокадр в сцені WebGL і розташувати об'єкт поверх нього.

Щоб проаналізувати відео з використанням бібліотеки JSARToolKit, перемістіть відео на елемент canvas, а потім передайте canvas в JSARToolKit. Виконуючи ці операції для кожного кадру, можна реалізувати відстеження доповненої реальності в відео. Бібліотека JSARToolKit на сучасних платформах JavaScript працює досить швидко для того, щоб виконувати згадані операції в режимі реального часу навіть для відеокадрів з роздільною здатністю 640 x 480. Однак чим більше дозвіл кадру, тим довше виконується його обробка. Оптимальним вирішенням є 320 x 240, але якщо необхідно використовувати маленькі маркери або кілька маркерів, рекомендується встановити 640 x 480.

Демонстраційна програма

Щоб випробувати в дії демонстраційну програму для веб-камери, необхідно включити WebRTC в браузері (в Chrome відкрийте сторінку about: flags і увімкнітьАрхів MediaStream). Крім того, необхідно роздрукувати вказаний нижче маркер доповненої реальності. Також ви можете відкрити зображення маркера на телефоні або планшетному ПК і вивести його на веб-камеру.

Маркер доповненої реальності

Ось наша демонстраційна програма. Вона створює із зображень слайд-шоу за допомогою маркерів доповненої реальності. Виведіть маркер на веб-камеру, і програма розмістить на ньому фотографію. Приберіть маркер за кордону огляду камери і виведіть його знову, і зображення зміниться.

(Якщо ви не користуєтеся WebRTC, тут можна знайти версію з готовим відео )

Налаштування бібліотеки JSARToolKit

API JSARToolKit аналогічний API Java. Для його використання необхідно внести лише деякі зміни. Основна ідея полягає в використанні об'єкта детектора, що виконує дії над об'єктом растрового зображення. Об'єкт параметрів камери, що з'єднує детектор і растр, перетворює координати растрового зображення в координати камери. Для отримання з детектора виявлених маркерів необхідно послідовно обробити їх і скопіювати матриці перетворення маркерів в свій код.

Першим етапом є створення реєстрового об'єкта, об'єкта параметрів камери і об'єкта детектора.

// Create a RGB raster object for the 2D canvas. // JSARToolKit uses raster objects to read image data. // Note that you need to set canvas.changed = true on every frame. var raster = new NyARRgbRaster_Canvas2D (canvas); // FLARParam is the thing used by FLARToolKit to set camera parameters. // Here we create a FLARParam for images with 320x240 pixel dimensions. var param = new FLARParam (320, 240); // The FLARMultiIdMarkerDetector is the actual detection engine for marker detection. // It detects multiple ID markers. ID markers are special markers that encode a number. var detector = new FLARMultiIdMarkerDetector (param, 120); // For tracking video set continue mode to true. In continue mode, the detector // tracks markers across multiple frames. detector.setContinueMode (true); // Copy the camera perspective matrix from the FLARParam to the WebGL library camera matrix. // The second and third parameters determine the zNear and zFar planes for the perspective matrix. param.copyCameraMatrix (display.camera.perspectiveMatrix, 10, 10000);

Використання getUserMedia для доступу до веб-камері

Далі я створю елемент відео, який звертається до зображення з веб-камери через API WebRTC. Для готових відеофрагментів досить налаштувати атрибут відео відповідно до URL відео. Якщо виявлення маркерів виконується на нерухомих кадрах, можна таким же чином використовувати елемент зображення.

Оскільки технології WebRTC і getUserMedia постійно розвиваються, необхідно визначити підтримуваний ними в даний момент опцій. Додаткові відомості можна знайти в статті Еріка Бідельмана (Eric Bidelman) Запис звуку і відео в 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 ( "No getUserMedia implementation found.")); }}; var URL = window.URL || window.webkitURL; var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL; if (! createObjectURL) {throw new Error ( "URL.createObjectURL not found."); } GetUserMedia ({ 'video': true}, function (stream) {var url = createObjectURL (stream); video.src = url;}, function (error) {alert ( "Could not access webcam.");} );

виявлення маркерів

Як тільки детектор буде нормально працювати, можна починати завантаження зображень для виявлення матриць доповненої реальності. Спочатку перенесіть зображення на елемент canvas реєстрового об'єкта, а потім запустіть для нього детектор. Детектор поверне число маркерів, знайдених в зображенні.

// Draw the video frame to the raster canvas, scaled to 320x240. canvas.getContext ( '2d'). drawImage (video, 0, 0, 320, 240); // Tell the raster object that the underlying canvas has changed. canvas.changed = true; // Do marker detection by using the detector object on the raster object. // The threshold parameter determines the threshold value // for turning the video frame into a 1-bit black-and-white image. // var markerCount = detector.detectMarkerLite (raster, threshold);

Останнім етапом є їх послідовна обробка та отримання матриць перетворення. Ці матриці використовуються для накладання тривимірних об'єктів на маркери.

// Create a NyARTransMatResult object for getting the marker translation matrices. var resultMat = new NyARTransMatResult (); var markers = {}; // Go through the detected markers and get their IDs and transformation matrices. for (var idx = 0; idx <markerCount; idx ++) {// Get the ID marker data for the current marker. // ID markers are special kind of markers that encode a number. // The bytes for the number are in the ID marker data. var id = detector.getIdMarkerData (idx); // Read bytes from the id packet. var currId = -1; // This code handles only 32-bit numbers or shorter. if (id.packetLength

зіставлення матриць

Нижче наведено приклад коду для копіювання матриць JSARToolKit в матриці glMatrix (які є плаваючими масивами , Що складаються з 16 елементів, зі стовпцем перекладу в останніх чотирьох елементах). Я не можу детально описати принцип роботи матриць ARToolKit (припускаю, що використовується інвертована вісь Y). Так чи інакше, за рахунок инвертирования знака матриці JSARToolKit працюють так само, як і об'єкти glMatrix.
Щоб використовувати цю бібліотеку разом з іншою (наприклад, Three.js), необхідно написати функцію, що перетворює матриці ARToolKit в відповідний формат. Також буде потрібно виконати перехоплення методу FLARParam.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. Зараз ми дізнаємося, як використовувати в ній вихідні дані JSARToolKit. Для цього необхідні три об'єкти: повноекранна структура з чотирьох елементів з розташованим на ній зображенням, камера з матрицею перспективи FLARParam і об'єкт з матрицею маркера в якості результату перетворення. Ми виконаємо інтеграцію в наведеному нижче коді.
тут розташована посилання на діючу демонстраційну версію Three.js . В неї включений висновок налагоджувальних даних, що дозволяє спостерігати за виконанням деяких внутрішніх операцій бібліотеки JSARToolKit. // I'm going to use a glMatrix-style matrix as an intermediary. // So the first step is to create a function to convert a glMatrix matrix into a Three.js Matrix4. THREE.Matrix4.prototype.setFromArray = function (m) {return this.set (m [0], m [4], m [8], m [12], m [1], m [5], m [ 9], m [13], m [2], m [6], m [10], m [14], m [3], m [7], m [11], m [15]); }; // glMatrix matrices are flat arrays. var tmp = new Float32Array (16); // Create a camera and a marker root object for your Three.js scene. var camera = new THREE.Camera (); scene.add (camera); var markerRoot = new THREE.Object3D (); markerRoot.matrixAutoUpdate = false; // Add the marker models and suchlike into your marker root object. var cube = new THREE.Mesh (new THREE.CubeGeometry (100,100,100), new THREE.MeshBasicMaterial ({color: 0xff00ff})); cube.position.z = -50; markerRoot.add (cube); // Add the marker root to your scene. scene.add (markerRoot); // Next we need to make the Three.js camera use the FLARParam matrix. param.copyCameraMatrix (tmp, 10, 10000); camera.projectionMatrix.setFromArray (tmp); // To display the video, first create a texture from it. var videoTex = new THREE.Texture (videoCanvas); // Then create a plane textured with the video. var plane = new THREE.Mesh (new THREE.PlaneGeometry (2, 2, 0), new THREE.MeshBasicMaterial ({map: videoTex})); // The video plane should not care about the z-buffer. plane.material.depthTest = false; plane.material.depthWrite = false; // Create a camera and a scene for the video plane and // add the camera and the video plane to the scene. var videoCam = new THREE.Camera (); var videoScene = new THREE.Scene (); videoScene.add (plane); videoScene.add (videoCam); ... // On every frame do the following: function tick () {// Draw the video frame to the canvas. videoCanvas.getContext ( '2d'). drawImage (video, 0, 0); canvas.getContext ( '2d'). drawImage (videoCanvas, 0, 0, canvas.width, canvas.height); // Tell JSARToolKit that the canvas has changed. canvas.changed = true; // Update the video texture. videoTex.needsUpdate = true; // Detect the markers in the video frame. var markerCount = detector.detectMarkerLite (raster, threshold); for (var i = 0; i <markerCount; i ++) {// Get the marker matrix into the result matrix. detector.getTransformMatrix (i, resultMat); // Copy the marker matrix to the tmp matrix. copyMarkerMatrix (resultMat, tmp); // Copy the marker matrix over to your marker root object. markerRoot.matrix.setFromArray (tmp); } // Render the scene. renderer.autoClear = false; renderer.clear (); renderer.render (videoScene, videoCam); renderer.render (scene, camera); }

висновок

У цій статті розглядаються основні функції бібліотеки JSARToolKit. Тепер ви готові до створення власних JavaScript-програм доповненої реальності, що використовують веб-камеру.
Інтеграція JSARToolKit з Three.js - завдання непросте, але цілком здійсненна. Я не впевнений, що моя демонстраційна програма оптимальна, тому із задоволенням ознайомлюсь з більш ефективними способами інтеграції. Виправлення вітаються!

посилання