@srsergio/taptapp-ar 1.0.24 → 1.0.26

package/dist/compiler/simple-ar.js

@@ -131,81 +131,66 @@ class SimpleAR {
             return;
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
-        // 1. Raw Video Dimensions (Sensor Frame)
         const videoW = this.video.videoWidth;
         const videoH = this.video.videoHeight;
-        // 2. Detect if screen orientation is different from video buffer
         const isPortrait = containerRect.height > containerRect.width;
         const isVideoLandscape = videoW > videoH;
         const needsRotation = isPortrait && isVideoLandscape;
-        // Effective dimensions of the display buffer
-        const effectiveBufferW = needsRotation ? videoH : videoW;
-        const effectiveBufferH = needsRotation ? videoW : videoH;
-        const containerAspect = containerRect.width / containerRect.height;
-        const bufferAspect = effectiveBufferW / effectiveBufferH;
-        let displayW, displayH, offsetX, offsetY;
-        if (containerAspect > bufferAspect) {
-            displayW = containerRect.width;
-            displayH = containerRect.width / bufferAspect;
-            offsetX = 0;
-            offsetY = (containerRect.height - displayH) / 2;
-        }
-        else {
-            displayH = containerRect.height;
-            displayW = containerRect.height * bufferAspect;
-            offsetX = (containerRect.width - displayW) / 2;
-            offsetY = 0;
-        }
-        const scaleX = displayW / effectiveBufferW;
-        const scaleY = displayH / effectiveBufferH;
-        // 3. Focal Length (MUST match Controller.js)
-        // Controller uses inputHeight / 2 (sensor's vertical dimension) as the baseline.
-        const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
-        // 4. Project marker center into camera space
+        // 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];
-        // 5. Map Camera coordinates to Screen coordinates
-        let screenX, screenY;
+        let screenX, screenY, rotation;
         if (needsRotation) {
-            // Mapping Sensor coordinates to Rotated Screen coordinates
-            // Sensor +X -> Screen +Y
-            // Sensor +Y -> Screen -X (relative to logical center)
-            screenX = offsetX + (effectiveBufferW / 2 + (ty * f / tz)) * scaleX;
-            screenY = offsetY + (effectiveBufferH / 2 - (tx * f / tz)) * scaleY;
+            // 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 {
-            screenX = offsetX + (effectiveBufferW / 2 + (tx * f / tz)) * scaleX;
-            screenY = offsetY + (effectiveBufferH / 2 + (ty * f / tz)) * scaleY;
+            // 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]);
         }
-        // 6. Rotation: sync with CSS transform
-        //atan2 gives angle of world X-axis in camera space.
-        let rotation = Math.atan2(mVT[1][0], mVT[0][0]);
-        if (needsRotation) {
-            rotation -= Math.PI / 2; // Mapping Sensor frame to Portrait Screen frame
-        }
-        // 7. Scale calculation (Robust Method)
-        // Instead of detecting intrinsic width (unstable), we force a base CSS width 
-        // and calculate the scale to match the marker's projected screen width.
-        const BASE_CSS_WIDTH = 1000;
+        // 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 perspectiveScale = (f / tz) * scaleX;
-        // Target pixel width on screen = markerW * matrixScale * perspectiveScale
-        const targetScreenWidth = markerW * matrixScale * perspectiveScale;
-        const finalScale = (targetScreenWidth / BASE_CSS_WIDTH) * this.scaleMultiplier;
+        const finalScale = (f / tz) * perspectiveScale * matrixScale * this.scaleMultiplier;
         // Apply
-        this.overlay.style.width = `${BASE_CSS_WIDTH}px`;
+        this.overlay.style.width = `${markerW}px`;
         this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
         this.overlay.style.top = '0';
         this.overlay.style.transform = `
-      translate(${screenX}px, ${screenY}px)
-      translate(-50%, -50%)
-      scale(${finalScale})
-      rotate(${rotation}rad)
-    `;
+            translate(${screenX}px, ${screenY}px)
+            translate(-50%, -50%)
+            scale(${finalScale})
+            rotate(${rotation}rad)
+        `;
     }
 }
 export { SimpleAR };

package/package.json

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

package/src/compiler/simple-ar.js

@@ -156,91 +156,77 @@ class SimpleAR {
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
 
-        // 1. Raw Video Dimensions (Sensor Frame)
         const videoW = this.video.videoWidth;
         const videoH = this.video.videoHeight;
 
-        // 2. Detect if screen orientation is different from video buffer
         const isPortrait = containerRect.height > containerRect.width;
         const isVideoLandscape = videoW > videoH;
         const needsRotation = isPortrait && isVideoLandscape;
 
-        // Effective dimensions of the display buffer
-        const effectiveBufferW = needsRotation ? videoH : videoW;
-        const effectiveBufferH = needsRotation ? videoW : videoH;
+        // Current display dimensions of the video (accounting for rotation)
+        const vW = needsRotation ? videoH : videoW;
+        const vH = needsRotation ? videoW : videoH;
 
-        const containerAspect = containerRect.width / containerRect.height;
-        const bufferAspect = effectiveBufferW / effectiveBufferH;
+        // Robust "object-fit: cover" scale calculation
+        const perspectiveScale = Math.max(containerRect.width / vW, containerRect.height / vH);
 
-        let displayW, displayH, offsetX, offsetY;
-        if (containerAspect > bufferAspect) {
-            displayW = containerRect.width;
-            displayH = containerRect.width / bufferAspect;
-            offsetX = 0;
-            offsetY = (containerRect.height - displayH) / 2;
-        } else {
-            displayH = containerRect.height;
-            displayW = containerRect.height * bufferAspect;
-            offsetX = (containerRect.width - displayW) / 2;
-            offsetY = 0;
-        }
-
-        const scaleX = displayW / effectiveBufferW;
-        const scaleY = displayH / effectiveBufferH;
+        const displayW = vW * perspectiveScale;
+        const displayH = vH * perspectiveScale;
+        const offsetX = (containerRect.width - displayW) / 2;
+        const offsetY = (containerRect.height - displayH) / 2;
 
-        // 3. Focal Length (MUST match Controller.js)
-        // Controller uses inputHeight / 2 (sensor's vertical dimension) as the baseline.
-        const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 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);
 
-        // 4. Project marker center into camera space
+        // 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];
 
-        // 5. Map Camera coordinates to Screen coordinates
-        let screenX, screenY;
-        if (needsRotation) {
-            // Mapping Sensor coordinates to Rotated Screen coordinates
-            // Sensor +X -> Screen +Y
-            // Sensor +Y -> Screen -X (relative to logical center)
-            screenX = offsetX + (effectiveBufferW / 2 + (ty * f / tz)) * scaleX;
-            screenY = offsetY + (effectiveBufferH / 2 - (tx * f / tz)) * scaleY;
-        } else {
-            screenX = offsetX + (effectiveBufferW / 2 + (tx * f / tz)) * scaleX;
-            screenY = offsetY + (effectiveBufferH / 2 + (ty * f / tz)) * scaleY;
-        }
+        let screenX, screenY, rotation;
 
-        // 6. Rotation: sync with CSS transform
-        //atan2 gives angle of world X-axis in camera space.
-        let rotation = Math.atan2(mVT[1][0], mVT[0][0]);
         if (needsRotation) {
-            rotation -= Math.PI / 2; // Mapping Sensor frame to Portrait Screen frame
+            // 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]);
         }
 
-        // 7. Scale calculation (Robust Method)
-        // Instead of detecting intrinsic width (unstable), we force a base CSS width 
-        // and calculate the scale to match the marker's projected screen width.
-        const BASE_CSS_WIDTH = 1000;
+        // 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 perspectiveScale = (f / tz) * scaleX;
-
-        // Target pixel width on screen = markerW * matrixScale * perspectiveScale
-        const targetScreenWidth = markerW * matrixScale * perspectiveScale;
-        const finalScale = (targetScreenWidth / BASE_CSS_WIDTH) * this.scaleMultiplier;
+        const finalScale = (f / tz) * perspectiveScale * matrixScale * this.scaleMultiplier;
 
         // Apply
-        this.overlay.style.width = `${BASE_CSS_WIDTH}px`;
+        this.overlay.style.width = `${markerW}px`;
         this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
         this.overlay.style.top = '0';
         this.overlay.style.transform = `
-      translate(${screenX}px, ${screenY}px)
-      translate(-50%, -50%)
-      scale(${finalScale})
-      rotate(${rotation}rad)
-    `;
+            translate(${screenX}px, ${screenY}px)
+            translate(-50%, -50%)
+            scale(${finalScale})
+            rotate(${rotation}rad)
+        `;
     }
 }