@srsergio/taptapp-ar 1.0.93 → 1.0.95

package/src/runtime/simple-ar.ts

@@ -1,9 +1,9 @@
-import { Controller } from "./controller.js";
-import { OneEuroFilter } from "../libs/one-euro-filter.js";
+import { BioInspiredController } from "./bio-inspired-controller.js";
 import { projectToScreen } from "../core/utils/projection.js";
 
 /**
- * 🍦 SimpleAR - Dead-simple vanilla AR for image overlays
+ * 🍦 SimpleAR - High-performance Vanilla AR for image overlays
+ * Now powered by Bio-Inspired Perception and Nanite Virtualized Features.
  */
 
 export interface SimpleAROptions {
@@ -25,6 +25,58 @@ export interface SimpleAROptions {
     debug?: boolean;
 }
 
+/**
+ * 🕵️ Internal Smoothing Manager
+ * Applies Median + Adaptive Alpha filtering for sub-pixel stability.
+ */
+class SmoothingManager {
+    private history: Map<number, { x: number, y: number }[]> = new Map();
+    private lastFiltered: Map<number, { x: number, y: number }> = new Map();
+    private medianSize = 3;
+    private deadZone = 0.2;
+
+    smooth(id: number, raw: { x: number, y: number }, reliability: number) {
+        if (!this.history.has(id)) this.history.set(id, []);
+        const h = this.history.get(id)!;
+        h.push(raw);
+        if (h.length > this.medianSize) h.shift();
+
+        // Get median
+        const sortedX = [...h].map(p => p.x).sort((a, b) => a - b);
+        const sortedY = [...h].map(p => p.y).sort((a, b) => a - b);
+        const median = {
+            x: sortedX[Math.floor(sortedX.length / 2)],
+            y: sortedY[Math.floor(sortedY.length / 2)]
+        };
+
+        // Adaptive Alpha based on reliability
+        const baseAlpha = 0.15;
+        const alpha = baseAlpha + (reliability * (1.0 - baseAlpha));
+        const last = this.lastFiltered.get(id) || median;
+
+        let filteredX = last.x * (1 - alpha) + median.x * alpha;
+        let filteredY = last.y * (1 - alpha) + median.y * alpha;
+
+        // Dead-zone to kill jitter at rest
+        if (Math.abs(filteredX - last.x) < this.deadZone) filteredX = last.x;
+        if (Math.abs(filteredY - last.y) < this.deadZone) filteredY = last.y;
+
+        const result = { x: filteredX, y: filteredY };
+        this.lastFiltered.set(id, result);
+        return result;
+    }
+
+    reset(id?: number) {
+        if (id !== undefined) {
+            this.history.delete(id);
+            this.lastFiltered.delete(id);
+        } else {
+            this.history.clear();
+            this.lastFiltered.clear();
+        }
+    }
+}
+
 class SimpleAR {
     container: HTMLElement;
     targetSrc: string | string[];
@@ -43,16 +95,18 @@ class SimpleAR {
     cameraConfig: MediaStreamConstraints['video'];
     debug: boolean;
 
-    lastTime: number;
-    frameCount: number;
-    fps: number;
-    debugPanel: HTMLElement | null = null;
-    video: HTMLVideoElement | null = null;
-    controller: Controller | null = null;
-    isTracking: boolean = false;
-    lastMatrix: number[] | null = null;
-    filters: OneEuroFilter[] = [];
-    markerDimensions: number[][] = [];
+    private video: HTMLVideoElement | null = null;
+    private controller: BioInspiredController | null = null;
+    private smoother = new SmoothingManager();
+    private isTracking: boolean = false;
+    private markerDimensions: number[][] = [];
+    private debugPanel: HTMLElement | null = null;
+    private debugCanvas: HTMLCanvasElement | null = null;
+    private debugCtx: CanvasRenderingContext2D | null = null;
+
+    private lastTime = 0;
+    private fps = 0;
+    private frameCount = 0;
 
     constructor({
         container,
@@ -74,12 +128,6 @@ class SimpleAR {
         this.onUpdateCallback = onUpdate;
         this.cameraConfig = cameraConfig;
         this.debug = debug;
-        // @ts-ignore
-        if (this.debug) window.AR_DEBUG = true;
-
-        this.lastTime = performance.now();
-        this.frameCount = 0;
-        this.fps = 0;
     }
 
     async start() {
@@ -87,14 +135,17 @@ class SimpleAR {
         await this._startCamera();
         this._initController();
 
-        if (this.debug) this._createDebugPanel();
+        if (this.debug) {
+            this._createDebugPanel();
+            this._createDebugCanvas();
+        }
 
         const targets = Array.isArray(this.targetSrc) ? this.targetSrc : [this.targetSrc];
         const result = await this.controller!.addImageTargets(targets);
         this.markerDimensions = result.dimensions;
-        console.log("Targets loaded. Dimensions:", this.markerDimensions);
 
-        this.controller!.processVideo(this.video);
+        // Kick off loop
+        this.controller!.processVideo(this.video!);
         return this;
     }
 
@@ -109,32 +160,26 @@ class SimpleAR {
             this.video = null;
         }
         this.isTracking = false;
-        this.markerDimensions = [];
+        this.smoother.reset();
     }
 
-    _createVideo() {
+    private _createVideo() {
         this.video = document.createElement('video');
         this.video.setAttribute('autoplay', '');
         this.video.setAttribute('playsinline', '');
         this.video.setAttribute('muted', '');
         this.video.style.cssText = `
           position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          z-index: 0;
+          top: 0; left: 0; width: 100%; height: 100%;
+          object-fit: cover; z-index: 0;
         `;
         this.container.style.position = 'relative';
         this.container.style.overflow = 'hidden';
         this.container.insertBefore(this.video, this.container.firstChild);
     }
 
-    async _startCamera() {
-        const stream = await navigator.mediaDevices.getUserMedia({
-            video: this.cameraConfig
-        });
+    private async _startCamera() {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: this.cameraConfig });
         this.video!.srcObject = stream;
         await this.video!.play();
 
@@ -144,178 +189,103 @@ class SimpleAR {
         });
     }
 
-    _initController() {
-        this.controller = new Controller({
+    private _initController() {
+        this.controller = new BioInspiredController({
             inputWidth: this.video!.videoWidth,
             inputHeight: this.video!.videoHeight,
             debugMode: this.debug,
-            warmupTolerance: 3, // 🚀 Faster lock than default
-            missTolerance: 10,   // 🛡️ More resilient to temporary occlusion
+            bioInspired: {
+                enabled: true,
+                aggressiveSkipping: false
+            },
             onUpdate: (data) => this._handleUpdate(data)
         });
     }
 
-    _handleUpdate(data: any) {
-        if (data.type !== 'updateMatrix') return;
+    private _handleUpdate(data: any) {
+        if (data.type !== 'updateMatrix') {
+            if (data.type === 'featurePoints' && this.debugCtx) {
+                this._drawDebugFeatures(data.featurePoints);
+            }
+            return;
+        }
 
+        // FPS Meter
         const now = performance.now();
         this.frameCount++;
         if (now - this.lastTime >= 1000) {
             this.fps = Math.round((this.frameCount * 1000) / (now - this.lastTime));
             this.frameCount = 0;
             this.lastTime = now;
-            if (this.debug) this._updateDebugPanel(this.isTracking);
         }
 
-        const { targetIndex, worldMatrix, modelViewTransform, screenCoords, reliabilities, stabilities, detectionPoints } = data;
+        const { targetIndex, worldMatrix, modelViewTransform, reliabilities, stabilities, screenCoords, pixelsSaved } = data;
 
-        // Project points to screen coordinates
-        let projectedPoints = [];
+        // Apply Smoothing
+        let smoothedCoords = screenCoords || [];
         if (screenCoords && screenCoords.length > 0) {
-            const containerRect = this.container.getBoundingClientRect();
-            const videoW = this.video!.videoWidth;
-            const videoH = this.video!.videoHeight;
-            const isPortrait = containerRect.height > containerRect.width;
-            const isVideoLandscape = videoW > videoH;
-            const needsRotation = isPortrait && isVideoLandscape;
-            const proj = this.controller!.projectionTransform;
-
-            const vW = needsRotation ? videoH : videoW;
-            const vH = needsRotation ? videoW : videoH;
-            const pScale = Math.max(containerRect.width / vW, containerRect.height / vH);
-            const dW = vW * pScale;
-            const dH = vH * pScale;
-            const oX = (containerRect.width - dW) / 2;
-            const oY = (containerRect.height - dH) / 2;
-
-            projectedPoints = screenCoords.map((p: any) => {
-                let sx, sy;
-                if (needsRotation) {
-                    sx = oX + (dW / 2) - (p.y - proj[1][2]) * pScale;
-                    sy = oY + (dH / 2) + (p.x - proj[0][2]) * pScale;
-                } else {
-                    sx = oX + (dW / 2) + (p.x - proj[0][2]) * pScale;
-                    sy = oY + (dH / 2) + (p.y - proj[1][2]) * pScale;
-                }
-                return { x: sx, y: sy };
-            });
-        }
-
-        let projectedDetectionPoints = [];
-        if (detectionPoints && detectionPoints.length > 0) {
-            const containerRect = this.container.getBoundingClientRect();
-            const videoW = this.video!.videoWidth;
-            const videoH = this.video!.videoHeight;
-            const isPortrait = containerRect.height > containerRect.width;
-            const isVideoLandscape = videoW > videoH;
-            const needsRotation = isPortrait && isVideoLandscape;
-            const proj = this.controller!.projectionTransform;
-
-            const vW = needsRotation ? videoH : videoW;
-            const vH = needsRotation ? videoW : videoH;
-            const pScale = Math.max(containerRect.width / vW, containerRect.height / vH);
-            const dW = vW * pScale;
-            const dH = vH * pScale;
-            const oX = (containerRect.width - dW) / 2;
-            const oY = (containerRect.height - dH) / 2;
-
-            projectedDetectionPoints = detectionPoints.map((p: any) => {
-                let sx, sy;
-                if (needsRotation) {
-                    sx = oX + (dW / 2) - (p.y - proj[1][2]) * pScale;
-                    sy = oY + (dH / 2) + (p.x - proj[0][2]) * pScale;
-                } else {
-                    sx = oX + (dW / 2) + (p.x - proj[0][2]) * pScale;
-                    sy = oY + (dH / 2) + (p.y - proj[1][2]) * pScale;
-                }
-                return { x: sx, y: sy };
+            smoothedCoords = screenCoords.map((p: any) => {
+                const rel = reliabilities ? (reliabilities[p.id] || 0.5) : 0.5;
+                const sm = this.smoother.smooth(p.id, p, rel);
+                return { ...sm, id: p.id };
             });
         }
 
         if (worldMatrix) {
             if (!this.isTracking) {
                 this.isTracking = true;
-                this.overlay && (this.overlay.style.opacity = '1');
+                if (this.overlay) this.overlay.style.opacity = '1';
                 this.onFound && this.onFound({ targetIndex });
             }
-
-            this.lastMatrix = worldMatrix;
             this._positionOverlay(modelViewTransform, targetIndex);
         } else {
             if (this.isTracking) {
                 this.isTracking = false;
-                this.overlay && (this.overlay.style.opacity = '0');
+                if (this.overlay) this.overlay.style.opacity = '0';
                 this.onLost && this.onLost({ targetIndex });
+                this.smoother.reset();
             }
         }
 
-        // Always notify the callback if we have points, or if we just lost tracking
-        if (projectedPoints.length > 0 || projectedDetectionPoints.length > 0 || (worldMatrix === null && data.type === 'updateMatrix')) {
-            this.onUpdateCallback && this.onUpdateCallback({
+        // Notify callback
+        if (this.onUpdateCallback) {
+            this.onUpdateCallback({
                 targetIndex,
                 worldMatrix,
-                screenCoords: projectedPoints,
+                screenCoords: smoothedCoords,
                 reliabilities: reliabilities || [],
                 stabilities: stabilities || [],
-                detectionPoints: projectedDetectionPoints
+                detectionPoints: data.featurePoints
             });
         }
+
+        // Draw Debug UI
+        if (this.debug) {
+            this._updateHUD(data);
+            this._drawDebugPoints(smoothedCoords, stabilities);
+        }
     }
 
-    _positionOverlay(mVT: number[][], targetIndex: number) {
+    private _positionOverlay(mVT: number[][], targetIndex: number) {
         if (!this.overlay || !this.markerDimensions[targetIndex]) return;
 
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
         const videoW = this.video!.videoWidth;
         const videoH = this.video!.videoHeight;
+        const proj = this.controller!.projectionTransform;
 
+        // Handle portrait rotation for mobile
         const isPortrait = containerRect.height > containerRect.width;
         const isVideoLandscape = videoW > videoH;
         const needsRotation = isPortrait && isVideoLandscape;
 
-        const proj = this.controller!.projectionTransform;
-
         const pUL = projectToScreen(0, 0, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
         const pUR = projectToScreen(markerW, 0, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
         const pLL = projectToScreen(0, markerH, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
         const pLR = projectToScreen(markerW, markerH, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
 
-        const solveHomography = (w: number, h: number, p1: any, p2: any, p3: any, p4: any) => {
-            const x1 = p1.sx, y1 = p1.sy;
-            const x2 = p2.sx, y2 = p2.sy;
-            const x3 = p3.sx, y3 = p3.sy;
-            const x4 = p4.sx, y4 = p4.sy;
-
-            const dx1 = x2 - x4, dx2 = x3 - x4, dx3 = x1 - x2 + x4 - x3;
-            const dy1 = y2 - y4, dy2 = y3 - y4, dy3 = y1 - y2 + y4 - y3;
-
-            let a, b, c, d, e, f, g, h_coeff;
-
-            if (dx3 === 0 && dy3 === 0) {
-                a = x2 - x1; b = x3 - x1; c = x1;
-                d = y2 - y1; e = y3 - y1; f = y1;
-                g = 0; h_coeff = 0;
-            } else {
-                const det = dx1 * dy2 - dx2 * dy1;
-                g = (dx3 * dy2 - dx2 * dy3) / det;
-                h_coeff = (dx1 * dy3 - dx3 * dy1) / det;
-                a = x2 - x1 + g * x2;
-                b = x3 - x1 + h_coeff * x3;
-                c = x1;
-                d = y2 - y1 + g * y2;
-                e = y3 - y1 + h_coeff * y3;
-                f = y1;
-            }
-            return [
-                a / w, d / w, 0, g / w,
-                b / h, e / h, 0, h_coeff / h,
-                0, 0, 1, 0,
-                c, f, 0, 1
-            ];
-        };
-
-        const matrix = solveHomography(markerW, markerH, pUL, pUR, pLL, pLR);
+        const matrix = this._solveHomography(markerW, markerH, pUL, pUR, pLL, pLR);
 
         this.overlay.style.maxWidth = 'none';
         this.overlay.style.width = `${markerW}px`;
@@ -334,40 +304,96 @@ class SimpleAR {
         `;
     }
 
-    _createDebugPanel() {
+    private _solveHomography(w: number, h: number, p1: any, p2: any, p3: any, p4: any) {
+        const x1 = p1.sx, y1 = p1.sy;
+        const x2 = p2.sx, y2 = p2.sy;
+        const x3 = p3.sx, y3 = p3.sy;
+        const x4 = p4.sx, y4 = p4.sy;
+
+        const dx1 = x2 - x4, dx2 = x3 - x4, dx3 = x1 - x2 + x4 - x3;
+        const dy1 = y2 - y4, dy2 = y3 - y4, dy3 = y1 - y2 + y4 - y3;
+
+        const det = dx1 * dy2 - dx2 * dy1;
+        const g = (dx3 * dy2 - dx2 * dy3) / det;
+        const h_coeff = (dx1 * dy3 - dx3 * dy1) / det;
+        const a = x2 - x1 + g * x2;
+        const b = x3 - x1 + h_coeff * x3;
+        const c = x1;
+        const d = y2 - y1 + g * y2;
+        const e = y3 - y1 + h_coeff * y3;
+        const f = y1;
+
+        return [
+            a / w, d / w, 0, g / w,
+            b / h, e / h, 0, h_coeff / h,
+            0, 0, 1, 0,
+            c, f, 0, 1
+        ];
+    }
+
+    // --- DEBUG METHODS ---
+
+    private _createDebugPanel() {
         this.debugPanel = document.createElement('div');
         this.debugPanel.style.cssText = `
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.8);
-            color: #0f0;
-            font-family: monospace;
-            font-size: 12px;
-            padding: 8px;
-            border-radius: 4px;
-            z-index: 99999;
-            pointer-events: none;
-            line-height: 1.5;
+            position: absolute; top: 10px; left: 10px;
+            background: rgba(0, 0, 0, 0.7); color: #0f0;
+            font-family: monospace; font-size: 11px; padding: 10px;
+            border-radius: 5px; z-index: 100; pointer-events: none;
+            line-height: 1.4; border-left: 3px solid #0f0;
         `;
         this.container.appendChild(this.debugPanel);
     }
 
-    _updateDebugPanel(isTracking: boolean) {
+    private _createDebugCanvas() {
+        this.debugCanvas = document.createElement('canvas');
+        this.debugCanvas.width = this.container.clientWidth;
+        this.debugCanvas.height = this.container.clientHeight;
+        this.debugCanvas.style.cssText = `
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            pointer-events: none; z-index: 99;
+        `;
+        this.container.appendChild(this.debugCanvas);
+        this.debugCtx = this.debugCanvas.getContext('2d');
+    }
+
+    private _updateHUD(data: any) {
         if (!this.debugPanel) return;
-        // @ts-ignore
-        const memory = performance.memory ? Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) : '?';
-        const color = isTracking ? '#0f0' : '#f00';
-        const status = isTracking ? 'TRACKING' : 'SEARCHING';
+        const rel = data.reliabilities ? (data.reliabilities.reduce((a: any, b: any) => a + b, 0) / data.reliabilities.length).toFixed(2) : "0.00";
+        const stab = data.stabilities ? (data.stabilities.reduce((a: any, b: any) => a + b, 0) / data.stabilities.length).toFixed(2) : "0.00";
+        const savings = data.pixelsSaved ? ((data.pixelsSaved / (this.video!.videoWidth * this.video!.videoHeight)) * 100).toFixed(0) : "0";
 
         this.debugPanel.innerHTML = `
-            <div>HEAD-UP DISPLAY</div>
-            <div>----------------</div>
-            <div>FPS:    ${this.fps}</div>
-            <div>STATUS: <span style="color:${color}">${status}</span></div>
-            <div>MEM:    ${memory} MB</div>
+            <b>TapTapp AR HUD</b><br>
+            ------------------<br>
+            STATUS:   <span style="color:${this.isTracking ? '#0f0' : '#f00'}">${this.isTracking ? 'TRACKING' : 'SEARCHING'}</span><br>
+            FPS:      ${this.fps}<br>
+            RELIAB:   ${rel}<br>
+            STABIL:   ${stab}<br>
+            SAVINGS:  ${savings}% Pixels<br>
+            POINTS:   ${data.screenCoords?.length || 0}
         `;
     }
+
+    private _drawDebugPoints(coords: any[], stabilities: any[]) {
+        if (!this.debugCtx) return;
+        this.debugCtx.clearRect(0, 0, this.debugCanvas!.width, this.debugCanvas!.height);
+
+        coords.forEach((p, i) => {
+            const s = stabilities ? (stabilities[i] || 0) : 0.5;
+            this.debugCtx!.fillStyle = `rgba(0, 255, 0, ${0.4 + s * 0.6})`;
+            this.debugCtx!.fillRect(p.x - 1, p.y - 1, 2, 2);
+        });
+    }
+
+    private _drawDebugFeatures(points: any[]) {
+        if (!this.debugCtx || this.isTracking) return;
+        this.debugCtx.clearRect(0, 0, this.debugCanvas!.width, this.debugCanvas!.height);
+        this.debugCtx.fillStyle = 'rgba(255, 255, 0, 0.4)';
+        points.slice(0, 200).forEach(p => {
+            this.debugCtx!.fillRect(p.x - 1, p.y - 1, 2, 2);
+        });
+    }
 }
 
 export { SimpleAR };