@srsergio/taptapp-ar 1.0.18 → 1.0.20

package/dist/compiler/controller.js

@@ -13,9 +13,9 @@ catch (e) {
     // Fallback for tests or other environments
     ControllerWorker = null;
 }
-const DEFAULT_FILTER_CUTOFF = 0.001; // 1Hz. time period in milliseconds
-const DEFAULT_FILTER_BETA = 1000;
-const DEFAULT_WARMUP_TOLERANCE = 5;
+const DEFAULT_FILTER_CUTOFF = 0.1; // Menor cutoff para filtrar más ruidos cuando está quieto
+const DEFAULT_FILTER_BETA = 0.01; // Beta bajo para suavizar movimientos rápidos
+const DEFAULT_WARMUP_TOLERANCE = 8; // Más frames de calentamiento para asegurar estabilidad inicial
 const DEFAULT_MISS_TOLERANCE = 5;
 class Controller {
     constructor({ inputWidth, inputHeight, onUpdate = null, debugMode = false, maxTrack = 1, warmupTolerance = null, missTolerance = null, filterMinCF = null, filterBeta = null, worker = null, // Allow custom worker injection

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

@@ -11,10 +11,10 @@
  */
 import { FREAKPOINTS } from "./freak.js";
 import { gpuCompute } from "../utils/gpu-compute.js";
-const PYRAMID_MIN_SIZE = 8;
-const PYRAMID_MAX_OCTAVE = 5;
+const PYRAMID_MIN_SIZE = 4; // Reducido de 8 a 4 para exprimir al máximo la resolución
+// PYRAMID_MAX_OCTAVE ya no es necesario, el límite lo da PYRAMID_MIN_SIZE
 const NUM_BUCKETS_PER_DIMENSION = 8;
-const MAX_FEATURES_PER_BUCKET = 10; // Aumentado de 3 a 10 para mayor densidad de puntos tracking
+const MAX_FEATURES_PER_BUCKET = 12; // Ajustado para un equilibrio óptimo entre densidad y estabilidad
 const ORIENTATION_NUM_BINS = 36;
 const FREAK_EXPANSION_FACTOR = 7.0;
 // Global GPU mode flag
@@ -40,7 +40,8 @@ export class DetectorLite {
             w = Math.floor(w / 2);
             h = Math.floor(h / 2);
             numOctaves++;
-            if (numOctaves === PYRAMID_MAX_OCTAVE)
+            // Límite de seguridad razonable para evitar bucles infinitos en imágenes gigantes
+            if (numOctaves === 10)
                 break;
         }
         this.numOctaves = numOctaves;

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 = 100;
+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
@@ -42,7 +42,8 @@ const buildTrackingImageList = (inputImage) => {
     const minDimension = Math.min(inputImage.width, inputImage.height);
     const scaleList = [];
     const imageList = [];
-    // Solo generamos la versión de 128px para ahorrar espacio (antes generaba 256px y 128px)
+    // Generamos versiones de 256px y 128px para tracking robusto a diferentes distancias
+    scaleList.push(256.0 / minDimension);
     scaleList.push(128.0 / minDimension);
     for (let i = 0; i < scaleList.length; i++) {
         imageList.push(Object.assign(resize({ image: inputImage, ratio: scaleList[i] }), { scale: scaleList[i] }));

package/dist/compiler/simple-ar.js

@@ -157,20 +157,23 @@ class SimpleAR {
         // focal length (roughly 45 degrees FOV match Controller.js)
         const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
         // Perspective projection to screen space
-        const screenX = offsetX + (videoW / 2 + (tx * f / -tz)) * scaleX;
-        const screenY = offsetY + (videoH / 2 - (ty * f / -tz)) * scaleY;
+        // The estimator returns positive Z for depth, so we divide by tz directly.
+        const screenX = offsetX + (videoW / 2 + (tx * f / tz)) * scaleX;
+        const screenY = offsetY + (videoH / 2 - (ty * f / tz)) * scaleY;
         // Use the first row of mVT to determine rotation and base scale component
-        // Since marker coordinates are in pixels, mVT[0][0] and mVT[0][1] are unitless scale factors
         const rotation = Math.atan2(mVT[1][0], mVT[0][0]);
         const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
-        // Perspective scale: how much larger/smaller the object is based on distance (tz)
-        // Correct scale should make a marker-width sized element cover the marker.
-        const perspectiveScale = (f / -tz) * scaleX;
-        // The overlay element has its own width in CSS pixels (e.g. 200px)
-        const overlayCSSWidth = parseFloat(this.overlay.style.width) || 200;
-        // Final scale = (Target Width in Pixels on screen) / (Overlay CSS Width)
-        // matrixScale is usually ~1.0 if tracking is rigid
-        const finalScale = (matrixScale * markerW * perspectiveScale) / overlayCSSWidth;
+        // Perspective scale: 1 world pixel = (f/tz) screen pixels
+        const perspectiveScale = (f / tz) * scaleX;
+        // Detect overlay intrinsic size (videoWidth for video, naturalWidth for images)
+        const intrinsicWidth = (this.overlay instanceof HTMLVideoElement)
+            ? this.overlay.videoWidth
+            : (this.overlay instanceof HTMLImageElement ? this.overlay.naturalWidth : 0);
+        // Final scale = (Target Width in Pixels on screen) / (Overlay Intrinsic Width)
+        // If intrinsicWidth is 0 (not loaded), we fallback to a safe 1.0 scale to avoid Infinity
+        const finalScale = intrinsicWidth > 0
+            ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
+            : 1.0;
         // Apply transform
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.18",
+    "version": "1.0.20",
     "description": "AR Compiler for Node.js and Browser",
     "repository": {
         "type": "git",

package/src/compiler/controller.js

@@ -15,9 +15,11 @@ try {
   ControllerWorker = null;
 }
 
-const DEFAULT_FILTER_CUTOFF = 0.001; // 1Hz. time period in milliseconds
-const DEFAULT_FILTER_BETA = 1000;
-const DEFAULT_WARMUP_TOLERANCE = 5;
+const DEFAULT_FILTER_CUTOFF = 0.1; // Menor cutoff para filtrar más ruidos cuando está quieto
+const DEFAULT_FILTER_BETA = 0.01;  // Beta bajo para suavizar movimientos rápidos
+
+const DEFAULT_WARMUP_TOLERANCE = 8; // Más frames de calentamiento para asegurar estabilidad inicial
+
 const DEFAULT_MISS_TOLERANCE = 5;
 
 class Controller {

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

@@ -13,10 +13,14 @@
 import { FREAKPOINTS } from "./freak.js";
 import { gpuCompute } from "../utils/gpu-compute.js";
 
-const PYRAMID_MIN_SIZE = 8;
-const PYRAMID_MAX_OCTAVE = 5;
+const PYRAMID_MIN_SIZE = 4; // Reducido de 8 a 4 para exprimir al máximo la resolución
+// PYRAMID_MAX_OCTAVE ya no es necesario, el límite lo da PYRAMID_MIN_SIZE
+
+
 const NUM_BUCKETS_PER_DIMENSION = 8;
-const MAX_FEATURES_PER_BUCKET = 10; // Aumentado de 3 a 10 para mayor densidad de puntos tracking
+const MAX_FEATURES_PER_BUCKET = 12; // Ajustado para un equilibrio óptimo entre densidad y estabilidad
+
+
 const ORIENTATION_NUM_BINS = 36;
 const FREAK_EXPANSION_FACTOR = 7.0;
 
@@ -46,8 +50,10 @@ export class DetectorLite {
             w = Math.floor(w / 2);
             h = Math.floor(h / 2);
             numOctaves++;
-            if (numOctaves === PYRAMID_MAX_OCTAVE) break;
+            // Límite de seguridad razonable para evitar bucles infinitos en imágenes gigantes
+            if (numOctaves === 10) break;
         }
+
         this.numOctaves = numOctaves;
     }
 

package/src/compiler/image-list.js

@@ -5,7 +5,9 @@ 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 = 100;
+const MIN_IMAGE_PIXEL_SIZE = 32;
+
+
 
 /**
  * Construye una lista de imágenes con diferentes escalas para detección de características
@@ -49,7 +51,8 @@ const buildTrackingImageList = (inputImage) => {
   const minDimension = Math.min(inputImage.width, inputImage.height);
   const scaleList = [];
   const imageList = [];
-  // Solo generamos la versión de 128px para ahorrar espacio (antes generaba 256px y 128px)
+  // Generamos versiones de 256px y 128px para tracking robusto a diferentes distancias
+  scaleList.push(256.0 / minDimension);
   scaleList.push(128.0 / minDimension);
   for (let i = 0; i < scaleList.length; i++) {
     imageList.push(
@@ -59,4 +62,5 @@ const buildTrackingImageList = (inputImage) => {
   return imageList;
 };
 
+
 export { buildImageList, buildTrackingImageList };

package/src/compiler/simple-ar.js

@@ -187,24 +187,27 @@ class SimpleAR {
         const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
 
         // Perspective projection to screen space
-        const screenX = offsetX + (videoW / 2 + (tx * f / -tz)) * scaleX;
-        const screenY = offsetY + (videoH / 2 - (ty * f / -tz)) * scaleY;
+        // The estimator returns positive Z for depth, so we divide by tz directly.
+        const screenX = offsetX + (videoW / 2 + (tx * f / tz)) * scaleX;
+        const screenY = offsetY + (videoH / 2 - (ty * f / tz)) * scaleY;
 
         // Use the first row of mVT to determine rotation and base scale component
-        // Since marker coordinates are in pixels, mVT[0][0] and mVT[0][1] are unitless scale factors
         const rotation = Math.atan2(mVT[1][0], mVT[0][0]);
         const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
 
-        // Perspective scale: how much larger/smaller the object is based on distance (tz)
-        // Correct scale should make a marker-width sized element cover the marker.
-        const perspectiveScale = (f / -tz) * scaleX;
+        // Perspective scale: 1 world pixel = (f/tz) screen pixels
+        const perspectiveScale = (f / tz) * scaleX;
 
-        // The overlay element has its own width in CSS pixels (e.g. 200px)
-        const overlayCSSWidth = parseFloat(this.overlay.style.width) || 200;
+        // Detect overlay intrinsic size (videoWidth for video, naturalWidth for images)
+        const intrinsicWidth = (this.overlay instanceof HTMLVideoElement)
+            ? this.overlay.videoWidth
+            : (this.overlay instanceof HTMLImageElement ? this.overlay.naturalWidth : 0);
 
-        // Final scale = (Target Width in Pixels on screen) / (Overlay CSS Width)
-        // matrixScale is usually ~1.0 if tracking is rigid
-        const finalScale = (matrixScale * markerW * perspectiveScale) / overlayCSSWidth;
+        // Final scale = (Target Width in Pixels on screen) / (Overlay Intrinsic Width)
+        // If intrinsicWidth is 0 (not loaded), we fallback to a safe 1.0 scale to avoid Infinity
+        const finalScale = intrinsicWidth > 0
+            ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
+            : 1.0;
 
         // Apply transform
         this.overlay.style.position = 'absolute';
@@ -218,6 +221,7 @@ class SimpleAR {
       rotate(${-rotation}rad)
     `;
     }
+
 }
 
 export { SimpleAR };