@srsergio/taptapp-ar 1.0.78 → 1.0.80

package/dist/compiler/offline-compiler.js

@@ -10,7 +10,6 @@ import { extractTrackingFeatures } from "./tracker/extract-utils.js";
 import { DetectorLite } from "./detector/detector-lite.js";
 import { build as hierarchicalClusteringBuild } from "./matching/hierarchical-clustering.js";
 import * as msgpack from "@msgpack/msgpack";
-import { WorkerPool } from "./utils/worker-pool.js";
 // Detect environment
 const isNode = typeof process !== "undefined" &&
     process.versions != null &&
@@ -18,35 +17,8 @@ const isNode = typeof process !== "undefined" &&
 const CURRENT_VERSION = 7; // Protocol v7: Moonshot - 4-bit Packed Tracking Data
 export class OfflineCompiler {
     data = null;
-    workerPool = null;
     constructor() {
-        // Workers only in Node.js
-        if (!isNode) {
-            console.log("🌐 OfflineCompiler: Browser mode (no workers)");
-        }
-    }
-    async _initNodeWorkers() {
-        try {
-            const pathModule = "path";
-            const urlModule = "url";
-            const osModule = "os";
-            const workerThreadsModule = "node:worker_threads";
-            const [path, url, os, { Worker }] = await Promise.all([
-                import(/* @vite-ignore */ pathModule),
-                import(/* @vite-ignore */ urlModule),
-                import(/* @vite-ignore */ osModule),
-                import(/* @vite-ignore */ workerThreadsModule)
-            ]);
-            const __filename = url.fileURLToPath(import.meta.url);
-            const __dirname = path.dirname(__filename);
-            const workerPath = path.join(__dirname, "node-worker.js");
-            // Limit workers to avoid freezing system
-            const numWorkers = Math.min(os.cpus().length, 4);
-            this.workerPool = new WorkerPool(workerPath, numWorkers, Worker);
-        }
-        catch (e) {
-            console.log("⚡ OfflineCompiler: Running without workers (initialization failed)", e);
-        }
+        console.log("⚡ OfflineCompiler: Main thread mode (no workers)");
     }
     async compileImageTargets(images, progressCallback) {
         console.time("⏱️ Compilación total");
@@ -86,24 +58,7 @@ export class OfflineCompiler {
         return this.data;
     }
     async _compileTarget(targetImages, progressCallback) {
-        if (isNode)
-            await this._initNodeWorkers();
-        if (this.workerPool) {
-            const progressMap = new Float32Array(targetImages.length);
-            const wrappedPromises = targetImages.map((targetImage, index) => {
-                return this.workerPool.runTask({
-                    type: 'compile-all', // 🚀 MOONSHOT: Combined task
-                    targetImage,
-                    onProgress: (p) => {
-                        progressMap[index] = p;
-                        const sum = progressMap.reduce((a, b) => a + b, 0);
-                        progressCallback(sum / targetImages.length);
-                    }
-                });
-            });
-            return Promise.all(wrappedPromises);
-        }
-        // Fallback or non-worker implementation: run match and track sequentially
+        // Run match and track sequentially to match browser behavior exactly
         const matchingResults = await this._compileMatch(targetImages, (p) => progressCallback(p * 0.5));
         const trackingResults = await this._compileTrack(targetImages, (p) => progressCallback(50 + p * 0.5));
         return targetImages.map((_, i) => ({
@@ -114,25 +69,6 @@ export class OfflineCompiler {
     async _compileMatch(targetImages, progressCallback) {
         const percentPerImage = 100 / targetImages.length;
         let currentPercent = 0;
-        if (isNode)
-            await this._initNodeWorkers();
-        if (this.workerPool) {
-            const progressMap = new Float32Array(targetImages.length);
-            const wrappedPromises = targetImages.map((targetImage, index) => {
-                return this.workerPool.runTask({
-                    type: 'match',
-                    targetImage,
-                    percentPerImage,
-                    basePercent: 0,
-                    onProgress: (p) => {
-                        progressMap[index] = p;
-                        const sum = progressMap.reduce((a, b) => a + b, 0);
-                        progressCallback(sum);
-                    }
-                });
-            });
-            return Promise.all(wrappedPromises);
-        }
         const results = [];
         for (let i = 0; i < targetImages.length; i++) {
             const targetImage = targetImages[i];
@@ -165,23 +101,6 @@ export class OfflineCompiler {
     async _compileTrack(targetImages, progressCallback) {
         const percentPerImage = 100 / targetImages.length;
         let currentPercent = 0;
-        if (this.workerPool) {
-            const progressMap = new Float32Array(targetImages.length);
-            const wrappedPromises = targetImages.map((targetImage, index) => {
-                return this.workerPool.runTask({
-                    type: 'compile',
-                    targetImage,
-                    percentPerImage,
-                    basePercent: 0,
-                    onProgress: (p) => {
-                        progressMap[index] = p;
-                        const sum = progressMap.reduce((a, b) => a + b, 0);
-                        progressCallback(sum);
-                    }
-                });
-            });
-            return Promise.all(wrappedPromises);
-        }
         const results = [];
         for (let i = 0; i < targetImages.length; i++) {
             const targetImage = targetImages[i];
@@ -407,9 +326,7 @@ export class OfflineCompiler {
         };
     }
     async destroy() {
-        if (this.workerPool) {
-            await this.workerPool.destroy();
-        }
+        // No workers to destroy
     }
     _pack4Bit(data) {
         const length = data.length;

package/dist/compiler/simple-ar.d.ts

@@ -17,6 +17,12 @@ export interface SimpleAROptions {
     onUpdate?: ((data: {
         targetIndex: number;
         worldMatrix: number[];
+        screenCoords?: {
+            x: number;
+            y: number;
+        }[];
+        reliabilities?: number[];
+        stabilities?: number[];
     }) => void) | null;
     cameraConfig?: MediaStreamConstraints['video'];
     debug?: boolean;
@@ -35,6 +41,12 @@ declare class SimpleAR {
     onUpdateCallback: ((data: {
         targetIndex: number;
         worldMatrix: number[];
+        screenCoords?: {
+            x: number;
+            y: number;
+        }[];
+        reliabilities?: number[];
+        stabilities?: number[];
     }) => void) | null;
     cameraConfig: MediaStreamConstraints['video'];
     debug: boolean;

package/dist/compiler/simple-ar.js

@@ -1,5 +1,4 @@
 import { Controller } from "./controller.js";
-import { OneEuroFilter } from "../libs/one-euro-filter.js";
 import { projectToScreen } from "./utils/projection.js";
 class SimpleAR {
     container;
@@ -114,7 +113,7 @@ class SimpleAR {
             if (this.debug)
                 this._updateDebugPanel(this.isTracking);
         }
-        const { targetIndex, worldMatrix, modelViewTransform } = data;
+        const { targetIndex, worldMatrix, modelViewTransform, screenCoords, reliabilities, stabilities } = data;
         if (worldMatrix) {
             if (!this.isTracking) {
                 this.isTracking = true;
@@ -122,30 +121,58 @@ class SimpleAR {
                 this.onFound && this.onFound({ targetIndex });
             }
             this.lastMatrix = worldMatrix;
-            if (!this.filters[targetIndex]) {
-                this.filters[targetIndex] = new OneEuroFilter({ minCutOff: 0.8, beta: 0.2 });
+            // We use the matrix from the controller directly (it's already filtered there)
+            this._positionOverlay(modelViewTransform, targetIndex);
+            // Project points to screen coordinates
+            let projectedPoints = [];
+            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) => {
+                    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 };
+                });
             }
-            const flatMVT = [
-                modelViewTransform[0][0], modelViewTransform[0][1], modelViewTransform[0][2], modelViewTransform[0][3],
-                modelViewTransform[1][0], modelViewTransform[1][1], modelViewTransform[1][2], modelViewTransform[1][3],
-                modelViewTransform[2][0], modelViewTransform[2][1], modelViewTransform[2][2], modelViewTransform[2][3]
-            ];
-            const smoothedFlat = this.filters[targetIndex].filter(Date.now(), flatMVT);
-            const smoothedMVT = [
-                [smoothedFlat[0], smoothedFlat[1], smoothedFlat[2], smoothedFlat[3]],
-                [smoothedFlat[4], smoothedFlat[5], smoothedFlat[6], smoothedFlat[7]],
-                [smoothedFlat[8], smoothedFlat[9], smoothedFlat[10], smoothedFlat[11]]
-            ];
-            this._positionOverlay(smoothedMVT, targetIndex);
-            this.onUpdateCallback && this.onUpdateCallback({ targetIndex, worldMatrix });
+            this.onUpdateCallback && this.onUpdateCallback({
+                targetIndex,
+                worldMatrix,
+                screenCoords: projectedPoints,
+                reliabilities,
+                stabilities
+            });
         }
         else {
             if (this.isTracking) {
                 this.isTracking = false;
-                if (this.filters[targetIndex])
-                    this.filters[targetIndex].reset();
                 this.overlay && (this.overlay.style.opacity = '0');
                 this.onLost && this.onLost({ targetIndex });
+                this.onUpdateCallback && this.onUpdateCallback({
+                    targetIndex,
+                    worldMatrix: null,
+                    screenCoords: [],
+                    reliabilities: [],
+                    stabilities: []
+                });
             }
         }
     }

package/dist/compiler/tracker/tracker.d.ts

@@ -11,6 +11,13 @@ export class Tracker {
     templateBuffer: Float32Array<ArrayBuffer>;
     dummyRun(inputData: any): void;
     track(inputData: any, lastModelViewTransform: any, targetIndex: any): {
+        worldCoords: never[];
+        screenCoords: never[];
+        reliabilities: never[];
+        debugExtra: {};
+        indices?: undefined;
+        octaveIndex?: undefined;
+    } | {
         worldCoords: {
             x: number;
             y: number;
@@ -20,6 +27,9 @@ export class Tracker {
             x: number;
             y: number;
         }[];
+        reliabilities: number[];
+        indices: number[];
+        octaveIndex: any;
         debugExtra: {};
     };
     lastOctaveIndex: any[] | undefined;

package/dist/compiler/tracker/tracker.js

@@ -1,9 +1,9 @@
 import { buildModelViewProjectionTransform, computeScreenCoordiate } from "../estimation/utils.js";
 const AR2_DEFAULT_TS = 6;
 const AR2_DEFAULT_TS_GAP = 1;
-const AR2_SEARCH_SIZE = 34; // Increased from 18 to 34 for much better fast-motion tracking
+const AR2_SEARCH_SIZE = 25; // Reduced from 34 to 25 to prevent background latching
 const AR2_SEARCH_GAP = 1;
-const AR2_SIM_THRESH = 0.6;
+const AR2_SIM_THRESH = 0.65; // Increased from 0.6 to reduce false positives
 const TRACKING_KEYFRAME = 0; // 0: 128px (optimized)
 class Tracker {
     constructor(markerDimensions, trackingDataList, projectionTransform, inputWidth, inputHeight, debugMode = false) {
@@ -82,6 +82,7 @@ class Tracker {
         const screenCoords = [];
         const goodTrack = [];
         const { px, py, s: scale } = trackingFrame;
+        const reliabilities = [];
         for (let i = 0; i < matchingPoints.length; i++) {
             if (sim[i] > AR2_SIM_THRESH && i < px.length) {
                 goodTrack.push(i);
@@ -92,6 +93,7 @@ class Tracker {
                     y: py[i] / scale,
                     z: 0,
                 });
+                reliabilities.push(sim[i]);
             }
         }
         // 2.1 Spatial distribution check: Avoid getting stuck in corners/noise
@@ -110,7 +112,7 @@ class Tracker {
             const detectedDiagonal = Math.sqrt((maxX - minX) ** 2 + (maxY - minY) ** 2);
             // If the points cover too little space compared to the screen size of the marker, it's a glitch
             if (detectedDiagonal < screenW * 0.15) {
-                return { worldCoords: [], screenCoords: [], debugExtra };
+                return { worldCoords: [], screenCoords: [], reliabilities: [], debugExtra };
             }
         }
         if (this.debugMode) {
@@ -122,7 +124,7 @@ class Tracker {
                 trackedPoints: screenCoords,
             };
         }
-        return { worldCoords, screenCoords, debugExtra };
+        return { worldCoords, screenCoords, reliabilities, indices: goodTrack, octaveIndex, debugExtra };
     }
     /**
      * Pure JS implementation of NCC matching

package/dist/react/TaptappAR.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useAR } from "./use-ar.js";
 export const TaptappAR = ({ config, className = "", showScanningOverlay = true, showErrorOverlay = true }) => {
-    const { containerRef, overlayRef, status, toggleVideo } = useAR(config);
+    const { containerRef, overlayRef, status, toggleVideo, trackedPoints } = useAR(config);
     // Simple heuristic to determine if it's a video or image
     // based on the presence of videoSrc and common extensions
     const isVideo = useMemo(() => {
@@ -12,7 +12,13 @@ export const TaptappAR = ({ config, className = "", showScanningOverlay = true,
         const url = config.videoSrc.toLowerCase().split('?')[0];
         return videoExtensions.some(ext => url.endsWith(ext)) || config.videoSrc.includes('video');
     }, [config.videoSrc]);
-    return (_jsxs("div", { className: `taptapp-ar-wrapper ${className} ${status}`, style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [showScanningOverlay && status === "scanning" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-scanning", children: _jsxs("div", { className: "scanning-content", children: [_jsxs("div", { className: "scanning-frame", children: [_jsx("img", { className: "target-preview", src: config.targetImageSrc, alt: "Target", crossOrigin: "anonymous" }), _jsx("div", { className: "scanning-line" })] }), _jsx("p", { className: "scanning-text", children: "Apunta a la imagen para comenzar" })] }) })), showErrorOverlay && status === "error" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-error", children: _jsxs("div", { className: "error-content", children: [_jsx("span", { className: "error-icon", children: "\u26A0\uFE0F" }), _jsx("p", { className: "error-title", children: "No se pudo iniciar AR" }), _jsx("p", { className: "error-text", children: "Verifica los permisos de c\u00E1mara" }), _jsx("button", { className: "retry-btn", onClick: () => window.location.reload(), children: "Reintentar" })] }) })), _jsx("div", { ref: containerRef, className: "taptapp-ar-container", onClick: toggleVideo, style: { width: '100%', height: '100%' }, children: isVideo ? (_jsx("video", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc, preload: "auto", loop: true, playsInline: true, muted: true, crossOrigin: "anonymous" })) : (_jsx("img", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc || config.targetImageSrc, crossOrigin: "anonymous", alt: "AR Overlay" })) }), _jsx("style", { children: `
+    return (_jsxs("div", { className: `taptapp-ar-wrapper ${className} ${status}`, style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [showScanningOverlay && status === "scanning" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-scanning", children: _jsxs("div", { className: "scanning-content", children: [_jsxs("div", { className: "scanning-frame", children: [_jsx("img", { className: "target-preview", src: config.targetImageSrc, alt: "Target", crossOrigin: "anonymous" }), _jsx("div", { className: "scanning-line" })] }), _jsx("p", { className: "scanning-text", children: "Apunta a la imagen para comenzar" })] }) })), showErrorOverlay && status === "error" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-error", children: _jsxs("div", { className: "error-content", children: [_jsx("span", { className: "error-icon", children: "\u26A0\uFE0F" }), _jsx("p", { className: "error-title", children: "No se pudo iniciar AR" }), _jsx("p", { className: "error-text", children: "Verifica los permisos de c\u00E1mara" }), _jsx("button", { className: "retry-btn", onClick: () => window.location.reload(), children: "Reintentar" })] }) })), _jsx("div", { ref: containerRef, className: "taptapp-ar-container", onClick: toggleVideo, style: { width: '100%', height: '100%' }, children: isVideo ? (_jsx("video", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc, preload: "auto", loop: true, playsInline: true, muted: true, crossOrigin: "anonymous" })) : (_jsx("img", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc || config.targetImageSrc, crossOrigin: "anonymous", alt: "AR Overlay" })) }), status === "tracking" && (_jsx("div", { className: "taptapp-ar-points-overlay", children: trackedPoints.filter(p => p.reliability > 0.7).map((point, i) => (_jsx("div", { className: "tracking-point", style: {
+                        left: `${point.x}px`,
+                        top: `${point.y}px`,
+                        width: `${(2 + point.reliability * 6) * (0.4 + point.stability * 0.6)}px`,
+                        height: `${(2 + point.reliability * 6) * (0.4 + point.stability * 0.6)}px`,
+                        opacity: (0.3 + (point.reliability * 0.4)) * (0.2 + point.stability * 0.8)
+                    } }, i))) })), _jsx("style", { children: `
                 .taptapp-ar-wrapper {
                     background: #000;
                     color: white;
@@ -92,6 +98,27 @@ export const TaptappAR = ({ config, className = "", showScanningOverlay = true,
                     display: block;
                     width: 100%;
                     height: auto;
+                    opacity: 0;
+                    pointer-events: none;
+                    transition: opacity 0.3s ease;
+                }
+                .taptapp-ar-points-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    pointer-events: none;
+                    z-index: 100; /* High z-index to be above overlay */
+                }
+                .tracking-point {
+                    position: absolute;
+                    background: black;
+                    border: 1px solid rgba(255,255,255,0.5); /* Better contrast */
+                    border-radius: 50%;
+                    transform: translate(-50%, -50%);
+                    box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
+                    pointer-events: none;
                 }
             ` })] }));
 };

package/dist/react/use-ar.d.ts

@@ -1,10 +1,17 @@
 import type { ARConfig } from "./types.js";
 export type ARStatus = "scanning" | "tracking" | "error";
+export interface TrackedPoint {
+    x: number;
+    y: number;
+    reliability: number;
+    stability: number;
+}
 export interface UseARReturn {
     containerRef: React.RefObject<HTMLDivElement>;
     overlayRef: React.RefObject<HTMLVideoElement | HTMLImageElement>;
     status: ARStatus;
     isPlaying: boolean;
     toggleVideo: () => Promise<void>;
+    trackedPoints: TrackedPoint[];
 }
 export declare const useAR: (config: ARConfig) => UseARReturn;

package/dist/react/use-ar.js

@@ -4,6 +4,7 @@ export const useAR = (config) => {
     const overlayRef = useRef(null);
     const [status, setStatus] = useState("scanning");
     const [isPlaying, setIsPlaying] = useState(false);
+    const [trackedPoints, setTrackedPoints] = useState([]);
     const arInstanceRef = useRef(null);
     const toggleVideo = useCallback(async () => {
         const overlay = overlayRef.current;
@@ -38,6 +39,18 @@ export const useAR = (config) => {
                     targetSrc: config.targetTaarSrc,
                     overlay: overlayRef.current,
                     scale: config.scale,
+                    debug: false,
+                    onUpdate: ({ screenCoords, reliabilities, stabilities }) => {
+                        if (screenCoords && reliabilities && stabilities) {
+                            const points = screenCoords.map((p, i) => ({
+                                x: p.x,
+                                y: p.y,
+                                reliability: reliabilities[i],
+                                stability: stabilities[i]
+                            }));
+                            setTrackedPoints(points);
+                        }
+                    },
                     onFound: async ({ targetIndex }) => {
                         console.log(`🎯 Target ${targetIndex} detected!`);
                         if (!isMounted)
@@ -59,6 +72,7 @@ export const useAR = (config) => {
                         if (!isMounted)
                             return;
                         setStatus("scanning");
+                        setTrackedPoints([]);
                         const overlay = overlayRef.current;
                         if (overlay instanceof HTMLVideoElement) {
                             overlay.pause();
@@ -89,6 +103,7 @@ export const useAR = (config) => {
         overlayRef,
         status,
         isPlaying,
-        toggleVideo
+        toggleVideo,
+        trackedPoints
     };
 };

package/package.json

@@ -1,7 +1,29 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.78",
-    "description": "AR Compiler for Node.js and Browser",
+    "version": "1.0.80",
+    "description": "Ultra-fast Augmented Reality (AR) SDK for Node.js and Browser. Image tracking with 100% pure JavaScript, zero-dependencies, and high-performance compilation.",
+    "keywords": [
+        "augmented reality",
+        "ar",
+        "image tracking",
+        "computer vision",
+        "webar",
+        "a-frame",
+        "three.js",
+        "ar.js",
+        "mindar",
+        "tracking",
+        "opencv",
+        "javascript",
+        "webgl",
+        "cross-platform",
+        "no-wasm",
+        "no-tfjs",
+        "webxr",
+        "natural-feature-tracking"
+    ],
+    "author": "Sergio Lázaro <slazaro.dev@gmail.com>",
+    "license": "MIT",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/srsergiolazaro/taptapp-ar.git"