@srsergio/taptapp-ar 1.0.14 → 1.0.16

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

@@ -24,11 +24,16 @@ class CropDetector {
     }
     detectMoving(input) {
         const imageData = input;
-        // loop a few locations around center
-        const dx = this.lastRandomIndex % 3;
-        const dy = Math.floor(this.lastRandomIndex / 3);
-        let startY = Math.floor(this.height / 2 - this.cropSize + (dy * this.cropSize) / 2);
-        let startX = Math.floor(this.width / 2 - this.cropSize + (dx * this.cropSize) / 2);
+        // Expanded to 5x5 grid (25 positions) for better coverage
+        const gridSize = 5;
+        const dx = this.lastRandomIndex % gridSize;
+        const dy = Math.floor(this.lastRandomIndex / gridSize);
+        // Calculate offset from center, with overlap for better detection
+        const stepX = this.cropSize / 3;
+        const stepY = this.cropSize / 3;
+        let startY = Math.floor(this.height / 2 - this.cropSize / 2 + (dy - 2) * stepY);
+        let startX = Math.floor(this.width / 2 - this.cropSize / 2 + (dx - 2) * stepX);
+        // Clamp to valid bounds
         if (startX < 0)
             startX = 0;
         if (startY < 0)
@@ -37,7 +42,7 @@ class CropDetector {
             startX = this.width - this.cropSize - 1;
         if (startY >= this.height - this.cropSize)
             startY = this.height - this.cropSize - 1;
-        this.lastRandomIndex = (this.lastRandomIndex + 1) % 9;
+        this.lastRandomIndex = (this.lastRandomIndex + 1) % (gridSize * gridSize);
         const result = this._detect(imageData, startX, startY);
         return result;
     }

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

@@ -14,7 +14,7 @@ import { gpuCompute } from "../utils/gpu-compute.js";
 const PYRAMID_MIN_SIZE = 8;
 const PYRAMID_MAX_OCTAVE = 5;
 const NUM_BUCKETS_PER_DIMENSION = 8;
-const MAX_FEATURES_PER_BUCKET = 3; // Optimizado: Reducido de 5 a 3 para menor peso
+const MAX_FEATURES_PER_BUCKET = 10; // Aumentado de 3 a 10 para mayor densidad de puntos tracking
 const ORIENTATION_NUM_BINS = 36;
 const FREAK_EXPANSION_FACTOR = 7.0;
 // Global GPU mode flag
@@ -241,8 +241,8 @@ export class DetectorLite {
             for (let y = 1; y < height - 1; y++) {
                 for (let x = 1; x < width - 1; x++) {
                     const val = curr.data[y * width + x];
-                    if (Math.abs(val) < 0.015)
-                        continue; // Threshold
+                    if (Math.abs(val) < 0.01)
+                        continue; // Threshold reducido de 0.015 a 0.01 para mayor sensibilidad
                     let isMaxima = true;
                     let isMinima = true;
                     // Check 3x3 neighborhood in current scale

package/dist/compiler/simple-ar.js

@@ -152,11 +152,19 @@ class SimpleAR {
         // Matrix is column-major: [m0,m1,m2,m3, m4,m5,m6,m7, m8,m9,m10,m11, m12,m13,m14,m15]
         const tx = worldMatrix[12];
         const ty = worldMatrix[13];
-        const scale = Math.sqrt(worldMatrix[0] ** 2 + worldMatrix[1] ** 2);
+        const tz = worldMatrix[14];
+        // focal length (roughly 45 degrees FOV)
+        const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
+        // Standard perspective projection to screen space
+        // tx, ty, tz are in marker units relative to camera
+        const screenX = offsetX + (videoW / 2 + (tx * f / -tz)) * scaleX;
+        const screenY = offsetY + (videoH / 2 - (ty * f / -tz)) * scaleY;
+        // Calculate rotation and scale from the matrix
         const rotation = Math.atan2(worldMatrix[1], worldMatrix[0]);
-        // Convert from normalized coords to screen coords
-        const screenX = offsetX + (videoW / 2 + tx) * scaleX;
-        const screenY = offsetY + (videoH / 2 - ty) * scaleY;
+        const matrixScale = Math.sqrt(worldMatrix[0] ** 2 + worldMatrix[1] ** 2);
+        // Perspective scale: how much larger/smaller the object is based on distance (tz)
+        const perspectiveScale = (f / -tz) * scaleX;
+        const finalScale = matrixScale * perspectiveScale;
         // Apply transform
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
@@ -165,7 +173,7 @@ class SimpleAR {
         this.overlay.style.transform = `
       translate(${screenX}px, ${screenY}px)
       translate(-50%, -50%)
-      scale(${scale * scaleX * 0.01})
+      scale(${finalScale})
       rotate(${-rotation}rad)
     `;
     }

package/package.json

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

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

@@ -33,19 +33,25 @@ class CropDetector {
   detectMoving(input) {
     const imageData = input;
 
-    // loop a few locations around center
-    const dx = this.lastRandomIndex % 3;
-    const dy = Math.floor(this.lastRandomIndex / 3);
+    // Expanded to 5x5 grid (25 positions) for better coverage
+    const gridSize = 5;
+    const dx = this.lastRandomIndex % gridSize;
+    const dy = Math.floor(this.lastRandomIndex / gridSize);
 
-    let startY = Math.floor(this.height / 2 - this.cropSize + (dy * this.cropSize) / 2);
-    let startX = Math.floor(this.width / 2 - this.cropSize + (dx * this.cropSize) / 2);
+    // Calculate offset from center, with overlap for better detection
+    const stepX = this.cropSize / 3;
+    const stepY = this.cropSize / 3;
 
+    let startY = Math.floor(this.height / 2 - this.cropSize / 2 + (dy - 2) * stepY);
+    let startX = Math.floor(this.width / 2 - this.cropSize / 2 + (dx - 2) * stepX);
+
+    // Clamp to valid bounds
     if (startX < 0) startX = 0;
     if (startY < 0) startY = 0;
     if (startX >= this.width - this.cropSize) startX = this.width - this.cropSize - 1;
     if (startY >= this.height - this.cropSize) startY = this.height - this.cropSize - 1;
 
-    this.lastRandomIndex = (this.lastRandomIndex + 1) % 9;
+    this.lastRandomIndex = (this.lastRandomIndex + 1) % (gridSize * gridSize);
 
     const result = this._detect(imageData, startX, startY);
     return result;

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

@@ -16,7 +16,7 @@ import { gpuCompute } from "../utils/gpu-compute.js";
 const PYRAMID_MIN_SIZE = 8;
 const PYRAMID_MAX_OCTAVE = 5;
 const NUM_BUCKETS_PER_DIMENSION = 8;
-const MAX_FEATURES_PER_BUCKET = 3; // Optimizado: Reducido de 5 a 3 para menor peso
+const MAX_FEATURES_PER_BUCKET = 10; // Aumentado de 3 a 10 para mayor densidad de puntos tracking
 const ORIENTATION_NUM_BINS = 36;
 const FREAK_EXPANSION_FACTOR = 7.0;
 
@@ -282,7 +282,7 @@ export class DetectorLite {
                 for (let x = 1; x < width - 1; x++) {
                     const val = curr.data[y * width + x];
 
-                    if (Math.abs(val) < 0.015) continue; // Threshold
+                    if (Math.abs(val) < 0.01) continue; // Threshold reducido de 0.015 a 0.01 para mayor sensibilidad
 
                     let isMaxima = true;
                     let isMinima = true;

package/src/compiler/simple-ar.js

@@ -179,12 +179,23 @@ class SimpleAR {
         // Matrix is column-major: [m0,m1,m2,m3, m4,m5,m6,m7, m8,m9,m10,m11, m12,m13,m14,m15]
         const tx = worldMatrix[12];
         const ty = worldMatrix[13];
-        const scale = Math.sqrt(worldMatrix[0] ** 2 + worldMatrix[1] ** 2);
+        const tz = worldMatrix[14];
+
+        // focal length (roughly 45 degrees FOV)
+        const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
+
+        // Standard perspective projection to screen space
+        // tx, ty, tz are in marker units relative to camera
+        const screenX = offsetX + (videoW / 2 + (tx * f / -tz)) * scaleX;
+        const screenY = offsetY + (videoH / 2 - (ty * f / -tz)) * scaleY;
+
+        // Calculate rotation and scale from the matrix
         const rotation = Math.atan2(worldMatrix[1], worldMatrix[0]);
+        const matrixScale = Math.sqrt(worldMatrix[0] ** 2 + worldMatrix[1] ** 2);
 
-        // Convert from normalized coords to screen coords
-        const screenX = offsetX + (videoW / 2 + tx) * scaleX;
-        const screenY = offsetY + (videoH / 2 - ty) * scaleY;
+        // Perspective scale: how much larger/smaller the object is based on distance (tz)
+        const perspectiveScale = (f / -tz) * scaleX;
+        const finalScale = matrixScale * perspectiveScale;
 
         // Apply transform
         this.overlay.style.position = 'absolute';
@@ -194,7 +205,7 @@ class SimpleAR {
         this.overlay.style.transform = `
       translate(${screenX}px, ${screenY}px)
       translate(-50%, -50%)
-      scale(${scale * scaleX * 0.01})
+      scale(${finalScale})
       rotate(${-rotation}rad)
     `;
     }