fixing Image3DOverlay scaling

interface/src/ui/overlays/Image3DOverlay.cpp

@@ -98,8 +98,8 @@ void Image3DOverlay::render(RenderArgs* args) {
     }
 
     float maxSize = glm::max(fromImage.width(), fromImage.height());
-    float x = fromImage.width() / (2.0f * maxSize);
-    float y = -fromImage.height() / (2.0f * maxSize);
+    float x = _keepAspectRatio ? fromImage.width() / (2.0f * maxSize) : 0.5f;
+    float y = _keepAspectRatio ? -fromImage.height() / (2.0f * maxSize) : -0.5f;
 
     glm::vec2 topLeft(-x, -y);
     glm::vec2 bottomRight(x, y);
@@ -176,6 +176,11 @@ void Image3DOverlay::setProperties(const QVariantMap& properties) {
         }
     }
 
+    auto keepAspectRatioValue = properties["keepAspectRatio"];
+    if (keepAspectRatioValue.isValid()) {
+        _keepAspectRatio = keepAspectRatioValue.toBool();
+    }
+
     auto emissiveValue = properties["emissive"];
     if (emissiveValue.isValid()) {
         _emissive = emissiveValue.toBool();
@@ -225,6 +230,8 @@ void Image3DOverlay::setProperties(const QVariantMap& properties) {
  *
  * @property {Vec2} dimensions=1,1 - The dimensions of the overlay. Synonyms: <code>scale</code>, <code>size</code>.
  *
+ * @property {bool} keepAspectRatio=true - overlays will maintain the aspect ratio when the subImage is applied.
+ *
  * @property {boolean} isFacingAvatar - If <code>true</code>, the overlay is rotated to face the user's camera about an axis
  *     parallel to the user's avatar's "up" direction.
  *
@@ -246,6 +253,9 @@ QVariant Image3DOverlay::getProperty(const QString& property) {
     if (property == "emissive") {
         return _emissive;
     }
+    if (property == "keepAspectRatio") {
+        return _keepAspectRatio;
+    }
 
     return Billboard3DOverlay::getProperty(property);
 }

interface/src/ui/overlays/Image3DOverlay.h

@@ -58,6 +58,7 @@ private:
     bool _textureIsLoaded { false };
     bool _alphaTexture { false };
     bool _emissive { false };
+    bool _keepAspectRatio { true };
 
     QRect _fromImage; // where from in the image to sample
     int _geometryId { 0 };

scripts/system/interstitialPage.js

@@ -16,10 +16,7 @@
     Script.include("/~/system/libraries/Xform.js");
     Script.include("/~/system/libraries/globals.js");
     var DEBUG = false;
-    var MIN_LOADING_PROGRESS = 3.6;
     var TOTAL_LOADING_PROGRESS = 3.7;
-    var FINAL_Y_DIMENSIONS = 2.8;
-    var BEGIN_Y_DIMENSIONS = 0.03;
     var EPSILON = 0.05;
     var TEXTURE_EPSILON = 0.01;
     var isVisible = false;
@@ -191,14 +188,15 @@
         localPosition: { x: 0.0, y: -0.86, z: 0.0 },
         url: Script.resourcesPath() + "images/loadingBar_progress.png",
         alpha: 1,
-        dimensions: { x: 3.8, y: 2.8 },
+        dimensions: { x: TOTAL_LOADING_PROGRESS, y: 0.3},
         visible: isVisible,
         emissive: true,
         ignoreRayIntersection: false,
         drawInFront: true,
         grabbable: false,
         localOrientation: Quat.fromVec3Degrees({ x: 0.0, y: 180.0, z: 0.0 }),
-        parentID: anchorOverlay
+        parentID: anchorOverlay,
+        keepAspectRatio: false
     });
 
     var loadingBarPlacard = Overlays.addOverlay("image3d", {
@@ -259,10 +257,11 @@
             target = 0;
             textureMemSizeStabilityCount = 0;
             textureMemSizeAtLastCheck = 0;
-            currentProgress = 0.1;
+            currentProgress = 0.0;
             connectionToDomainFailed = false;
             previousCameraMode = Camera.mode;
             Camera.mode = "first person";
+            updateProgressBar(0.0);
             timer = Script.setTimeout(update, 2000);
         }
     }
@@ -373,7 +372,7 @@
         }
     }
 
-    var currentProgress = 0.1;
+    var currentProgress = 0.0;
 
     function updateOverlays(physicsEnabled) {
 
@@ -396,7 +395,6 @@
         };
 
         var loadingBarProperties = {
-            dimensions: { x: 2.0, y: 2.8 },
             visible: !physicsEnabled
         };
 
@@ -458,19 +456,22 @@
     function updateProgressBar(progress) {
         var progressPercentage = progress / TOTAL_LOADING_PROGRESS;
         var subImageWidth = progressPercentage * LOADING_IMAGE_WIDTH_PIXELS;
-        var subImageWidthPercentage = subImageWidth / LOADING_IMAGE_WIDTH_PIXELS;
 
+        var start = TOTAL_LOADING_PROGRESS / 2;
+        var end = 0;
+        var xLocalPosition = (progressPercentage * (end - start)) + start;
         var properties = {
-            localPosition: { x: (TOTAL_LOADING_PROGRESS / 2) - (currentProgress / 2), y: -0.86, z: 0.0 },
+            localPosition: { x: xLocalPosition, y: -0.93, z: 0.0 },
             dimensions: {
-                x: currentProgress,
-                y: (subImageWidthPercentage * (FINAL_Y_DIMENSIONS - BEGIN_Y_DIMENSIONS)) + BEGIN_Y_DIMENSIONS
+                x: progress,
+                y: 0.3
             },
+            localOrientation: Quat.fromVec3Degrees({ x: 0.0, y: 180.0, z: 0.0 }),
             subImage: {
                 x: 0.0,
                 y: 0.0,
                 width: subImageWidth,
-                height: 90
+                height: 128
             }
         };
 
@@ -479,7 +480,7 @@
 
     var MAX_TEXTURE_STABILITY_COUNT = 30;
     var INTERVAL_PROGRESS = 0.04;
-    var INTERVAL_PROGRESS_PHYSICS_ENABLED = 0.2;
+    var INTERVAL_PROGRESS_PHYSICS_ENABLED = 0.09;
     function update() {
         var renderStats = Render.getConfig("Stats");
         var physicsEnabled = Window.isPhysicsEnabled();