@srsergio/taptapp-ar 1.0.21 → 1.0.23

package/dist/compiler/simple-ar.js

@@ -131,51 +131,70 @@ 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;
-        // Calculate display area considering object-fit: cover
+        // 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 videoAspect = videoW / videoH;
+        const bufferAspect = effectiveBufferW / effectiveBufferH;
         let displayW, displayH, offsetX, offsetY;
-        if (containerAspect > videoAspect) {
+        if (containerAspect > bufferAspect) {
             displayW = containerRect.width;
-            displayH = containerRect.width / videoAspect;
+            displayH = containerRect.width / bufferAspect;
             offsetX = 0;
             offsetY = (containerRect.height - displayH) / 2;
         }
         else {
             displayH = containerRect.height;
-            displayW = containerRect.height * videoAspect;
+            displayW = containerRect.height * bufferAspect;
             offsetX = (containerRect.width - displayW) / 2;
             offsetY = 0;
         }
-        const scaleX = displayW / videoW;
-        const scaleY = displayH / videoH;
-        // Project the center of the marker (markerW/2, markerH/2, 0) into camera space
+        const scaleX = displayW / effectiveBufferW;
+        const scaleY = displayH / effectiveBufferH;
+        // 3. Focal Length (MUST match Controller.js projection)
+        // Controller.js uses inputHeight / 2 as the vertical reference.
+        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 = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
-        // Perspective projection to screen space
-        // 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]);
+        // 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;
+        }
+        // 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; // Compensate for the 90deg rotation of the video element
+        }
+        // 7. Scale calculation
         const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
-        // 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
+        // Apply transform
         this.overlay.style.width = 'auto';
         this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';

package/package.json

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

package/src/compiler/simple-ar.js

@@ -155,63 +155,83 @@ 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;
 
-        // Calculate display area considering object-fit: cover
+        // 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 videoAspect = videoW / videoH;
+        const bufferAspect = effectiveBufferW / effectiveBufferH;
 
         let displayW, displayH, offsetX, offsetY;
-
-        if (containerAspect > videoAspect) {
+        if (containerAspect > bufferAspect) {
             displayW = containerRect.width;
-            displayH = containerRect.width / videoAspect;
+            displayH = containerRect.width / bufferAspect;
             offsetX = 0;
             offsetY = (containerRect.height - displayH) / 2;
         } else {
             displayH = containerRect.height;
-            displayW = containerRect.height * videoAspect;
+            displayW = containerRect.height * bufferAspect;
             offsetX = (containerRect.width - displayW) / 2;
             offsetY = 0;
         }
 
-        const scaleX = displayW / videoW;
-        const scaleY = displayH / videoH;
+        const scaleX = displayW / effectiveBufferW;
+        const scaleY = displayH / effectiveBufferH;
+
+        // 3. Focal Length (MUST match Controller.js projection)
+        // Controller.js uses inputHeight / 2 as the vertical reference.
+        const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
 
-        // Project the center of the marker (markerW/2, markerH/2, 0) into camera space
+        // 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 = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
+        // 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;
+        }
 
-        // Perspective projection to screen space
-        // 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;
+        // 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; // Compensate for the 90deg rotation of the video element
+        }
 
-        // Rotation calculation: atan2(y, x) of world X-axis in camera space
-        const rotation = Math.atan2(mVT[1][0], mVT[0][0]);
+        // 7. Scale calculation
         const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
-
-        // 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
+        // Apply transform
         this.overlay.style.width = 'auto';
         this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';