@srsergio/taptapp-ar 1.0.22 → 1.0.24

package/dist/compiler/simple-ar.js

@@ -131,18 +131,16 @@ class SimpleAR {
             return;
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
-        // Video source dimensions (e.g., 1280x720)
-        let videoW = this.video.videoWidth;
-        let videoH = this.video.videoHeight;
-        // Detect if the video is effectively rotated (Portrait on Mobile)
-        // Browser displays video vertically but videoWidth > videoHeight
+        // 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;
-        // If rotated, the effective buffer dimensions are swapped
+        // Effective dimensions of the display buffer
         const effectiveBufferW = needsRotation ? videoH : videoW;
         const effectiveBufferH = needsRotation ? videoW : videoH;
-        // Calculate display area considering object-fit: cover
         const containerAspect = containerRect.width / containerRect.height;
         const bufferAspect = effectiveBufferW / effectiveBufferH;
         let displayW, displayH, offsetX, offsetY;
@@ -160,17 +158,19 @@ class SimpleAR {
         }
         const scaleX = displayW / effectiveBufferW;
         const scaleY = displayH / effectiveBufferH;
-        // Project marker center into camera space
+        // 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
         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 = effectiveBufferH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
-        // Normalized Device Coordinates (NDC) to Screen space
+        // 5. Map Camera coordinates to Screen coordinates
         let screenX, screenY;
         if (needsRotation) {
-            // Map camera X/Y to rotated screen Y/X
-            // Camera X -> Screen Y, Camera Y -> Screen -X
+            // 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;
         }
@@ -178,22 +178,23 @@ class SimpleAR {
             screenX = offsetX + (effectiveBufferW / 2 + (tx * f / tz)) * scaleX;
             screenY = offsetY + (effectiveBufferH / 2 + (ty * f / tz)) * scaleY;
         }
-        // Rotation: compensate for buffer 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;
+        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;
         const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
         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);
-        const baseScale = intrinsicWidth > 0
-            ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
-            : 1.0;
-        const finalScale = baseScale * this.scaleMultiplier;
-        // Apply transform
-        this.overlay.style.width = 'auto';
+        // Target pixel width on screen = markerW * matrixScale * perspectiveScale
+        const targetScreenWidth = markerW * matrixScale * perspectiveScale;
+        const finalScale = (targetScreenWidth / BASE_CSS_WIDTH) * this.scaleMultiplier;
+        // Apply
+        this.overlay.style.width = `${BASE_CSS_WIDTH}px`;
         this.overlay.style.height = 'auto';
         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.22",
+    "version": "1.0.24",
     "description": "AR Compiler for Node.js and Browser",
     "repository": {
         "type": "git",

package/src/compiler/simple-ar.js

@@ -156,26 +156,23 @@ class SimpleAR {
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
 
-        // Video source dimensions (e.g., 1280x720)
-        let videoW = this.video.videoWidth;
-        let videoH = this.video.videoHeight;
+        // 1. Raw Video Dimensions (Sensor Frame)
+        const videoW = this.video.videoWidth;
+        const videoH = this.video.videoHeight;
 
-        // Detect if the video is effectively rotated (Portrait on Mobile)
-        // Browser displays video vertically but videoWidth > 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;
 
-        // If rotated, the effective buffer dimensions are swapped
+        // Effective dimensions of the display buffer
         const effectiveBufferW = needsRotation ? videoH : videoW;
         const effectiveBufferH = needsRotation ? videoW : videoH;
 
-        // Calculate display area considering object-fit: cover
         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;
@@ -191,20 +188,21 @@ class SimpleAR {
         const scaleX = displayW / effectiveBufferW;
         const scaleY = displayH / effectiveBufferH;
 
-        // Project marker center into camera space
+        // 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
         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 = effectiveBufferH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
-
-        // Normalized Device Coordinates (NDC) to Screen space
+        // 5. Map Camera coordinates to Screen coordinates
         let screenX, screenY;
-
         if (needsRotation) {
-            // Map camera X/Y to rotated screen Y/X
-            // Camera X -> Screen Y, Camera Y -> Screen -X
+            // 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 {
@@ -212,26 +210,26 @@ class SimpleAR {
             screenY = offsetY + (effectiveBufferH / 2 + (ty * f / tz)) * scaleY;
         }
 
-        // Rotation: compensate for buffer 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;
+        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;
         const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
         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);
-
-        const baseScale = intrinsicWidth > 0
-            ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
-            : 1.0;
-
-        const finalScale = baseScale * this.scaleMultiplier;
+        // Target pixel width on screen = markerW * matrixScale * perspectiveScale
+        const targetScreenWidth = markerW * matrixScale * perspectiveScale;
+        const finalScale = (targetScreenWidth / BASE_CSS_WIDTH) * this.scaleMultiplier;
 
-        // Apply transform
-        this.overlay.style.width = 'auto';
+        // Apply
+        this.overlay.style.width = `${BASE_CSS_WIDTH}px`;
         this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';