NFT Natural Feature Tracking con jsartoolkit5

La nuova versione di Jsartoolkit5 con NFT

NFT ovvero la Natural Feature Tracking

La tecnologia NFT ( Natural Feature Tracking ) è una nuova opzione tecnologica disponibile nel progetto open source Jsartoolkit5 . Si tratta di una tecnologia Markerless che permette il tracciamento di qualsiasi immagine ( o quasi ) a dispetto della tecnologia con Marker che prevede o l’uso solo di Pattern geometrici bianco/neri ( ma si possono usare anche colorati purché mono colore e molto contrastati ) o Barcode cioè una matrice di valori binari in forma di quadrati nero o bianchi. Entrambi Barcode o Pattern, nel progetto Artoolkit5, devono necessariamente essere circondati da una cornice scura (meglio se nera) , ed è possibile persino decidere lo spessore di questa cornice, ma comunque il marker deve essere per forza di forma quadrata. Le tecnologie Markerless invece lasciano più libertà per le applicazioni di Realtà Aumentata.

Che cosè la tecnologia NFT markerless

Il termine Markerless abbraccia un ampio spettro di possibilità, non solo riguarda il tracciamento in tempo reale di immagini, ma anche il posizionamento di modelli 3d su superfici reali provenienti da un flusso video oppure il posizionamento di modelli 3d tramite il sistema di coordinate GPS. In questo breve articolo, però, si parlerà solo della tecnologia Markerless NFT implementata nel cuore di Jsartoolkit5. Questo tipo di tecnologia riconosce determinate immagini a seguito di un pre-training. Bisogna estrarre quelli che vengono chiamati i features points e conservare questi dati per successivamente confrontarli con l’immagine da tracciare. Questo processo si esegue con una specifica applicazione software; è possibile creare una applicazione standalone scaricando e compilando il codice sorgente ma noi consigliamo di usare la nuova applicazione web NFT-Marker-Creator sviluppata da Daniel Fernandes oppure la utility da linea di comando che potete trovare nella sua repository github. Il risultato finale è il data set costituito da 3 files con estensione .fset .iset .fset3, con questi sarà possibile impostare il successivo tracciamento dell’immagine.

Caratteristiche delle immagini per la NFT

Le immagini da usare con la tecnologia NFT devono possedere un ragionevole grado di dettaglio e di bordi taglienti ( un basso grado di auto-somiglianza e alta frequenza spaziale ), una buona risoluzione ed una forma rettangolare (in senso verticale od orizzontale). Come riferimento tenete conto della immagine che abbiamo usato per i test: la pinball.jpg (1637 x 2048 px)

invece non è molto adatta per la NFT l’immagine seguente:

L’immagine sopra non è l’ideale per la NFT poiché anche se dotata di una buona risoluzione è provvista di poca varianza il risultato sarà inferiore all’esempio di prima e di conseguenza l’applicazione farà fatica a tracciare l’immagine.

NFT nel cuore di Jsartoolkit5

Ho iniziato a lavorare su questo progetto perché avevo scoperto un ramo (branch) nft morto nella repository artoolkitx/jsartoolkit5. Il problema era che le prestazioni erano veramente scarse su desktop e ancora peggio su dispositivo mobile. Inoltre c’era nel branch master il supporto per WASM. Il mio sforzo quindi è stato di fare l’upgrade del branch NFT con la master che conteneva WASM. Compito non facile perché richiedeva una buona conoscenza della struttura del codice di Jsartoolkit5, una buona dimestichezza con Emscripten e conoscenza del linguaggio C/C++ e javascript, poiché Emscripten non fa che tradurre il codice C/C++ in linguaggio javascript utilizzabile poi successivamente in un browser od in una applicazione basata su Node.js. Devo dire che all’inizio non sapevo cosa stavo facendo e non ero sicuro del risultato. Ma ho cominciato a piccoli passi e a poca a poco abbiamo trovato una soluzione soddisfacente. Il fatto che mi ha più sorpreso è che gradualmente incominciarono ad interessarsi altre persone e questo mi permise di risolvere molti problemi inerenti al codice. Infatti è possibile usufruire della NFT grazie all’implementazione di un WebWorker questo permette di sgravare una parte del carico di lavoro dal thread principale con conseguente aumento in prestazioni e fps. Certamente se rapportato ad applicazioni basate su ARcore, 8thwall o Artivive non c’è confronto, ma siamo fiduciosi di poter fare degli ulteriori miglioramenti nel prossimo futuro.

