simple .zft example

webarkit · Dec 10, 2024 · d944ebb · d944ebb
1 parent fd72e90
commit d944ebb
Show file tree

Hide file tree

Showing 12 changed files with 304 additions and 434 deletions.
diff --git a/dist/ARnft.js b/dist/ARnft.js
diff --git a/dist/ARnft.module.js b/dist/ARnft.module.js
diff --git a/dist/ARnft.simd.js b/dist/ARnft.simd.js
diff --git a/dist/ARnft.simd.module.js b/dist/ARnft.simd.module.js
diff --git a/dist/package.json b/dist/package.json
@@ -36,16 +36,16 @@
         "url": "https://github.com/webarkit/ARnft/issues"
     },
     "devDependencies": {
-        "@types/node": "22.7.5",
+        "@types/node": "22.10.1",
         "@types/stats.js": "^0.17.3",
         "@types/uuid": "10.0.0",
-        "prettier": "^3.3.3",
+        "prettier": "^3.4.2",
         "rimraf": "6.0.1",
         "stats.js": "^0.17.0",
         "ts-loader": "^9.5.1",
-        "typedoc": "0.26.11",
-        "typescript": "^5.5.4",
-        "webpack": "5.96.1",
+        "typedoc": "0.27.4",
+        "typescript": "^5.7.2",
+        "webpack": "5.97.1",
         "webpack-cli": "^5.1.4",
         "worker-loader": "^3.0.8"
     },
