hiukim · jmschrack · Dec 16, 2022 · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023
diff --git a/examples/image-tracking/assets/card-example/axes.gltf b/examples/image-tracking/assets/card-example/axes.gltf
diff --git a/examples/image-tracking/three-filter.html b/examples/image-tracking/three-filter.html
@@ -0,0 +1,138 @@
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+
+    <script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@0.136.0/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.136.0/examples/jsm/",
+      "mindar-image-three":"../../dist-dev/mindar-image-three.js"
+    }
+  }
+</script>
+    <!-- <script src="../../dist-dev/mindar-image-three.js" type="module"></script> -->
+
+    <script type="module">
+        import * as THREE from 'three';
+        import { MindARThree,SmoothDampFilter,OneEuroFilter } from 'mindar-image-three';
+        import GUI from 'three/addons/libs/lil-gui.module.min.js'
+        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+        //const THREE = window.MINDAR.IMAGE.THREE;
+        let mindarThree;
+
+
+        const filterSettings = {
+            filterMinCF: 1,
+            filterBeta: 1000,
+        }
+        /* const gui = new GUI();
+        gui.add(filterSettings, "filterMinCF").min(0.001).onChange(value => {
+            mindarThree.controller.trackingStates.forEach(item=>{
+                item.filter.minCutOff=value;
+                item.filter.reset();
+            })
+            console.log("Updating MinCutoff",mindarThree.controller.trackingStates.length);
+        });;
+        gui.add(filterSettings, "filterBeta").onChange(value => {
+            mindarThree.controller.trackingStates.forEach(item=>{
+                item.filter.beta=value;
+                item.filter.reset();
+            })
+            console.log("Updating Beta");
+            //console.log(value);
+        });; */
+
+        function Setup(mindarThree){
+            const { renderer, scene, camera } = mindarThree;
+
+            const anchor = mindarThree.addAnchor(0);
+            const loader = new GLTFLoader().setPath( './assets/card-example/' );
+            loader.load( 'axes.gltf', function ( gltf ) {
+            anchor.group.add(gltf.scene); 
+            });
+            const geometry = new THREE.PlaneGeometry(1, 0.55);
+            const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.5 });
+            const plane = new THREE.Mesh(geometry, material);
+            anchor.group.add(plane);
+        }
+        const startSmoothDamp = async () => {
+            mindarThree = new MindARThree({
+                container: document.querySelector("#container"),
+                imageTargetSrc: './assets/card-example/card.mind',
+                customFilter:{filter:SmoothDampFilter}
+            });
+            Setup(mindarThree);
+            await mindarThree.start();
+            const { renderer, scene, camera } = mindarThree;
+            renderer.setAnimationLoop(() => {
+                renderer.render(scene, camera);
+            });
+        }
+
+        const startOneEuroFilter = async () => {
+            mindarThree = new MindARThree({
+                container: document.querySelector("#container"),
+                imageTargetSrc: './assets/card-example/card.mind',
+                customFilter:{filter:OneEuroFilter,opts:{minCutOff: 1, beta: 10000}}
+            });
+            Setup(mindarThree);
+            await mindarThree.start();
+            const { renderer, scene, camera } = mindarThree;
+            renderer.setAnimationLoop(() => {
+                renderer.render(scene, camera);
+            });
+        }
+
+        const startButton = document.querySelector("#startButton1");
+        const startButton2 = document.querySelector("#startButton2");
+
+        startButton.addEventListener("click", () => {
+            startOneEuroFilter();
+            startButton.disabled=true;
+            startButton2.disabled=true;
+        });
+
+        startButton2.addEventListener("click", () => {
+            startSmoothDamp();
+            startButton.disabled=true;
+            startButton2.disabled=true;
+        });
+
+    </script>
+
+    <style>
+        body {
+            margin: 0;
+        }
+
+        #container {
+            width: 100vw;
+            height: 100vh;
+            position: relative;
+            overflow: hidden;
+        }
+
+        #control {
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 2;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="control">
+        <button id="startButton1">Start OneEuroFilter</button>
+        <button id="startButton2">Start SmoothDampFilter</button>
+
+    </div>
+
+    <div id="container">
+    </div>
+</body>
+
+</html>
diff --git a/src/face-target/aframe.js b/src/face-target/aframe.js
@@ -156,9 +156,13 @@ AFRAME.registerSystem('mindar-face-system', {
   },
 
   _setupAR: async function() {
+    const beta=this.filterBeta;
+    const minCutOff=this.filterMinCF;
     this.controller = new Controller({
-      filterMinCF: this.filterMinCF,
-      filterBeta: this.filterBeta,
+      customFilter:{opts:{
+        minCutOff,
+        beta
+      }}
     });
     this._resize();
 

diff --git a/src/face-target/controller.js b/src/face-target/controller.js
@@ -8,23 +8,29 @@ import {OneEuroFilter} from '../libs/one-euro-filter.js';
 const DEFAULT_FILTER_CUTOFF = 0.001; // 1Hz. time period in milliseconds
 const DEFAULT_FILTER_BETA = 1;
 
+const DEFAULT_FILTER={filter:OneEuroFilter,opts:{minCutOff:DEFAULT_FILTER_CUTOFF,beta:DEFAULT_FILTER_BETA}}; //old settings from One Euro Filter
+
+
 class Controller {
-  constructor({onUpdate=null, filterMinCF=null, filterBeta=null}) {
+  constructor({onUpdate=null, customFilter=DEFAULT_FILTER}) {
     this.customFaceGeometries = [];
     this.estimator = null;
     this.lastEstimateResult = null;
-    this.filterMinCF = filterMinCF === null? DEFAULT_FILTER_CUTOFF: filterMinCF;
-    this.filterBeta = filterBeta === null? DEFAULT_FILTER_BETA: filterBeta;
+    /* this.filterMinCF = filterMinCF === null? DEFAULT_FILTER_CUTOFF: filterMinCF;
+    this.filterBeta = filterBeta === null? DEFAULT_FILTER_BETA: filterBeta; */
+    this.customFilter=customFilter===null?DEFAULT_FILTER:customFilter;
+    if(!this.customFilter.hasOwnProperty("filter")) customFilter.filter=DEFAULT_FILTER.filter;
+    if(!this.customFilter.hasOwnProperty("opts")) customFilter.opts=DEFAULT_FILTER.opts;
     this.onUpdate = onUpdate;
 
     //console.log("filter", this.filterMinCF, this.filterBeta);
 
     this.landmarkFilters = [];
     for (let i = 0; i < canonicalMetricLandmarks.length; i++) {
-      this.landmarkFilters[i] = new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta});
+      this.landmarkFilters[i] = new this.customFilter.filter(this.customFilter.opts);//new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta});
     }
-    this.faceMatrixFilter = new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta});
-    this.faceScaleFilter = new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta});
+    this.faceMatrixFilter = new this.customFilter.filter(this.customFilter.opts);//new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta});
+    this.faceScaleFilter = new this.customFilter.filter(this.customFilter.opts);//new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta});
   }
 
   async setup(flipFace) {

diff --git a/src/face-target/three.js b/src/face-target/three.js
@@ -6,16 +6,32 @@ import { UI } from "../ui/ui.js";
 import {BufferGeometry,BufferAttribute} from "three";
 const THREE={BufferGeometry,BufferAttribute};
 
+/**
+ * The complete Triforce, or one or more components of the Triforce.
+ * @typedef {Object} FilterParameters
+ * @property {typeof} filter - filter class to use. Defaults: OneEuroFilter
+ * @property {Object} opts - The opts object to pass to the filter's constructor
+ */
+
 export class MindARThree {
-  constructor({container, uiLoading="yes", uiScanning="yes", uiError="yes", filterMinCF=null, filterBeta=null,
+  /**
+   * 
+   * @param {Object} params 
+   * @param {HTMLElement} params.container 
+   * @param {(string|"yes")} params.uiLoading 
+   * @param {(string|"yes")} params.uiScanning 
+   * @param {(string|"yes")} params.uiError
+   * @param {FilterParameters} params.customFilter
+   * @param {(string | null)} params.userDeviceId
+   */
+  constructor({container, uiLoading="yes", uiScanning="yes", uiError="yes", customFilter=null,
     userDeviceId = null, environmentDeviceId = null, disableFaceMirror = false,
   }) {
     this.container = container;
     this.ui = new UI({ uiLoading, uiScanning, uiError });
 
     this.controller = new Controller({
-      filterMinCF: filterMinCF,
-      filterBeta: filterBeta,
+      customFilter
     });
     this.disableFaceMirror = disableFaceMirror;
     this.scene = new Scene();

diff --git a/src/image-target/aframe.js b/src/image-target/aframe.js
@@ -106,13 +106,18 @@ AFRAME.registerSystem('mindar-image-system', {
   _startAR: async function() {
     const video = this.video;
     const container = this.container;
-
+    const minCutOff=this.filterMinCF;
+    const beta=this.filterBeta;
     this.controller = new Controller({
       inputWidth: video.videoWidth,
       inputHeight: video.videoHeight,
       maxTrack: this.maxTrack, 
-      filterMinCF: this.filterMinCF,
-      filterBeta: this.filterBeta,
+      customFilter:{
+        opts:{
+          minCutOff,
+          beta
+        }
+      },
       missTolerance: this.missTolerance,
       warmupTolerance: this.warmupTolerance,
       onUpdate: (data) => {