@srsergio/taptapp-ar 1.0.62 → 1.0.67

package/README.md

@@ -1,11 +1,5 @@
 # @srsergio/taptapp-ar
 
-<p align="center">
-  <a href="./docs/technical-paper.pdf">📄 <b>Technical Paper (PDF)</b></a> &nbsp;|&nbsp;
-  <a href="./docs/index.html">🌐 <b>Official Website</b></a> &nbsp;|&nbsp;
-  <a href="./analysis/INDEX.md">📊 <b>Analysis Report</b></a>
-</p>
-
 🚀 **TapTapp AR** is a high-performance Augmented Reality (AR) toolkit for **Node.js** and **Browser** environments. It provides an ultra-fast offline compiler and a lightweight runtime for image tracking.
 
 **100% Pure JavaScript**: This package is now completely independent of **TensorFlow.js** for both compilation and real-time tracking, resulting in massive performance gains and zero-latency initialization.
@@ -83,104 +77,43 @@ const binaryBuffer = compiler.exportData();
 
 ## 🎥 Runtime Usage (AR Tracking)
 
-### 1. SimpleAR (Recommended) 🍦
-The **simplest way** to use AR—no Three.js or A-Frame required. Just overlay an HTML element on the tracked target.
-
-```javascript
-import { SimpleAR } from '@srsergio/taptapp-ar';
+### 1. Simple A-Frame Integration
+The easiest way to use TapTapp AR in a web app:
 
-const ar = new SimpleAR({
-  container: document.getElementById('ar-container'),
-  targetSrc: './my-target.taar',  // Single URL or array: ['./a.taar', './b.taar']
-  overlay: document.getElementById('my-overlay'),
-  onFound: ({ targetIndex }) => console.log(`Target ${targetIndex} detected! 🎯`),
-  onLost: ({ targetIndex }) => console.log(`Target ${targetIndex} lost 👋`)
-});
-
-await ar.start();
-
-// When done:
-ar.stop();
-```
-
-#### 📁 Minimal HTML Example
 ```html
-<div id="ar-container" style="width: 100vw; height: 100vh;">
-  <img id="my-overlay" src="./overlay.png" 
-       style="opacity: 0; z-index: 1; width: 200px; transition: opacity 0.3s;" />
-</div>
-
-<script type="module">
-  import { SimpleAR } from '@srsergio/taptapp-ar';
-  
-  const ar = new SimpleAR({
-    container: document.getElementById('ar-container'),
-    targetSrc: './targets.taar',
-    overlay: document.getElementById('my-overlay'),
-  });
-  
-  ar.start();
-</script>
+<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+<script src="path/to/@srsergio/taptapp-ar/dist/index.js"></script>
+
+<a-scene taar-image="imageTargetSrc: ./targets.taar;">
+  <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
+  <a-entity taar-image-target="targetIndex: 0">
+    <a-plane position="0 0 0" height="0.552" width="1"></a-plane>
+  </a-entity>
+</a-scene>
 ```
 
-#### ⚙️ SimpleAR Options
-| Option | Required | Description |
-| :--- | :--- | :--- |
-| `container` | ✅ | DOM element where video + overlay render |
-| `targetSrc` | ✅ | URL to your `.taar` file |
-| `overlay` | ✅ | DOM element to position on the target |
-| `onFound` | ❌ | Callback when target is detected |
-| `onLost` | ❌ | Callback when target is lost |
-| `onUpdate` | ❌ | Called cada frame con `{ targetIndex, worldMatrix }` |
-| `cameraConfig` | ❌ | Config de cámara (por defecto: `{ facingMode: 'environment', width: 1280, height: 720 }`) |
-
----
+### 2. High-Performance Three.js Wrapper
+For custom Three.js applications:
 