Un esempio di codice con Jsartoolkit5 e la NFT

Qui di seguito vi mostro un frammento di codice come esempio per una semplice applicazione con la NFT. Come potete ben vedere é indispensabile inizializzare il video tramite una navigator.GetUserMedia e poi mediante un addEventListener iniettare il flusso video alla funzione start. Essa è il cuore principale della applicazione poiché gestisce il flusso di informazioni tra il WebWorker ed il Thread principale.

<div id="container">
    <video id="video"></video>
    <canvas style="position: absolute; left:0; top:0" id="canvas_draw"></canvas>
</div>
// main worker create the web worker see in the examples/nft_improved_worker for details
<script src="main_worker.js"></script>
<script>
var container = document.getElementById('container');
var video = document.getElementById('video');
var canvas_draw = document.getElementById('canvas_draw');

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    var hint = {};
    if (isMobile()) {
        hint = {
            facingMode: {"ideal": "environment"},
            audio: false,
            video: {
                width: {min: 240, max: 240},
                height: {min: 360, max: 360},
            },
        };
    }

    navigator.mediaDevices.getUserMedia({video: hint}).then(function (stream) {
        video.srcObject = stream;
        video.play();
        video.addEventListener("loadedmetadata", function() {
            start(container,
                  markers["pinball"],
                  video,
                  video.videoWidth,
                  video.videoHeight,
                  canvas_draw,
                  function() { statsMain.update() },
                  function() { statsWorker.update()) };
        });
    });
}
</script>

Noi abbiamo usato la libreria Three.js per il rendering 3d ma sicuramente si può usare anche un’altra libreria. Questa parte del codice è gestita dal file main_worker.js come potete vedere nell’esempio. Potete consultare il codice di main_threejs_worker.html nella repository, se invece volete testare tutti gli esempi andate a questa mia pagina, per altri esempi ho anche questa raccolta kalwalt-interactivity-AR

Ulterirori sviluppi

Contiamo di apportare miglioramenti al codice, in termini di performances, con forse un più efficiente algoritmo di tracciamento, spingendo di più sul WASM. Sicuramente poi bisogna trovare un metodo di compressione specifico per i feature set migliorato per i device mobile questo renderebbe il caricamento dei 3 files ( .fset .iset .fset3 ) più veloce. Inoltre stiamo lavorando per integrare la nuova versione di Jsartoolkit5 con NFT all’interno di Ar.js, speriamo al più presto di poter rilasciare la versione n.° 3 di Ar.js. Un progetto ancora più ambizioso e invece arStudio un editor basato su WebglStudio con il quale sarà possibile creare un applicazione basata su jsartoolkit5 e litescene.js con pochi click di mouse. Come vedete non ci mancano le idee!

Ringraziamenti

Tutto questo non sarebbe stato possibile se non avessi incontrato in questo mio percorso due persone che mi hanno aiutato e supportato. In primis Thorsten Bux uno sviluppatore professionista della Nuova Zelanda e uno dei attuali sviluppatori nel progetto ArtoolkitX che mi ha donato un diretto aiuto, molti consigli e fatto partecipe di diversi progetti, ed inoltre, Nicolò Carpignoli attuale mantainer del progetto Ar.js, sviluppatore professionista dall’Italia, anche lui prodigo di aiuto e suggerimenti. Ci sono anche altre persone che devo ringraziare che hanno contribuito in maniera notevole: Zixin Zheng e Martin Wecke per il contributo riguardo il WebWorker e la sua ottimizzazione. E ancora molte altre persone che hanno testato e dato il loro contributo in modo indiretto, a tutti voi grazie!