@@ -59,7 +59,7 @@
     "license": "LGPL-3.0",
     "resolutions": {},
     "dependencies": {
-        "@webarkit/jsartoolkit-nft": "^1.7.1",
+        "@webarkit/jsartoolkit-nft": "^1.7.2",
         "@webarkit/oneeurofilter-ts": "^0.1.0",
         "terser-webpack-plugin": "^5.3.10",
         "uuid": "11.0.3"

diff --git a/examples/DataNFT/zft/pinball.zft b/examples/DataNFT/zft/pinball.zft
diff --git a/examples/arNFT_simd_example.html b/examples/arNFT_simd_example.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <title>ARnft simd example showing a simple red cube</title>
@@ -46,6 +46,7 @@
                     cube.scale.set(180, 180, 180);
 
                     document.addEventListener("containerEvent", function (ev) {
+                        console.log("containerEvent: ", ev);
                         let canvas = document.getElementById("canvas");
                         let fov = (0.8 * 180) / Math.PI;
                         let ratio = width / height;

diff --git a/examples/arNFT_zft_example.html b/examples/arNFT_zft_example.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>ARnft example showing a simple red cube loading a .zft file</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1" />
+        <link rel="stylesheet" href="css/nft-style.css" />
+    </head>
+
+    <body>
+        <a
+            href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
+            class="ui marker"
+            target="_blank"
+        >
+            🖼 Marker Image
+        </a>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "./js/third_party/three.js/three.module.min.js",
+                    "arnft-threejs": "./js/ARnftThreejs.module.js",
+                    "arnft": "./../dist/ARnft.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import * as THREE from "three";
+            import arnft from "arnft";
+            const { ARnft } = arnft;
+            import ARnftThreejs from "arnft-threejs";
+            const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;
+
+            let width = 640;
+            let height = 480;
+            ARnft.init(width, height, [["examples/DataNFT/zft/pinball"]], [["pinball"]], "config.json", true)
+                .then((nft) => {
+                    let mat = new THREE.MeshLambertMaterial({
+                        color: 0xff0000,
+                    });
+                    let boxGeom = new THREE.BoxGeometry(1, 1, 1);
+                    let cube = new THREE.Mesh(boxGeom, mat);
+                    cube.position.z = 90;
+                    cube.scale.set(180, 180, 180);
+
+                    document.addEventListener("containerEvent", function (ev) {
+                        console.log("containerEvent: ", ev);
+                        let canvas = document.getElementById("canvas");
+                        let fov = (0.8 * 180) / Math.PI;
+                        let ratio = width / height;
+                        let config = {
+                            renderer: {
+                                alpha: true,
+                                antialias: true,
+                                context: null,
+                                precision: "mediump",
+                                premultipliedAlpha: true,
+                                stencil: true,
+                                depth: true,
+                                logarithmicDepthBuffer: true,
+                            },
+                            camera: {
+                                fov: fov,
+                                ratio: ratio,
+                                near: 0.01,
+                                far: 1000,
+                            },
+                        };
+
+                        let sceneThreejs = new SceneRendererTJS(config, canvas, nft.uuid, true);
+                        sceneThreejs.initRenderer();
+
+                        let nftAddTJS = new NFTaddTJS(nft.uuid);
+                        nftAddTJS.add(cube, "pinball", false);
+
+                        const tick = () => {
+                            sceneThreejs.draw();
+                            window.requestAnimationFrame(tick);
+                        };
+                        tick();
+                    });
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+        </script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -36,16 +36,16 @@
     "url": "https://github.com/webarkit/ARnft/issues"
   },
   "devDependencies": {
-    "@types/node": "22.7.5",
+    "@types/node": "22.10.1",
     "@types/stats.js": "^0.17.3",
     "@types/uuid": "10.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "rimraf": "6.0.1",
     "stats.js": "^0.17.0",
     "ts-loader": "^9.5.1",
-    "typedoc": "0.26.11",
-    "typescript": "^5.5.4",
-    "webpack": "5.96.1",
+    "typedoc": "0.27.4",
+    "typescript": "^5.7.2",
+    "webpack": "5.97.1",
     "webpack-cli": "^5.1.4",
     "worker-loader": "^3.0.8"
   },
@@ -59,7 +59,7 @@
   "license": "LGPL-3.0",
   "resolutions": {},
   "dependencies": {
-    "@webarkit/jsartoolkit-nft": "^1.7.1",
+    "@webarkit/jsartoolkit-nft": "^1.7.2",
     "@webarkit/oneeurofilter-ts": "^0.1.0",
     "terser-webpack-plugin": "^5.3.10",
     "uuid": "11.0.3"

diff --git a/src/ARnft.simd.ts b/src/ARnft.simd.ts
@@ -213,7 +213,7 @@ export default class ARnft {
                 markerUrls = this.entities.map((x) => [x.markerUrl]);
                 names = this.entities.map((x) => [x.name]);
             } else {
-                throw "markerUrls or entities can't be undefined";
+                throw new Error("markerUrls or entities can't be undefined");
             }
             return await _arnft._initialize(markerUrls, names, params.stats);
         } catch (error) {

diff --git a/src/NFTWorker.simd.ts b/src/NFTWorker.simd.ts
@@ -56,10 +56,12 @@ export default class NFTWorker {
 
     /**
      * The NFTWorker constructor, to create a new instance of the NFTWorker class.
-     * @param markerURL the marker url of the NFT marker.
+     * @param markerURL the marker URL of the NFT marker.
      * @param w the width of the camera.
      * @param h the height of the camera.
-     * @param uuid the uuid of the marker assigned by the ARnft constructor.
+     * @param uuid the UUID of the marker assigned by the ARnft constructor.
+     * @param name the name of the marker.
+     * @param addPath the additional path for the marker.
      */
     constructor(markerURL: Array<string>, w: number, h: number, uuid: string, name: string, addPath: string) {
         this.markerURL = markerURL;
@@ -73,14 +75,13 @@ export default class NFTWorker {
     }
 
     /**
-     * Initialize the NFTWorker instance, you need to provide the camera_para.dat Url,
-     * the ImageData from the video stream and the renderUpdate and trackUpdate functions for the stats.
-     * @param cameraURL
-     * @param imageData
-     * @param renderUpdate
-     * @param trackUpdate
-     * @param oef
-     * @returns true if succesfull.
+     * Initialize the NFTWorker instance. You need to provide the camera\_para.dat URL,
+     * the renderUpdate and trackUpdate functions for the stats, and a boolean for filtering the matrix.
+     * @param cameraURL The URL of the camera\_para.dat file.
+     * @param renderUpdate The function to call for rendering updates.
+     * @param trackUpdate The function to call for tracking updates.
+     * @param oef A boolean for filtering the matrix.
+     * @returns A promise that resolves to true if successful.
      */
     public async initialize(
         cameraURL: string,
@@ -99,8 +100,9 @@ export default class NFTWorker {
     }
 
     /**
-     * This is the function that will pass the video stream to the worker.
-     * @param imageData the image data from the video stream.
+     * Passes the video stream to the worker for processing.
+     * @param imagedata The image data from the video stream.
+     * @param frame The current frame number.
      * @returns void
      */
     public process(imagedata: ImageData, frame: number) {
@@ -114,12 +116,11 @@ export default class NFTWorker {
 
     /**
      * Load the resources from the ARnft instance into the worker.
-     * @param cameraURL camera_para.dat url
-     * @param imageData image data from the video stream.
-     * @param renderUpdate renderUpdate function for the stats.
-     * @param trackUpdate trackUpdate function for the stats.
-     * @param oef oef boolean for filtering the matrix.
-     * @returns true if succesfull.
+     * @param cameraURL The URL of the camera\_para.dat file.
+     * @param renderUpdate The function to call for rendering updates.
+     * @param trackUpdate The function to call for tracking updates.
+     * @param oef A boolean for filtering the matrix.
+     * @returns A promise that resolves to true if successful.
      */
     protected load(
         cameraURL: string,