rebuild libs and new testing example with pinball.zft

- using zlib version 1.2.11 - error running the example: memory access out of bounds
webarkit · Nov 20, 2024 · cc04ed5 · cc04ed5
1 parent 2ad1a71
commit cc04ed5
Show file tree

Hide file tree

Showing 16 changed files with 2,611 additions and 2,482 deletions.
diff --git a/build/artoolkitNFT.debug.js b/build/artoolkitNFT.debug.js
diff --git a/build/artoolkitNFT.min.js b/build/artoolkitNFT.min.js
diff --git a/build/artoolkitNFT_ES6_wasm.js b/build/artoolkitNFT_ES6_wasm.js
diff --git a/build/artoolkitNFT_ES6_wasm.simd.js b/build/artoolkitNFT_ES6_wasm.simd.js
diff --git a/build/artoolkitNFT_ES6_wasm_td.js b/build/artoolkitNFT_ES6_wasm_td.js
diff --git a/build/artoolkitNFT_embed_ES6_wasm.js b/build/artoolkitNFT_embed_ES6_wasm.js
diff --git a/build/artoolkitNFT_thread.js b/build/artoolkitNFT_thread.js
diff --git a/build/artoolkitNFT_wasm.js b/build/artoolkitNFT_wasm.js
diff --git a/build/artoolkitNFT_wasm.simd.js b/build/artoolkitNFT_wasm.simd.js
diff --git a/emscripten/WebARKitLib b/emscripten/WebARKitLib
diff --git a/emscripten/zlib b/emscripten/zlib
diff --git a/examples/DataNFT/zft/pinball.zft b/examples/DataNFT/zft/pinball.zft
diff --git a/examples/basic_zft.html b/examples/basic_zft.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+  <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": "./js/third_party/three.js/three.module.min.js",
+          "three/addons/": "./js/third_party/three.js/"
+        }
+      }
+    </script>
+    <link rel="stylesheet" href="css/nft-style.css" />
+  </head>
+  <body>
+    <div id="loading">
+      <img alt="JsartoolkitNFT logo" src="Data/JsartoolkitNFT-logo.gif" />
+      <span class="loading-text">Loading, please wait</span>
+    </div>
+    <!--
+  ==================
+  STATS
+  ==================
+  -->
+    <div id="stats" class="ui stats">
+      <div id="stats1" class="stats-item">
+        <p class="stats-item-title">Main</p>
+      </div>
+      <div id="stats2" class="stats-item">
+        <p class="stats-item-title">Worker</p>
+      </div>
+    </div>
+    <!--
+  ==================
+  CAMERA VIDEO & CANVAS
+  ==================
+  -->
+    <div id="app">
+      <video loop autoplay muted playsinline id="video"></video>
+      <canvas id="canvas"></canvas>
+    </div>
+
+    <a
+      href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
+      class="ui marker"
+      target="_blank"
+    >
+      🖼 Marker Image
+    </a>
+
+    <script src="js/third_party/three.js/stats.min.js"></script>
+
+    <script type="module">
+      import start from "./threejs_worker.js";
+
+      /**
+       * STATS
+       */
+      const statsMain = new Stats();
+      statsMain.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+      document.getElementById("stats1").appendChild(statsMain.dom);
+      const statsWorker = new Stats();
+      statsWorker.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+      document.getElementById("stats2").appendChild(statsWorker.dom);
+      /**
+       * 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) {
+        let hint = {
+          audio: false,
+          video: true,
+        };
+        if (window.innerWidth < 800) {
+          const width = window.innerWidth < window.innerHeight ? 240 : 360;
+          const height = window.innerWidth < window.innerHeight ? 360 : 240;
+
+          const aspectRatio = window.innerWidth / window.innerHeight;
+
+          console.log(width, height);
+
+          hint = {
+            audio: false,
+            video: {
+              facingMode: "environment",
+              width: { min: width, max: width },
+            },
+          };
+
+          console.log(hint);
+        }
+
+        navigator.mediaDevices.getUserMedia(hint).then(function (stream) {
+          video.srcObject = stream;
+          video.addEventListener("loadedmetadata", function () {
+            video.play();
+
+            console.log("video", video, video.videoWidth, video.videoHeight);
+
+
+
+            start(
+              container,
+              "./../examples/DataNFT/zft/pinball",
+               //     "./../examples/DataNFT/pinball",
+              video,
+              video.videoWidth,
+              video.videoHeight,
+              canvas,
+              function () {
+                statsMain.update();
+              },
+              function () {
+                statsWorker.update();
+              },
+            );
+          });
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/js/artoolkitNFT.api.js b/js/artoolkitNFT.api.js
@@ -978,8 +978,38 @@
     }
 
     function Uint8ArrayToStr(array) {
-    }
+        var out, i, len, c;
+        var char2, char3;
+
+        out = "";
+        len = array.length;
+        i = 0;
+        while(i < len) {
+            c = array[i++];
+            switch(c >> 4)
+            {
+                case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
+                // 0xxxxxxx
+                out += String.fromCharCode(c);
+                break;
+                case 12: case 13:
+                // 110x xxxx   10xx xxxx
+                char2 = array[i++];
+                out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
+                break;
+                case 14:
+                    // 1110 xxxx  10xx xxxx  10xx xxxx
+                    char2 = array[i++];
+                    char3 = array[i++];
+                    out += String.fromCharCode(((c & 0x0F) << 12) |
+                        ((char2 & 0x3F) << 6) |
+                        ((char3 & 0x3F) << 0));
+                    break;
+            }
+        }
 
+        return out;
+    }
     function bytesToString(array) {
         return String.fromCharCode.apply(String, array);
     }

diff --git a/js/artoolkitNFT.worker.js b/js/artoolkitNFT.worker.js
@@ -93,6 +93,8 @@ function load(msg) {
           function (err) {
             console.error("Error in loading marker on Worker", err);
           };
+      }, function() {
+        console.error("Error in loadNFTMarker function on Worker");
       });
 
       postMessage({ type: "loaded", proj: JSON.stringify(cameraMatrix) });

diff --git a/js/artoolkitNFT_ES6.worker.js b/js/artoolkitNFT_ES6.worker.js
@@ -79,6 +79,7 @@ function load(msg) {
 
   const onLoad = function (arController) {
     ar = arController;
+    console.log(ar)
     var cameraMatrix = ar.getCameraMatrix();
 
     ar.addEventListener("getNFTMarker", function (ev) {