upgrading basic_threading and ARToolkitNFT_ES6_threading_example exam…

…ples
webarkit · Oct 24, 2024 · 1ebbac6 · 1ebbac6
1 parent 799ccfd
commit 1ebbac6
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 140 deletions.
diff --git a/examples/ARToolkitNFT_ES6_threading_example.html b/examples/ARToolkitNFT_ES6_threading_example.html
@@ -1,16 +1,24 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
   <meta charset="utf-8">
   <title>ARToolkitNFT_ES6 example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+        "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+      }
+    }
+  </script>
   <link rel="stylesheet" href="css/nft-style.css">
 </head>
 
 <body>
   <div id="loading">
-    <img src="Data/JsartoolkitNFT-logo.gif" />
+    <img alt="JsartoolkitNFT logo" src="Data/JsartoolkitNFT-logo.gif"/>
     <span class="loading-text">Loading, please wait</span>
   </div>
   <!--
@@ -32,18 +40,19 @@
     <canvas id="canvas"></canvas>
   </div>
   <script src="js/third_party/three.js/stats.min.js"></script>
-  <script src="js/third_party/three.js/three.min.js"></script>
   <script async src="js/threading_files/ARToolkitNFT_td.js"></script>
   <script src="index.js"></script>
   <script src="../js/one-euro-filter.js"></script>
   <script src="load_ES6_thread.js"></script>
-  <script src="threejs_wasm_thread.js"></script>
+  <!--<script type="module" src="threejs_wasm_thread.js"></script>-->
+
+  <script type="module">
+    import start from './threejs_wasm_thread.js'
 
-  <script>
     /**
-    * STATS
-    */
-    var statsMain = new Stats();
+     * STATS
+     */
+    const statsMain = new Stats();
     statsMain.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
     document.getElementById('stats1').appendChild(statsMain.dom);
 
@@ -63,7 +72,9 @@
 
           return new Promise(resolve => {
             sourceVideo.addEventListener("loadeddata", event => {
+              const target = event.target;
               console.log("Camera is ready");
+              console.log("Video stream with width, height: ", target.width, target.height)
               resolve();
             });
           });

diff --git a/examples/basic_threading.html b/examples/basic_threading.html
@@ -1,14 +1,22 @@
 <!DOCTYPE html>
-<html>
+<html lang="e">
 <head>
   <meta charset="utf-8">
   <title>NFT marker example with a WebWorker and Three.js</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+        "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+      }
+    }
+  </script>
   <link rel="stylesheet" href="css/nft-style.css">
 </head>
 <body>
   <div id="loading" >
-    <img  src="Data/JsartoolkitNFT-logo.gif"/>
+    <img alt="JsartoolkitNFT logo" src="Data/JsartoolkitNFT-logo.gif"/>
     <span class="loading-text">Loading, please wait</span>
   </div>
   <!--
@@ -47,38 +55,39 @@
   </a>
 
   <script src="js/third_party/three.js/stats.min.js"></script>
-  <script src="js/third_party/three.js/three.min.js"></script>
   <script async src="../build/artoolkitNFT_thread.js"></script>
   <script async src="../js/one-euro-filter.js"></script>
   <script async src="load_thread.js"></script>
-  <script async src="threejs_wasm_thread.js"></script>
 
-  <script>
-  /**
-  * STATS
-  */
-  var statsMain = new Stats();
-  statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
+
+  <script type="module">
+    import start from './threejs_wasm_thread.js'
+
+    /**
+     * STATS
+     */
+    const statsMain = new Stats();
+    statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
   document.getElementById( 'stats1' ).appendChild( statsMain.dom );