-### 2. React Integration (Vite & SSR Safe) ⚛️
-
-The fastest and most modern way to build AR apps with React. It supports **Code Splitting** and is **100% SSR-Safe** (Next.js, Astro, Remix).
-
-#### 🚀 Quick Start: `<TaptappAR />`
-Drop the component into your app. It handles camera permissions, scanning animations, and video/image overlays automatically.
+```javascript
+import { TaarThree } from '@srsergio/taptapp-ar';
 
-```tsx
-import { TaptappAR, mapDataToPropsConfig } from '@srsergio/taptapp-ar';
+const taarThree = new TaarThree({
+  container: document.querySelector("#container"),
+  imageTargetSrc: './targets.taar',
+});
 
-const MyARComponent = ({ data }) => {
-  // Use mapDataToPropsConfig to convert your raw data into ARConfig
-  const config = mapDataToPropsConfig(data);
+const {renderer, scene, camera} = taarThree;
 
-  return (
-    <div style={{ width: '100vw', height: '100vh' }}>
-      <TaptappAR config={config} />
-    </div>
-  );
-};
-```
+const anchor = taarThree.addAnchor(0);
+// Add your 3D models to anchor.group
 
-#### 🛠️ Custom UI: `useAR()` Hook
-If you want to build your own UI while keeping the powerful tracking logic:
-
-```tsx
-import { useAR } from '@srsergio/taptapp-ar';
-
-const CustomAR = ({ config }) => {
-  const { containerRef, overlayRef, status, toggleVideo } = useAR(config);
-
-  return (
-    <div ref={containerRef} style={{ position: 'relative' }} onClick={toggleVideo}>
-      {/* Custom Scanning UI */}
-      {status === 'scanning' && <div className="my-loader">Scanning...</div>}
-      
-      {/* Video Overlay */}
-      <video ref={overlayRef} src={config.videoSrc} loop muted playsInline />
-    </div>
-  );
-};
+await taarThree.start();
+renderer.setAnimationLoop(() => {
+  renderer.render(scene, camera);
+});
 ```
 
----
-
 ### 3. Raw Controller (Advanced & Custom Engines)
 The `Controller` is the core engine of TapTapp AR. You can use it to build your own AR components or integrate tracking into custom 3D engines.
 
@@ -246,8 +179,56 @@ if (targetIndex !== -1) {
 }
 ```
 
-### 📚 Legacy Usage
-For **A-Frame** or **Three.js** wrappers, please refer to the [Advanced Usage Documentation](./docs/advanced-usage.md).
+### 4. Vanilla JS (No Framework) 🍦
+The **simplest way** to use AR—no Three.js, no A-Frame. Just overlay an image on the tracked target.
+
+```javascript
+import { SimpleAR } from '@srsergio/taptapp-ar';
+
+const ar = new SimpleAR({
+  container: document.getElementById('ar-container'),
+  targetSrc: './my-target.taar',  // Single URL or array: ['./a.taar', './b.taar']
+  overlay: document.getElementById('my-overlay'),
+  onFound: ({ targetIndex }) => console.log(`Target ${targetIndex} detected! 🎯`),
+  onLost: ({ targetIndex }) => console.log(`Target ${targetIndex} lost 👋`)
+});
+
+await ar.start();
+
+// When done:
+ar.stop();
+```
+
+#### 📁 Minimal HTML
+```html
+<div id="ar-container" style="width: 100vw; height: 100vh;">
+  <img id="my-overlay" src="./overlay.png" 
+       style="opacity: 0; z-index: 1; width: 200px; transition: opacity 0.3s;" />
+</div>
+
+<script type="module">
+  import { SimpleAR } from '@srsergio/taptapp-ar';
+  
+  const ar = new SimpleAR({
+    container: document.getElementById('ar-container'),
+    targetSrc: './targets.taar',
+    overlay: document.getElementById('my-overlay'),
+  });
+  
+  ar.start();
+</script>
+```
+
+#### ⚙️ SimpleAR Options
+| Option | Required | Description |
+| :--- | :--- | :--- |
+| `container` | ✅ | DOM element where video + overlay render |
+| `targetSrc` | ✅ | URL to your `.taar` file |
+| `overlay` | ✅ | DOM element to position on the target |
+| `onFound` | ❌ | Callback when target is detected |
+| `onLost` | ❌ | Callback when target is lost |
+| `onUpdate` | ❌ | Called each frame with `{ targetIndex, worldMatrix }` |
+| `cameraConfig` | ❌ | Camera constraints (default: `{ facingMode: 'environment', width: 1280, height: 720 }`) |
 
 ---
 
