@srsergio/taptapp-ar 1.0.19 → 1.0.21

package/dist/compiler/controller.js

@@ -13,9 +13,9 @@ catch (e) {
     // Fallback for tests or other environments
     ControllerWorker = null;
 }
-const DEFAULT_FILTER_CUTOFF = 0.5; // Mayor cutoff para respuesta más rápida
-const DEFAULT_FILTER_BETA = 0.01; // Mucho menor beta para reducir el "lag" y la tembladera
-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

@@ -14,7 +14,7 @@ import { gpuCompute } from "../utils/gpu-compute.js";
 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 = 15; // Aumentado para mayor densidad de puntos tracking y estabilidad
+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

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

@@ -15,10 +15,11 @@
  * await ar.start();
  */
 export class SimpleAR {
-    constructor({ container, targetSrc, overlay, onFound, onLost, onUpdate, cameraConfig, }: {
+    constructor({ container, targetSrc, overlay, scale, onFound, onLost, onUpdate, cameraConfig, }: {
         container: any;
         targetSrc: any;
         overlay: any;
+        scale?: number | undefined;
         onFound?: null | undefined;
         onLost?: null | undefined;
         onUpdate?: null | undefined;
@@ -31,6 +32,7 @@ export class SimpleAR {
     container: any;
     targetSrc: any;
     overlay: any;
+    scaleMultiplier: number;
     onFound: any;
     onLost: any;
     onUpdateCallback: any;

package/dist/compiler/simple-ar.js

@@ -16,10 +16,12 @@ import { Controller } from "./controller.js";
  * await ar.start();
  */
 class SimpleAR {
-    constructor({ container, targetSrc, overlay, onFound = null, onLost = null, onUpdate = null, cameraConfig = { facingMode: 'environment', width: 1280, height: 720 }, }) {
+    constructor({ container, targetSrc, overlay, scale = 1.0, // Multiplicador de escala personalizado
+    onFound = null, onLost = null, onUpdate = null, cameraConfig = { facingMode: 'environment', width: 1280, height: 720 }, }) {
         this.container = container;
         this.targetSrc = targetSrc;
         this.overlay = overlay;
+        this.scaleMultiplier = scale;
         this.onFound = onFound;
         this.onLost = onLost;
         this.onUpdateCallback = onUpdate;
@@ -150,28 +152,32 @@ class SimpleAR {
         const scaleX = displayW / videoW;
         const scaleY = displayH / videoH;
         // Project the center of the marker (markerW/2, markerH/2, 0) into camera space
-        // Marker coordinates are pixels from top-left.
         const tx = mVT[0][0] * (markerW / 2) + mVT[0][1] * (markerH / 2) + mVT[0][3];
         const ty = mVT[1][0] * (markerW / 2) + mVT[1][1] * (markerH / 2) + mVT[1][3];
         const tz = mVT[2][0] * (markerW / 2) + mVT[2][1] * (markerH / 2) + mVT[2][3];
         // 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;
-        // 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
+        // Using + for both since t is relative to principal point and Y is down in screen coords.
+        const screenX = offsetX + (videoW / 2 + (tx * f / tz)) * scaleX;
+        const screenY = offsetY + (videoH / 2 + (ty * f / tz)) * scaleY;
+        // Rotation calculation: atan2(y, x) of world X-axis in camera space
         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;
-        // Apply transform
+        // Perspective scale: 1 world pixel = (f/tz) screen pixels
+        const perspectiveScale = (f / tz) * scaleX;
+        // Detect overlay intrinsic size
+        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) * scaleMultiplier
+        const baseScale = intrinsicWidth > 0
+            ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
+            : 1.0;
+        const finalScale = baseScale * this.scaleMultiplier;
+        // Ensure element doesn't have CSS width that interferes with scaling
+        this.overlay.style.width = 'auto';
+        this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
@@ -180,7 +186,7 @@ class SimpleAR {
       translate(${screenX}px, ${screenY}px)
       translate(-50%, -50%)
       scale(${finalScale})
-      rotate(${-rotation}rad)
+      rotate(${rotation}rad)
     `;
     }
 }

package/package.json

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

package/src/compiler/controller.js

@@ -15,10 +15,11 @@ try {
   ControllerWorker = null;
 }
 
-const DEFAULT_FILTER_CUTOFF = 0.5; // Mayor cutoff para respuesta más rápida
-const DEFAULT_FILTER_BETA = 0.01;  // Mucho menor beta para reducir el "lag" y la tembladera
+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_WARMUP_TOLERANCE = 5;
 const DEFAULT_MISS_TOLERANCE = 5;
 
 class Controller {

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

@@ -18,7 +18,8 @@ const PYRAMID_MIN_SIZE = 4; // Reducido de 8 a 4 para exprimir al máximo la res
 
 
 const NUM_BUCKETS_PER_DIMENSION = 8;
-const MAX_FEATURES_PER_BUCKET = 15; // Aumentado para mayor densidad de puntos tracking y estabilidad
+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;

package/src/compiler/simple-ar.js

@@ -21,6 +21,7 @@ class SimpleAR {
         container,
         targetSrc,
         overlay,
+        scale = 1.0, // Multiplicador de escala personalizado
         onFound = null,
         onLost = null,
         onUpdate = null,
@@ -29,6 +30,7 @@ class SimpleAR {
         this.container = container;
         this.targetSrc = targetSrc;
         this.overlay = overlay;
+        this.scaleMultiplier = scale;
         this.onFound = onFound;
         this.onLost = onLost;
         this.onUpdateCallback = onUpdate;
@@ -178,7 +180,6 @@ class SimpleAR {
         const scaleY = displayH / videoH;
 
         // Project the center of the marker (markerW/2, markerH/2, 0) into camera space
-        // Marker coordinates are pixels from top-left.
         const tx = mVT[0][0] * (markerW / 2) + mVT[0][1] * (markerH / 2) + mVT[0][3];
         const ty = mVT[1][0] * (markerW / 2) + mVT[1][1] * (markerH / 2) + mVT[1][3];
         const tz = mVT[2][0] * (markerW / 2) + mVT[2][1] * (markerH / 2) + mVT[2][3];
@@ -187,26 +188,32 @@ 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;
+        // Using + for both since t is relative to principal point and Y is down in screen coords.
+        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
+        // Rotation calculation: atan2(y, x) of world X-axis in camera space
         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
+        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) * scaleMultiplier
+        const baseScale = intrinsicWidth > 0
+            ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
+            : 1.0;
 
-        // Apply transform
+        const finalScale = baseScale * this.scaleMultiplier;
+
+        // Ensure element doesn't have CSS width that interferes with scaling
+        this.overlay.style.width = 'auto';
+        this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
@@ -215,7 +222,7 @@ class SimpleAR {
       translate(${screenX}px, ${screenY}px)
       translate(-50%, -50%)
       scale(${finalScale})
-      rotate(${-rotation}rad)
+      rotate(${rotation}rad)
     `;
     }
 }