@srsergio/taptapp-ar 1.0.26 → 1.0.28

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

@@ -15,32 +15,49 @@
  * await ar.start();
  */
 export class SimpleAR {
+    /**
+     * @param {Object} options
+     * @param {HTMLElement} options.container
+     * @param {string|string[]} options.targetSrc
+     * @param {HTMLElement} options.overlay
+     * @param {number} [options.scale=1.0]
+     * @param {((data: {targetIndex: number}) => void | Promise<void>) | null} [options.onFound]
+     * @param {((data: {targetIndex: number}) => void | Promise<void>) | null} [options.onLost]
+     * @param {((data: {targetIndex: number, worldMatrix: number[]}) => void) | null} [options.onUpdate]
+     * @param {Object} [options.cameraConfig]
+     */
     constructor({ container, targetSrc, overlay, scale, onFound, onLost, onUpdate, cameraConfig, }: {
-        container: any;
-        targetSrc: any;
-        overlay: any;
+        container: HTMLElement;
+        targetSrc: string | string[];
+        overlay: HTMLElement;
         scale?: number | undefined;
-        onFound?: null | undefined;
-        onLost?: null | undefined;
-        onUpdate?: null | undefined;
-        cameraConfig?: {
-            facingMode: string;
-            width: number;
-            height: number;
-        } | undefined;
+        onFound?: ((data: {
+            targetIndex: number;
+        }) => void | Promise<void>) | null | undefined;
+        onLost?: ((data: {
+            targetIndex: number;
+        }) => void | Promise<void>) | null | undefined;
+        onUpdate?: ((data: {
+            targetIndex: number;
+            worldMatrix: number[];
+        }) => void) | null | undefined;
+        cameraConfig?: Object | undefined;
     });
-    container: any;
-    targetSrc: any;
-    overlay: any;
+    container: HTMLElement;
+    targetSrc: string | string[];
+    overlay: HTMLElement;
     scaleMultiplier: number;
-    onFound: any;
-    onLost: any;
-    onUpdateCallback: any;
-    cameraConfig: {
-        facingMode: string;
-        width: number;
-        height: number;
-    };
+    onFound: ((data: {
+        targetIndex: number;
+    }) => void | Promise<void>) | null;
+    onLost: ((data: {
+        targetIndex: number;
+    }) => void | Promise<void>) | null;
+    onUpdateCallback: ((data: {
+        targetIndex: number;
+        worldMatrix: number[];
+    }) => void) | null;
+    cameraConfig: Object;
     video: HTMLVideoElement | null;
     controller: Controller | null;
     isTracking: boolean;
@@ -59,5 +76,12 @@ export class SimpleAR {
     _initController(): void;
     _handleUpdate(data: any): void;
     _positionOverlay(mVT: any, targetIndex: any): void;
+    /**
+     * Projects a 3D marker-space point all the way to 2D screen CSS pixels
+     */
+    _projectToScreen(x: any, y: any, z: any, mVT: any, proj: any, videoW: any, videoH: any, containerRect: any, needsRotation: any): {
+        sx: number;
+        sy: number;
+    };
 }
 import { Controller } from "./controller.js";

package/dist/compiler/simple-ar.js

@@ -16,6 +16,17 @@ import { Controller } from "./controller.js";
  * await ar.start();
  */
 class SimpleAR {
+    /**
+     * @param {Object} options
+     * @param {HTMLElement} options.container
+     * @param {string|string[]} options.targetSrc
+     * @param {HTMLElement} options.overlay
+     * @param {number} [options.scale=1.0]
+     * @param {((data: {targetIndex: number}) => void | Promise<void>) | null} [options.onFound]
+     * @param {((data: {targetIndex: number}) => void | Promise<void>) | null} [options.onLost]
+     * @param {((data: {targetIndex: number, worldMatrix: number[]}) => void) | null} [options.onUpdate]
+     * @param {Object} [options.cameraConfig]
+     */
     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;
@@ -45,6 +56,7 @@ class SimpleAR {
         const targets = Array.isArray(this.targetSrc) ? this.targetSrc : [this.targetSrc];
         const result = await this.controller.addImageTargets(targets);
         this.markerDimensions = result.dimensions; // [ [w1, h1], [w2, h2], ... ]
+        console.log("Targets loaded. Dimensions:", this.markerDimensions);
         this.controller.processVideo(this.video);
         return this;
     }
@@ -133,54 +145,38 @@ class SimpleAR {
         const containerRect = this.container.getBoundingClientRect();
         const videoW = this.video.videoWidth;
         const videoH = this.video.videoHeight;
+        // 1. Determine orientation needs
         const isPortrait = containerRect.height > containerRect.width;
         const isVideoLandscape = videoW > videoH;
         const needsRotation = isPortrait && isVideoLandscape;
-        // Current display dimensions of the video (accounting for rotation)
-        const vW = needsRotation ? videoH : videoW;
-        const vH = needsRotation ? videoW : videoH;
-        // Robust "object-fit: cover" scale calculation
-        const perspectiveScale = Math.max(containerRect.width / vW, containerRect.height / vH);
-        const displayW = vW * perspectiveScale;
-        const displayH = vH * perspectiveScale;
-        const offsetX = (containerRect.width - displayW) / 2;
-        const offsetY = (containerRect.height - displayH) / 2;
-        // The tracker uses focal length based on height dimension in tracker space
-        const f = (videoH / 2) / Math.tan((45.0 * Math.PI / 180) / 2);
-        // Center of the marker in camera space (marker coordinates origin at 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];
-        let screenX, screenY, rotation;
-        if (needsRotation) {
-            // Mapping for 90deg clockwise rotation:
-            // Buffer X (0..videoW) -> Screen Y (0..displayH)
-            // Buffer Y (0..videoH) -> Screen X (displayW..0)
-            const bufferOffsetX = (tx * f / tz);
-            const bufferOffsetY = (ty * f / tz);
-            screenX = offsetX + (displayW / 2) - (bufferOffsetY * perspectiveScale);
-            screenY = offsetY + (displayH / 2) + (bufferOffsetX * perspectiveScale);
-            rotation = Math.atan2(mVT[1][0], mVT[0][0]) - Math.PI / 2;
+        // 2. Get intrinsic projection from controller
+        const proj = this.controller.projectionTransform;
+        // 3. Project 3 points to determine position, scale, and rotation
+        // Points in Marker Space: Center, Right-Edge, and Down-Edge
+        const pMid = this._projectToScreen(markerW / 2, markerH / 2, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
+        const pRight = this._projectToScreen(markerW / 2 + 100, markerH / 2, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
+        // 4. Calculate Screen Position
+        const screenX = pMid.sx;
+        const screenY = pMid.sy;
+        // 5. Calculate Rotation and Scale from the projected X-axis vector
+        const dx = pRight.sx - pMid.sx;
+        const dy = pRight.sy - pMid.sy;
+        const rotation = Math.atan2(dy, dx);
+        const pixelDistance100 = Math.sqrt(dx * dx + dy * dy);
+        // Since we projected 100 units, the scale for the whole markerW is:
+        const finalScale = (pixelDistance100 / 100) * this.scaleMultiplier;
+        // DEBUG LOGS
+        if (window.AR_DEBUG) {
+            console.log('--- AR POSITION DEBUG (Point Projection) ---');
+            console.log('Container:', containerRect.width.toFixed(0), 'x', containerRect.height.toFixed(0));
+            console.log('Video:', videoW, 'x', videoH, 'needsRotation:', needsRotation);
+            console.log('Screen Pos:', screenX.toFixed(1), screenY.toFixed(1));
+            console.log('Rotated Angle:', (rotation * 180 / Math.PI).toFixed(1), 'deg');
+            console.log('Final Scale:', finalScale.toFixed(4));
         }
-        else {
-            // Normal mapping:
-            // Buffer X -> Screen X
-            // Buffer Y -> Screen Y
-            const bufferOffsetX = (tx * f / tz);
-            const bufferOffsetY = (ty * f / tz);
-            screenX = offsetX + (displayW / 2) + (bufferOffsetX * perspectiveScale);
-            screenY = offsetY + (displayH / 2) + (bufferOffsetY * perspectiveScale);
-            rotation = Math.atan2(mVT[1][0], mVT[0][0]);
-        }
-        // Final Scale calculation:
-        // f/tz converts world units to buffer pixels
-        // perspectiveScale converts buffer pixels to screen pixels
-        // matrixScale handles the target's relative orientation in 2D
-        const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
-        const finalScale = (f / tz) * perspectiveScale * matrixScale * this.scaleMultiplier;
         // Apply
         this.overlay.style.width = `${markerW}px`;
-        this.overlay.style.height = 'auto';
+        this.overlay.style.height = 'auto'; // Maintain aspect ratio of the overlay asset
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
@@ -188,9 +184,40 @@ class SimpleAR {
         this.overlay.style.transform = `
             translate(${screenX}px, ${screenY}px)
             translate(-50%, -50%)
-            scale(${finalScale})
             rotate(${rotation}rad)
+            scale(${finalScale})
         `;
     }
+    /**
+     * Projects a 3D marker-space point all the way to 2D screen CSS pixels
+     */
+    _projectToScreen(x, y, z, mVT, proj, videoW, videoH, containerRect, needsRotation) {
+        // Marker -> Camera Space
+        const tx = mVT[0][0] * x + mVT[0][1] * y + mVT[0][2] * z + mVT[0][3];
+        const ty = mVT[1][0] * x + mVT[1][1] * y + mVT[1][2] * z + mVT[1][3];
+        const tz = mVT[2][0] * x + mVT[2][1] * y + mVT[2][2] * z + mVT[2][3];
+        // Camera -> Buffer Pixels (e.g. 1280x720)
+        const bx = (proj[0][0] * tx / tz) + proj[0][2];
+        const by = (proj[1][1] * ty / tz) + proj[1][2];
+        // Buffer -> Screen CSS Pixels
+        const vW = needsRotation ? videoH : videoW;
+        const vH = needsRotation ? videoW : videoH;
+        const perspectiveScale = Math.max(containerRect.width / vW, containerRect.height / vH);
+        const displayW = vW * perspectiveScale;
+        const displayH = vH * perspectiveScale;
+        const offsetX = (containerRect.width - displayW) / 2;
+        const offsetY = (containerRect.height - displayH) / 2;
+        let sx, sy;
+        if (needsRotation) {
+            // Mapping: Camera +X (Right) -> Screen +Y (Down), Camera +Y (Down) -> Screen -X (Left)
+            sx = offsetX + (displayW / 2) - (by - proj[1][2]) * perspectiveScale;
+            sy = offsetY + (displayH / 2) + (bx - proj[0][2]) * perspectiveScale;
+        }
+        else {
+            sx = offsetX + (displayW / 2) + (bx - proj[0][2]) * perspectiveScale;
+            sy = offsetY + (displayH / 2) + (by - proj[1][2]) * perspectiveScale;
+        }
+        return { sx, sy };
+    }
 }
 export { SimpleAR };

package/package.json

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

package/src/compiler/simple-ar.js

@@ -17,6 +17,17 @@ import { Controller } from "./controller.js";
  * await ar.start();
  */
 class SimpleAR {
+    /**
+     * @param {Object} options
+     * @param {HTMLElement} options.container
+     * @param {string|string[]} options.targetSrc
+     * @param {HTMLElement} options.overlay
+     * @param {number} [options.scale=1.0]
+     * @param {((data: {targetIndex: number}) => void | Promise<void>) | null} [options.onFound]
+     * @param {((data: {targetIndex: number}) => void | Promise<void>) | null} [options.onLost]
+     * @param {((data: {targetIndex: number, worldMatrix: number[]}) => void) | null} [options.onUpdate]
+     * @param {Object} [options.cameraConfig]
+     */
     constructor({
         container,
         targetSrc,
@@ -59,6 +70,7 @@ class SimpleAR {
         const targets = Array.isArray(this.targetSrc) ? this.targetSrc : [this.targetSrc];
         const result = await this.controller.addImageTargets(targets);
         this.markerDimensions = result.dimensions; // [ [w1, h1], [w2, h2], ... ]
+        console.log("Targets loaded. Dimensions:", this.markerDimensions);
 
         this.controller.processVideo(this.video);
 
@@ -155,68 +167,49 @@ class SimpleAR {
 
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
-
         const videoW = this.video.videoWidth;
         const videoH = this.video.videoHeight;
 
+        // 1. Determine orientation needs
         const isPortrait = containerRect.height > containerRect.width;
         const isVideoLandscape = videoW > videoH;
         const needsRotation = isPortrait && isVideoLandscape;
 
-        // Current display dimensions of the video (accounting for rotation)
-        const vW = needsRotation ? videoH : videoW;
-        const vH = needsRotation ? videoW : videoH;
+        // 2. Get intrinsic projection from controller
+        const proj = this.controller.projectionTransform;
 
-        // Robust "object-fit: cover" scale calculation
-        const perspectiveScale = Math.max(containerRect.width / vW, containerRect.height / vH);
+        // 3. Project 3 points to determine position, scale, and rotation
+        // Points in Marker Space: Center, Right-Edge, and Down-Edge
+        const pMid = this._projectToScreen(markerW / 2, markerH / 2, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
+        const pRight = this._projectToScreen(markerW / 2 + 100, markerH / 2, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
 
-        const displayW = vW * perspectiveScale;
-        const displayH = vH * perspectiveScale;
-        const offsetX = (containerRect.width - displayW) / 2;
-        const offsetY = (containerRect.height - displayH) / 2;
+        // 4. Calculate Screen Position
+        const screenX = pMid.sx;
+        const screenY = pMid.sy;
 
-        // The tracker uses focal length based on height dimension in tracker space
-        const f = (videoH / 2) / Math.tan((45.0 * Math.PI / 180) / 2);
+        // 5. Calculate Rotation and Scale from the projected X-axis vector
+        const dx = pRight.sx - pMid.sx;
+        const dy = pRight.sy - pMid.sy;
 
-        // Center of the marker in camera space (marker coordinates origin at 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];
+        const rotation = Math.atan2(dy, dx);
+        const pixelDistance100 = Math.sqrt(dx * dx + dy * dy);
 
-        let screenX, screenY, rotation;
+        // Since we projected 100 units, the scale for the whole markerW is:
+        const finalScale = (pixelDistance100 / 100) * this.scaleMultiplier;
 
-        if (needsRotation) {
-            // Mapping for 90deg clockwise rotation:
-            // Buffer X (0..videoW) -> Screen Y (0..displayH)
-            // Buffer Y (0..videoH) -> Screen X (displayW..0)
-            const bufferOffsetX = (tx * f / tz);
-            const bufferOffsetY = (ty * f / tz);
-
-            screenX = offsetX + (displayW / 2) - (bufferOffsetY * perspectiveScale);
-            screenY = offsetY + (displayH / 2) + (bufferOffsetX * perspectiveScale);
-            rotation = Math.atan2(mVT[1][0], mVT[0][0]) - Math.PI / 2;
-        } else {
-            // Normal mapping:
-            // Buffer X -> Screen X
-            // Buffer Y -> Screen Y
-            const bufferOffsetX = (tx * f / tz);
-            const bufferOffsetY = (ty * f / tz);
-
-            screenX = offsetX + (displayW / 2) + (bufferOffsetX * perspectiveScale);
-            screenY = offsetY + (displayH / 2) + (bufferOffsetY * perspectiveScale);
-            rotation = Math.atan2(mVT[1][0], mVT[0][0]);
+        // DEBUG LOGS
+        if (window.AR_DEBUG) {
+            console.log('--- AR POSITION DEBUG (Point Projection) ---');
+            console.log('Container:', containerRect.width.toFixed(0), 'x', containerRect.height.toFixed(0));
+            console.log('Video:', videoW, 'x', videoH, 'needsRotation:', needsRotation);
+            console.log('Screen Pos:', screenX.toFixed(1), screenY.toFixed(1));
+            console.log('Rotated Angle:', (rotation * 180 / Math.PI).toFixed(1), 'deg');
+            console.log('Final Scale:', finalScale.toFixed(4));
         }
 
-        // Final Scale calculation:
-        // f/tz converts world units to buffer pixels
-        // perspectiveScale converts buffer pixels to screen pixels
-        // matrixScale handles the target's relative orientation in 2D
-        const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
-        const finalScale = (f / tz) * perspectiveScale * matrixScale * this.scaleMultiplier;
-
         // Apply
         this.overlay.style.width = `${markerW}px`;
-        this.overlay.style.height = 'auto';
+        this.overlay.style.height = 'auto'; // Maintain aspect ratio of the overlay asset
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
@@ -224,10 +217,46 @@ class SimpleAR {
         this.overlay.style.transform = `
             translate(${screenX}px, ${screenY}px)
             translate(-50%, -50%)
-            scale(${finalScale})
             rotate(${rotation}rad)
+            scale(${finalScale})
         `;
     }
+
+    /**
+     * Projects a 3D marker-space point all the way to 2D screen CSS pixels
+     */
+    _projectToScreen(x, y, z, mVT, proj, videoW, videoH, containerRect, needsRotation) {
+        // Marker -> Camera Space
+        const tx = mVT[0][0] * x + mVT[0][1] * y + mVT[0][2] * z + mVT[0][3];
+        const ty = mVT[1][0] * x + mVT[1][1] * y + mVT[1][2] * z + mVT[1][3];
+        const tz = mVT[2][0] * x + mVT[2][1] * y + mVT[2][2] * z + mVT[2][3];
+
+        // Camera -> Buffer Pixels (e.g. 1280x720)
+        const bx = (proj[0][0] * tx / tz) + proj[0][2];
+        const by = (proj[1][1] * ty / tz) + proj[1][2];
+
+        // Buffer -> Screen CSS Pixels
+        const vW = needsRotation ? videoH : videoW;
+        const vH = needsRotation ? videoW : videoH;
+        const perspectiveScale = Math.max(containerRect.width / vW, containerRect.height / vH);
+
+        const displayW = vW * perspectiveScale;
+        const displayH = vH * perspectiveScale;
+        const offsetX = (containerRect.width - displayW) / 2;
+        const offsetY = (containerRect.height - displayH) / 2;
+
+        let sx, sy;
+        if (needsRotation) {
+            // Mapping: Camera +X (Right) -> Screen +Y (Down), Camera +Y (Down) -> Screen -X (Left)
+            sx = offsetX + (displayW / 2) - (by - proj[1][2]) * perspectiveScale;
+            sy = offsetY + (displayH / 2) + (bx - proj[0][2]) * perspectiveScale;
+        } else {
+            sx = offsetX + (displayW / 2) + (bx - proj[0][2]) * perspectiveScale;
+            sy = offsetY + (displayH / 2) + (by - proj[1][2]) * perspectiveScale;
+        }
+
+        return { sx, sy };
+    }
 }
 
 export { SimpleAR };