@@ -261,15 +242,8 @@ TapTapp AR uses a proprietary **Moonshot Vision Codec** that is significantly mo
 
 ---
 
-## 📄 License & Recognition
-
-**Taptapp AR** is created and maintained by **Sergio Lazaro**.
-
-This project is licensed under the **GPL-3.0 License**.
-This ensures that the project remains open and free, and that authorship is properly recognized. No "closed-source" usage is allowed without a commercial agreement.
-
-Commercial licenses are available for proprietary applications. Please contact the author for details.
+## 📄 License & Credits
 
-### Acknowledgements
-This project evolved from the incredible work of [MindAR](https://github.com/hiukim/mind-ar-js). While the codebase has been extensively rewritten and optimized for performance, we gratefully acknowledge the foundation laid by the original authors.
+MIT © [srsergiolazaro](https://github.com/srsergiolazaro)
 
+Based on the core research of MindAR, but completely re-written for high-performance binary processing and JS-only execution.

package/dist/compiler/detector/crop-detector.js

@@ -8,7 +8,7 @@ class CropDetector {
         let minDimension = Math.min(width, height) / 2;
         let cropSize = Math.pow(2, Math.round(Math.log(minDimension) / Math.log(2)));
         this.cropSize = cropSize;
-        this.detector = new DetectorLite(cropSize, cropSize, { useLSH: true, maxOctaves: 1 });
+        this.detector = new DetectorLite(cropSize, cropSize, { useLSH: true });
         this.lastRandomIndex = 4;
     }
     detect(input) {

package/dist/compiler/detector/detector-lite.d.ts

@@ -9,7 +9,6 @@ export class DetectorLite {
     useGPU: any;
     useLSH: any;
     numOctaves: number;
-    maxFeaturesPerBucket: any;
     /**
      * Detecta características en una imagen en escala de grises
      * @param {Float32Array|Uint8Array} imageData - Datos de imagen (width * height)

package/dist/compiler/detector/detector-lite.js

@@ -15,6 +15,7 @@ import { computeLSH64, computeFullFREAK, packLSHIntoDescriptor } from "../utils/
 const PYRAMID_MIN_SIZE = 4; // Restored to 4 for better small-scale detection
 // PYRAMID_MAX_OCTAVE ya no es necesario, el límite lo da PYRAMID_MIN_SIZE
 const NUM_BUCKETS_PER_DIMENSION = 10;
+const MAX_FEATURES_PER_BUCKET = 30; // Maximized to ensure robustness in Moonshot mode
 const ORIENTATION_NUM_BINS = 36;
 const FREAK_EXPANSION_FACTOR = 7.0;
 // Global GPU mode flag
@@ -47,9 +48,6 @@ export class DetectorLite {
                 break;
         }
         this.numOctaves = options.maxOctaves !== undefined ? Math.min(numOctaves, options.maxOctaves) : numOctaves;
-        // 🚀 SMART BITRATE (VBR): Internal logic to decide feature density based on scale
-        const scale = options.scale !== undefined ? options.scale : 1.0;
-        this.maxFeaturesPerBucket = options.maxFeaturesPerBucket || Math.max(4, Math.floor(12 * Math.sqrt(scale)));
     }
     /**
      * Detecta características en una imagen en escala de grises
@@ -307,7 +305,7 @@ export class DetectorLite {
      */
     _applyPrune(extremas) {
         const nBuckets = NUM_BUCKETS_PER_DIMENSION;
-        const nFeatures = this.maxFeaturesPerBucket;
+        const nFeatures = MAX_FEATURES_PER_BUCKET;
         // Agrupar por buckets
         const buckets = [];
         for (let i = 0; i < nBuckets * nBuckets; i++) {

package/dist/compiler/image-list.js

@@ -4,7 +4,7 @@ import { resize } from "./utils/images.js";
  * Un valor más bajo permite detectar imágenes más pequeñas pero aumenta el tiempo de procesamiento
  * @constant {number}
  */
-const MIN_IMAGE_PIXEL_SIZE = 40; // Increased to 40 to skip extremely small, noisy layers and reduce size
+const MIN_IMAGE_PIXEL_SIZE = 32;
 /**
  * Construye una lista de imágenes con diferentes escalas para detección de características
  * @param {Object} inputImage - Imagen de entrada con propiedades width, height y data
@@ -16,8 +16,9 @@ const buildImageList = (inputImage) => {
     let c = minScale;
     while (true) {
         scaleList.push(c);
-        // Optimization: More aggressive step (pow(2, 0.75) approx 1.68) for smaller exports
-        c *= Math.pow(2.0, 0.75);
+        // Optimization: Paso balanceado (aprox 1.5)
+        // Mejor cobertura que 2.0, pero mucho más ligero que 1.41 o 1.26
+        c *= Math.pow(2.0, 0.6);
         if (c >= 0.95) {
             c = 1;
             break;

package/dist/compiler/node-worker.js

@@ -64,19 +64,40 @@ parentPort.on('message', async (msg) => {
     else if (msg.type === 'match') {
         const { targetImage, percentPerImage, basePercent } = msg;
         try {
-            const { buildImageList } = await import('./image-list.js');
-            const imageList = buildImageList(targetImage);
-            const percentPerScale = percentPerImage / imageList.length;
-            const keyframes = [];
-            for (let i = 0; i < imageList.length; i++) {
-                const image = imageList[i];
-                // 🚀 SMART BITRATE (VBR): Now handled internally by DetectorLite via 'scale'
-                const detector = new DetectorLite(image.width, image.height, {
-                    useLSH: true,
-                    maxOctaves: 1,
-                    scale: image.scale
+            // 🚀 MOONSHOT: Only run detector ONCE on full-res image.
+            // DetectorLite internally builds a pyramid (octaves 1.0, 0.5, 0.25, etc.)
+            const detector = new DetectorLite(targetImage.width, targetImage.height, {
+                useLSH: true
+            });
+            parentPort.postMessage({ type: 'progress', percent: basePercent + percentPerImage * 0.1 });
+            const { featurePoints: allPoints } = detector.detect(targetImage.data);
+            parentPort.postMessage({ type: 'progress', percent: basePercent + percentPerImage * 0.5 });
+            // Group points by their scale (octave)
+            const scalesMap = new Map();
+            for (const p of allPoints) {
+                const octaveScale = p.scale;
+                let list = scalesMap.get(octaveScale);
+                if (!list) {
+                    list = [];
+                    scalesMap.set(octaveScale, list);
+                }
+                // Coordinates in p are already full-res. 
+                // We need them relative to the scaled image for the keyframe.
+                list.push({
+                    ...p,
+                    x: p.x / octaveScale,
+                    y: p.y / octaveScale,
+                    scale: 1.0 // Keypoint scale is always 1.0 relative to its own keyframe image
                 });
-                const { featurePoints: ps } = detector.detect(image.data);
+            }
+            // Optional: Run another detector pass at an intermediate scale to improve coverage
+            // (e.g. at 1/1.41 ratio) if tracking robustness suffers. 
+            // For now, let's stick to octaves for MAXIMUM speed.
+            const keyframes = [];
+            const sortedScales = Array.from(scalesMap.keys()).sort((a, b) => a - b);
+            const percentPerScale = (percentPerImage * 0.4) / sortedScales.length;
+            for (const s of sortedScales) {
+                const ps = scalesMap.get(s);
                 const sortedPs = sortPoints(ps);
                 const maximaPoints = sortedPs.filter((p) => p.maxima);
                 const minimaPoints = sortedPs.filter((p) => !p.maxima);
@@ -87,13 +108,13 @@ parentPort.on('message', async (msg) => {
                     minimaPoints,
                     maximaPointsCluster,
                     minimaPointsCluster,
-                    width: image.width,
-                    height: image.height,
-                    scale: image.scale,
+                    width: Math.round(targetImage.width / s),
+                    height: Math.round(targetImage.height / s),
+                    scale: 1.0 / s, // keyframe.scale is relative to full target image
                 });
                 parentPort.postMessage({
                     type: 'progress',
-                    percent: basePercent + (i + 1) * percentPerScale
+                    percent: basePercent + percentPerImage * 0.6 + keyframes.length * percentPerScale
                 });
             }
             parentPort.postMessage({

package/dist/compiler/offline-compiler.d.ts

@@ -12,10 +12,7 @@ export declare class OfflineCompiler {
     constructor();
     _initNodeWorkers(): Promise<void>;
     compileImageTargets(images: any[], progressCallback: (p: number) => void): Promise<any>;
-    _compileTarget(targetImages: any[], progressCallback: (p: number) => void): Promise<{
-        matchingData: any;
-        trackingData: any;
-    }[]>;
+    _compileTarget(targetImages: any[], progressCallback: (p: number) => void): Promise<any[]>;
     _compileMatch(targetImages: any[], progressCallback: (p: number) => void): Promise<any[]>;
     _compileTrack(targetImages: any[], progressCallback: (p: number) => void): Promise<any[]>;
     compileTrack({ progressCallback, targetImages, basePercent }: {

package/dist/compiler/offline-compiler.js

@@ -88,8 +88,22 @@ export class OfflineCompiler {
     async _compileTarget(targetImages, progressCallback) {
         if (isNode)
             await this._initNodeWorkers();
-        // Reverted: 'compile-all' combined task was causing issues with pyramid processing
-        // We go back to sequential match and track for reliability
+        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
         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) => ({
@@ -126,12 +140,7 @@ export class OfflineCompiler {
             const percentPerImageScale = percentPerImage / imageList.length;
             const keyframes = [];
             for (const image of imageList) {
-                // 🚀 SMART BITRATE (VBR): Internalized in DetectorLite
-                const detector = new DetectorLite(image.width, image.height, {
-                    useLSH: true,
-                    maxOctaves: 1,
-                    scale: image.scale
-                });
+                const detector = new DetectorLite(image.width, image.height, { useLSH: true });
                 const { featurePoints: ps } = detector.detect(image.data);
                 const maximaPoints = ps.filter((p) => p.maxima);
                 const minimaPoints = ps.filter((p) => !p.maxima);

package/dist/index.d.ts

@@ -1,6 +1,4 @@
-export { ARConfig, ARDataItem, mapDataToPropsConfig } from "./react/types.js";
-export * from "./react/use-ar.js";
-export * from "./react/TaptappAR.js";
+export * from "./react/types";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./compiler/controller.js";
 export { SimpleAR } from "./compiler/simple-ar.js";

package/dist/index.js

@@ -1,6 +1,4 @@
-export { mapDataToPropsConfig } from "./react/types.js";
-export * from "./react/use-ar.js";
-export * from "./react/TaptappAR.js";
+export * from "./react/types";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./compiler/controller.js";
 export { SimpleAR } from "./compiler/simple-ar.js";

package/dist/react/types.d.ts

@@ -3,23 +3,20 @@ export interface ARConfig {
     targetImageSrc: string;
     targetTaarSrc: string;
     videoSrc: string;
-    overlaySrc: string;
     videoWidth: number;
     videoHeight: number;
     scale: number;
-    overlayType: "video" | "image";
 }
 export interface ARDataItem {
     id: string;
-    type: "photos" | "videoNative" | "ar" | "imageOverlay";
+    type: "photos" | "videoNative" | "ar";
     images?: {
         image: string;
         fileId: string;
     }[];
     url?: string;
-    fileId?: string;
     scale?: number;
     width?: number;
     height?: number;
 }
-export declare function mapDataToPropsConfig(data: ARDataItem[]): ARConfig;
+export declare function mapDataToPropsConfig(data: any[]): ARConfig;

package/dist/react/types.js

@@ -1,16 +1,14 @@
 export function mapDataToPropsConfig(data) {
     const photos = data.find((item) => item.type === "photos");
-    const overlay = data.find((item) => item.type === "videoNative" || item.type === "imageOverlay");
+    const video = data.find((item) => item.type === "videoNative");
     const ar = data.find((item) => item.type === "ar");
     return {
         cardId: photos?.id || "",
         targetImageSrc: photos?.images?.[0]?.image || "",
         targetTaarSrc: ar?.url || "",
-        videoSrc: overlay?.url || "",
-        overlaySrc: overlay?.url || "",
-        videoWidth: overlay?.width || 0,
-        videoHeight: overlay?.height || 0,
-        scale: overlay?.scale || 1,
-        overlayType: overlay?.type === "videoNative" ? "video" : "image",
+        videoSrc: video?.url || "",
+        videoWidth: video?.width || 0,
+        videoHeight: video?.height || 0,
+        scale: video?.scale || 1,
     };
 }

package/package.json

@@ -1,24 +1,7 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.62",
-    "author": "Sergio Lazaro <srsergiolazaro@gmail.com>",
-    "license": "GPL-3.0",
-    "description": "Ultra-fast, lightweight Augmented Reality Image Tracking SDK for the web. Features an optimized offline compiler, React components, and compatibility with Three.js/A-Frame. No heavy ML frameworks required.",
-    "keywords": [
-        "web-ar",
-        "augmented-reality",
-        "image-tracking",
-        "ar-compiler",
-        "computer-vision",
-        "three-js",
-        "react-ar",
-        "a-frame",
-        "mind-ar",
-        "offline-ar",
-        "webgl",
-        "markerless-tracking",
-        "taptapp"
-    ],
+    "version": "1.0.67",
+    "description": "AR Compiler for Node.js and Browser",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/srsergiolazaro/taptapp-ar.git"
@@ -74,11 +57,13 @@
         "tinyqueue": "^2.0.3"
     },
     "devDependencies": {
-        "@types/node": "^25.0.3",
+        "@types/node": "^20.14.2",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/three": "^0.170.0",
         "jimp": "^1.6.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "typescript": "^5.4.5",
         "vitest": "^4.0.16"
     },

package/src/compiler/detector/crop-detector.js

@@ -11,7 +11,7 @@ class CropDetector {
     let cropSize = Math.pow(2, Math.round(Math.log(minDimension) / Math.log(2)));
     this.cropSize = cropSize;
 
-    this.detector = new DetectorLite(cropSize, cropSize, { useLSH: true, maxOctaves: 1 });
+    this.detector = new DetectorLite(cropSize, cropSize, { useLSH: true });
 
     this.lastRandomIndex = 4;
   }

package/src/compiler/detector/detector-lite.js

@@ -19,6 +19,7 @@ const PYRAMID_MIN_SIZE = 4; // Restored to 4 for better small-scale detection
 
 
 const NUM_BUCKETS_PER_DIMENSION = 10;
+const MAX_FEATURES_PER_BUCKET = 30; // Maximized to ensure robustness in Moonshot mode
 
 
 const ORIENTATION_NUM_BINS = 36;
@@ -57,10 +58,6 @@ export class DetectorLite {
         }
 
         this.numOctaves = options.maxOctaves !== undefined ? Math.min(numOctaves, options.maxOctaves) : numOctaves;
-
-        // 🚀 SMART BITRATE (VBR): Internal logic to decide feature density based on scale
-        const scale = options.scale !== undefined ? options.scale : 1.0;
-        this.maxFeaturesPerBucket = options.maxFeaturesPerBucket || Math.max(4, Math.floor(12 * Math.sqrt(scale)));
     }
 
     /**
@@ -353,7 +350,7 @@ export class DetectorLite {
      */
     _applyPrune(extremas) {
         const nBuckets = NUM_BUCKETS_PER_DIMENSION;
-        const nFeatures = this.maxFeaturesPerBucket;
+        const nFeatures = MAX_FEATURES_PER_BUCKET;
 
         // Agrupar por buckets
         const buckets = [];

package/src/compiler/image-list.js

@@ -5,7 +5,7 @@ import { resize } from "./utils/images.js";
  * Un valor más bajo permite detectar imágenes más pequeñas pero aumenta el tiempo de procesamiento
  * @constant {number}
  */
-const MIN_IMAGE_PIXEL_SIZE = 40; // Increased to 40 to skip extremely small, noisy layers and reduce size
+const MIN_IMAGE_PIXEL_SIZE = 32;
 
 
 
@@ -21,8 +21,9 @@ const buildImageList = (inputImage) => {
   let c = minScale;
   while (true) {
     scaleList.push(c);
-    // Optimization: More aggressive step (pow(2, 0.75) approx 1.68) for smaller exports
-    c *= Math.pow(2.0, 0.75);
+    // Optimization: Paso balanceado (aprox 1.5)
+    // Mejor cobertura que 2.0, pero mucho más ligero que 1.41 o 1.26
+    c *= Math.pow(2.0, 0.6);
     if (c >= 0.95) {
       c = 1;
       break;

package/src/compiler/node-worker.js

@@ -71,22 +71,49 @@ parentPort.on('message', async (msg) => {
         const { targetImage, percentPerImage, basePercent } = msg;
 
         try {
-            const { buildImageList } = await import('./image-list.js');
-            const imageList = buildImageList(targetImage);
-            const percentPerScale = percentPerImage / imageList.length;
-            const keyframes = [];
+            // 🚀 MOONSHOT: Only run detector ONCE on full-res image.
+            // DetectorLite internally builds a pyramid (octaves 1.0, 0.5, 0.25, etc.)
+            const detector = new DetectorLite(targetImage.width, targetImage.height, {
+                useLSH: true
+            });
+
+            parentPort.postMessage({ type: 'progress', percent: basePercent + percentPerImage * 0.1 });
+
+            const { featurePoints: allPoints } = detector.detect(targetImage.data);
+
+            parentPort.postMessage({ type: 'progress', percent: basePercent + percentPerImage * 0.5 });
 
-            for (let i = 0; i < imageList.length; i++) {
-                const image = imageList[i];
+            // Group points by their scale (octave)
+            const scalesMap = new Map();
+            for (const p of allPoints) {
+                const octaveScale = p.scale;
+                let list = scalesMap.get(octaveScale);
+                if (!list) {
+                    list = [];
+                    scalesMap.set(octaveScale, list);
+                }
 
-                // 🚀 SMART BITRATE (VBR): Now handled internally by DetectorLite via 'scale'
-                const detector = new DetectorLite(image.width, image.height, {
-                    useLSH: true,
-                    maxOctaves: 1,
-                    scale: image.scale
+                // Coordinates in p are already full-res. 
+                // We need them relative to the scaled image for the keyframe.
+                list.push({
+                    ...p,
+                    x: p.x / octaveScale,
+                    y: p.y / octaveScale,
+                    scale: 1.0 // Keypoint scale is always 1.0 relative to its own keyframe image
                 });
-                const { featurePoints: ps } = detector.detect(image.data);
+            }
 
+            // Optional: Run another detector pass at an intermediate scale to improve coverage
+            // (e.g. at 1/1.41 ratio) if tracking robustness suffers. 
+            // For now, let's stick to octaves for MAXIMUM speed.
+
+            const keyframes = [];
+            const sortedScales = Array.from(scalesMap.keys()).sort((a, b) => a - b);
+
+            const percentPerScale = (percentPerImage * 0.4) / sortedScales.length;
+
+            for (const s of sortedScales) {
+                const ps = scalesMap.get(s);
                 const sortedPs = sortPoints(ps);
                 const maximaPoints = sortedPs.filter((p) => p.maxima);
                 const minimaPoints = sortedPs.filter((p) => !p.maxima);
@@ -99,14 +126,14 @@ parentPort.on('message', async (msg) => {
                     minimaPoints,
                     maximaPointsCluster,
                     minimaPointsCluster,
-                    width: image.width,
-                    height: image.height,
-                    scale: image.scale,
+                    width: Math.round(targetImage.width / s),
+                    height: Math.round(targetImage.height / s),
+                    scale: 1.0 / s, // keyframe.scale is relative to full target image
                 });
 
                 parentPort.postMessage({
                     type: 'progress',
-                    percent: basePercent + (i + 1) * percentPerScale
+                    percent: basePercent + percentPerImage * 0.6 + keyframes.length * percentPerScale
                 });
             }
 

package/src/compiler/offline-compiler.ts

@@ -110,8 +110,23 @@ export class OfflineCompiler {
     async _compileTarget(targetImages: any[], progressCallback: (p: number) => void) {
         if (isNode) await this._initNodeWorkers();
 
-        // Reverted: 'compile-all' combined task was causing issues with pyramid processing
-        // We go back to sequential match and track for reliability
+        if (this.workerPool) {
+            const progressMap = new Float32Array(targetImages.length);
+            const wrappedPromises = targetImages.map((targetImage: any, index: number) => {
+                return this.workerPool!.runTask({
+                    type: 'compile-all', // 🚀 MOONSHOT: Combined task
+                    targetImage,
+                    onProgress: (p: number) => {
+                        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
         const matchingResults = await this._compileMatch(targetImages, (p) => progressCallback(p * 0.5));
         const trackingResults = await this._compileTrack(targetImages, (p) => progressCallback(50 + p * 0.5));
 
@@ -155,12 +170,7 @@ export class OfflineCompiler {
             const keyframes = [];
 
             for (const image of imageList as any[]) {
-                // 🚀 SMART BITRATE (VBR): Internalized in DetectorLite
-                const detector = new DetectorLite(image.width, image.height, {
-                    useLSH: true,
-                    maxOctaves: 1,
-                    scale: image.scale
-                });
+                const detector = new DetectorLite(image.width, image.height, { useLSH: true });
                 const { featurePoints: ps } = detector.detect(image.data);
 
                 const maximaPoints = ps.filter((p: any) => p.maxima);

package/src/index.ts

@@ -1,7 +1,4 @@
-export { ARConfig, ARDataItem, mapDataToPropsConfig } from "./react/types.js";
-export * from "./react/use-ar.js";
-export * from "./react/TaptappAR.js";
+export * from "./react/types";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./compiler/controller.js";
 export { SimpleAR } from "./compiler/simple-ar.js";
-

package/src/react/types.ts

@@ -3,38 +3,33 @@ export interface ARConfig {
   targetImageSrc: string;
   targetTaarSrc: string;
   videoSrc: string;
-  overlaySrc: string; // Alias for preloading/compatibility
   videoWidth: number;
   videoHeight: number;
   scale: number;
-  overlayType: "video" | "image";
 }
 
 export interface ARDataItem {
   id: string;
-  type: "photos" | "videoNative" | "ar" | "imageOverlay";
+  type: "photos" | "videoNative" | "ar";
   images?: { image: string; fileId: string }[];
   url?: string;
-  fileId?: string;
   scale?: number;
   width?: number;
   height?: number;
 }
 
-export function mapDataToPropsConfig(data: ARDataItem[]): ARConfig {
+export function mapDataToPropsConfig(data: any[]): ARConfig {
   const photos = data.find((item) => item.type === "photos");
-  const overlay = data.find((item) => item.type === "videoNative" || item.type === "imageOverlay");
+  const video = data.find((item) => item.type === "videoNative");
   const ar = data.find((item) => item.type === "ar");
 
   return {
     cardId: photos?.id || "",
     targetImageSrc: photos?.images?.[0]?.image || "",
     targetTaarSrc: ar?.url || "",
-    videoSrc: overlay?.url || "",
-    overlaySrc: overlay?.url || "",
-    videoWidth: overlay?.width || 0,
-    videoHeight: overlay?.height || 0,
-    scale: overlay?.scale || 1,
-    overlayType: overlay?.type === "videoNative" ? "video" : "image",
+    videoSrc: video?.url || "",
+    videoWidth: video?.width || 0,
+    videoHeight: video?.height || 0,
+    scale: video?.scale || 1,
   };
 }