natural feature tracking (NFT)

Augmented reality met image based tracking of natural feature tracking mbv aframe-ar-nft.js. terug naar de inleiding AR in fullscreen

met deze methode kan je een AR animatie op bijv een gebouw plaatsen het gebouw is dan de marker

werkwijze

Je maak van een gebouw een foto en maak mbv de on line NFT marker creator een image descriptor

Op het github kanaal van Daniel Fernandes Gonçalves de Oliveira staat een NFT marker creator die je kan downloaden en met "npm install" kan je de dependencies installeren

De image descriptor bestaat uit 3 bestanden met achtervoegsels 1) ......fset, 2) ......fset3, 3).......iset

Deze drie bestanden plaats ik in de map nft die in de map met het index.html bestand staat

Om de descriptors te laden moet het url pad via een cors proxy server lopen, (regel 46) zie het github kanaal van Rob W zie Cross-origin resource sharing in wikipedia

Een url rechtstreeks, als relatief pad, invoeren bijv url=".../nft/ijsvogel geeft de foutmelding "Error in loading marker on Worker 404"

Nadat in het console de melding "Loading of NFT data complete" verschijnt is mijn model niet te zien gggrr

Als nft heb ik gekozen voor mijn ijsvogeltje mogelijk dat deze als nft niet geschikt is, zie het artikel Creating good markers

De pinball afbeelding (1636 x 2048) gedownload deze door de on line NFT marker creator gehaald na meer dan 30 minuten waren de image descriptors klaar.

Het auto.gltf model ook via de cors proxy server geladen (regel 55) (zie het artikel "markers area enabled").

In het console is te zien dat er tracking plaats vind met de medeling "Tracking lost" er is dus geen autootje te zien.

 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <meta name="natural feature tracking" content="nft"/> 
    <script src="../lib/aframe-v1.2.0.min.js"></script> 
   <script src="../lib/aframe-ar-nft.js"></script> 
</head> 
<style> 
   .arjs-loader { 
   height: 100%; 
   width: 100%; 
   position: absolute; 
   top: 0; 
   left: 0; 
   background-color: rgba(0, 0, 0, 0.8); 
   z-index: 9999; 
   display: flex; 
   justify-content: center; 
  align-items: center; 
 }
 
   .arjs-loader div { 
   text-align: center; 
   font-size: 1.25em; 
  color: white; 
 } 
</style> 

<body style="margin : 0px; overflow: hidden;"> 
   <div class="arjs-loader"> 
       <div>De image descriptors worden geladen...</div> 
   </div> 
 <a-scene 
     vr-mode-ui="enabled: false;" 
     renderer="logarithmicDepthBuffer: true;" 
     embedded 
     arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;" 
  > 
   <a-nft 
      type="nft" 
      url="https://arjs-cors-proxy.herokuapp.com/https://flevopink.nl/A-Frame/AR_met_images_based_tracking/./nft/pinball" 
      smooth="true" 
      smoothCount="10" 
      smoothTolerance=".01" 
     smoothThreshold="5" 
   > 
    <a-entity 
       position="0 0 0" 
       scale="0.5 0.5 0.5" 
       gltf-model="https://arjs-cors-proxy.herokuapp.com/https://flevopink.nl/A-Frame/AR_met_images_based_tracking/./nft/auto.gltf" 
     ></a-entity> 
 </a-nft> 
       <a-entity camera></a-entity> 
    </a-scene> 
  </body> 
</html>

Flevopink