-  /**
-  * APP / ELEMENTS
-  */
-  var container = document.getElementById( 'app' );
-  var video = document.getElementById( 'video' );
-  var canvas = document.getElementById( 'canvas' );
-  /**
+    /**
+     * APP / ELEMENTS
+     */
+    const container = document.getElementById('app');
+    const video = document.getElementById('video');
+    const canvas = document.getElementById('canvas');
+    /**
   * APP / VIDEO STREAM
   */
   if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-    var hint = {
+    let hint = {
       audio: false,
       video: true
     };
     if( window.innerWidth < 800 ) {
-      var width = ( window.innerWidth < window.innerHeight ) ? 240 : 360;
-      var height = ( window.innerWidth < window.innerHeight ) ? 360 : 240;
+      const width = (window.innerWidth < window.innerHeight) ? 240 : 360;
+      const height = (window.innerWidth < window.innerHeight) ? 360 : 240;
 
-      var aspectRatio = window.innerWidth / window.innerHeight;
+      const aspectRatio = window.innerWidth / window.innerHeight;
 
       console.log( width, height );
 

diff --git a/examples/load_ES6_thread.js b/examples/load_ES6_thread.js
@@ -1,52 +1,59 @@
 const WARM_UP_TOLERANCE = 5;
 let tickCount = 0;
-var markerResult = null;
-var ar;
+const markerResult = null;
+let ar;
 
 // initialize the OneEuroFilter
 let filterMinCF = 0.0001;
 let filterBeta = 0.01;
 const filter = new OneEuroFilter({ minCutOff: filterMinCF, beta: filterBeta });
 function load_thread(msg) {
       console.debug("Loading marker at: ", msg.marker);
-  
-      var onLoad = function (arController) {
+
+    const onLoad = function (arController) {
         ar = arController;
-        var cameraMatrix = ar.getCameraMatrix();
-  
+        const cameraMatrix = ar.getCameraMatrix();
+
         ar.addEventListener("getNFTMarker", function (ev) {
-          tickCount += 1;
-          if (tickCount > WARM_UP_TOLERANCE) {
-            var mat = filter.filter(Date.now(), ev.data.matrixGL_RH);
-            var markerFound = new CustomEvent("markerFound", {detail: {matrixGL_RH: mat}})
-            window.dispatchEvent(markerFound)
-        }
+            tickCount += 1;
+            if (tickCount > WARM_UP_TOLERANCE) {
+                const mat = filter.filter(Date.now(), ev.data.matrixGL_RH);
+                const markerFound = new CustomEvent("markerFound", {detail: {matrixGL_RH: mat}});
+                window.dispatchEvent(markerFound)
+            }
         });
-  
+
         ar.addEventListener("lostNFTMarker", function (ev) {
-          filter.reset();
+            filter.reset();
         });
-  
+
         ar.loadNFTMarker(msg.marker, function (id) {
-          ar.trackNFTMarkerId(id);
-          let marker = ar.getNFTData(ar.id, 0);
-          console.log("nftMarker data: ", marker);
-          var markerInfos = new CustomEvent("markerInfos", {detail: {marker: marker}})
-          window.dispatchEvent(markerInfos);
-          console.log("loadNFTMarker -> ", id);
-          var endLoading = new CustomEvent("endLoading", {detail: {end: true}})
+            ar.trackNFTMarkerId(id);
+            let marker = ar.getNFTData(ar.id, 0);
+            console.log("nftMarker data: ", marker);
+            const markerInfos = new CustomEvent("markerInfos", {detail: {marker: marker}});
+            window.dispatchEvent(markerInfos);
+            console.log("loadNFTMarker -> ", id);
+            const endLoading = new CustomEvent("endLoading", {detail: {end: true}});
             window.dispatchEvent(endLoading)
         });
 
-        var loaded = new CustomEvent("loaded", {detail: {proj: cameraMatrix}});
+        if (ar && ar.process) {
+            window.addEventListener('imageDataEvent', function (ev) {
+                const iData = ev.detail.imageData;
+                ar.process(iData);
+            })
+        }
+
+        const loaded = new CustomEvent("loaded", {detail: {proj: cameraMatrix}});
         window.dispatchEvent(loaded)
-      };
-  
-      var onError = function (error) {
+    };
+
+    const onError = function (error) {
         console.error(error);
-      };
-  
-      console.debug("Loading camera at:", msg.camera_para);
+    };
+
+    console.debug("Loading camera at:", msg.camera_para);
 
       // we cannot pass the entire ARControllerNFT, so we re-create one inside the Worker, starting from camera_param
       ARControllerNFT.initWithDimensions(msg.pw, msg.ph, msg.camera_para)

diff --git a/examples/load_thread.js b/examples/load_thread.js
@@ -1,52 +1,59 @@
 const WARM_UP_TOLERANCE = 5;
 let tickCount = 0;
-var markerResult = null;
+const markerResult = null;
 
 // initialize the OneEuroFilter
 let filterMinCF = 0.0001;
 let filterBeta = 0.01;
 const filter = new OneEuroFilter({ minCutOff: filterMinCF, beta: filterBeta });
 function load_thread(msg) {
       console.debug("Loading marker at: ", msg.marker);
-  
-      var onLoad = function () {
+
+    const onLoad = function () {
         ar = new ARControllerNFT(msg.pw, msg.ph, param);
-        var cameraMatrix = ar.getCameraMatrix();
-  
+        const cameraMatrix = ar.getCameraMatrix();
+
         ar.addEventListener("getNFTMarker", function (ev) {
-          tickCount += 1;
-          if (tickCount > WARM_UP_TOLERANCE) {
-            var mat = filter.filter(Date.now(), ev.data.matrixGL_RH);
-            var markerFound = new CustomEvent("markerFound", {detail: {matrixGL_RH: mat}})
-            window.dispatchEvent(markerFound)
-        }
+            tickCount += 1;
+            if (tickCount > WARM_UP_TOLERANCE) {
+                const mat = filter.filter(Date.now(), ev.data.matrixGL_RH);
+                const markerFound = new CustomEvent("markerFound", {detail: {matrixGL_RH: mat}});
+                window.dispatchEvent(markerFound)
+            }
         });
-  
+
         ar.addEventListener("lostNFTMarker", function (ev) {
-          filter.reset();
+            filter.reset();
         });
-  
+
         ar.loadNFTMarker(msg.marker, function (id) {
-          ar.trackNFTMarkerId(id);
-          let marker = ar.getNFTData(ar.id, 0);
-          console.log("nftMarker data: ", marker);
-          var markerInfos = new CustomEvent("markerInfos", {detail: {marker: marker}})
-          window.dispatchEvent(markerInfos);
-          console.log("loadNFTMarker -> ", id);
-          var endLoading = new CustomEvent("endLoading", {detail: {end: true}})
+            ar.trackNFTMarkerId(id);
+            let marker = ar.getNFTData(ar.id, 0);
+            console.log("nftMarker data: ", marker);
+            const markerInfos = new CustomEvent("markerInfos", {detail: {marker: marker}});
+            window.dispatchEvent(markerInfos);
+            console.log("loadNFTMarker -> ", id);
+            const endLoading = new CustomEvent("endLoading", {detail: {end: true}});
             window.dispatchEvent(endLoading)
         });
 
+        if (ar && ar.process) {
+            window.addEventListener('imageDataEvent', function (ev) {
+                const iData = ev.detail.imageData;
+                ar.process(iData);
+            })
+        }
+
         var loaded = new CustomEvent("loaded", {detail: {proj: cameraMatrix}});
         window.dispatchEvent(loaded)
-      };
-  
-      var onError = function (error) {
+    };
+
+    const onError = function (error) {
         console.error(error);
-      };
-  
-      console.debug("Loading camera at:", msg.camera_para);
-  
+    };
+
+    console.debug("Loading camera at:", msg.camera_para);
+
       // we cannot pass the entire ARControllerNFT, so we re-create one inside the Worker, starting from camera_param
-      var param = new ARCameraParamNFT(msg.camera_para, onLoad, onError);
+      const param = new ARCameraParamNFT(msg.camera_para, onLoad, onError);
   }