From 0279eef3a4958896b403a562913fc9aa7841dedb Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Wed, 31 Oct 2018 10:13:32 -0700 Subject: [PATCH 1/4] improving interstitial loading bar --- scripts/system/interstitialPage.js | 83 ++++++++++++++++-------------- 1 file changed, 43 insertions(+), 40 deletions(-) diff --git a/scripts/system/interstitialPage.js b/scripts/system/interstitialPage.js index 670d21c7a7..34eee605ae 100644 --- a/scripts/system/interstitialPage.js +++ b/scripts/system/interstitialPage.js @@ -17,7 +17,8 @@ Script.include("/~/system/libraries/globals.js"); var DEBUG = false; var MIN_LOADING_PROGRESS = 3.6; - var TOTAL_LOADING_PROGRESS = 3.8; + var TOTAL_LOADING_PROGRESS = 3.7; + var FINAL_Y_DIMENSIONS = 2.8; var EPSILON = 0.05; var TEXTURE_EPSILON = 0.01; var isVisible = false; @@ -27,6 +28,7 @@ var MAX_LEFT_MARGIN = 1.9; var INNER_CIRCLE_WIDTH = 4.7; var DEFAULT_Z_OFFSET = 5.45; + var LOADING_IMAGE_WIDTH_PIXELS = 1024; var previousCameraMode = Camera.mode; var renderViewTask = Render.getConfig("RenderMainView"); @@ -182,12 +184,13 @@ parentID: anchorOverlay }); - var loadingBarPlacard = Overlays.addOverlay("image3d", { - name: "Loading-Bar-Placard", - localPosition: { x: 0.0, y: -0.99, z: 0.3 }, - url: Script.resourcesPath() + "images/loadingBar_placard.png", + + var loadingBarProgress = Overlays.addOverlay("image3d", { + name: "Loading-Bar-Progress", + localPosition: { x: 0.0, y: -0.86, z: 0.0 }, + url: Script.resourcesPath() + "images/loadingBar_progress.png", alpha: 1, - dimensions: { x: 4, y: 2.8 }, + dimensions: { x: 3.8, y: 2.8 }, visible: isVisible, emissive: true, ignoreRayIntersection: false, @@ -197,12 +200,12 @@ parentID: anchorOverlay }); - var loadingBarProgress = Overlays.addOverlay("image3d", { - name: "Loading-Bar-Progress", - localPosition: { x: 0.0, y: -0.90, z: 0.0 }, - url: Script.resourcesPath() + "images/loadingBar_progress.png", + var loadingBarPlacard = Overlays.addOverlay("image3d", { + name: "Loading-Bar-Placard", + localPosition: { x: 0.0, y: -0.99, z: 0.4 }, + url: Script.resourcesPath() + "images/loadingBar_placard.png", alpha: 1, - dimensions: { x: 3.8, y: 2.8 }, + dimensions: { x: 4, y: 2.8 }, visible: isVisible, emissive: true, ignoreRayIntersection: false, @@ -245,15 +248,7 @@ } function resetValues() { - var properties = { - localPosition: { x: 1.85, y: -0.935, z: 0.0 }, - dimensions: { - x: 0.1, - y: 2.8 - } - }; - - Overlays.editOverlay(loadingBarProgress, properties); + updateProgressBar(0.0); } function startInterstitialPage() { @@ -382,8 +377,8 @@ function updateOverlays(physicsEnabled) { if (isInterstitialOverlaysVisible !== !physicsEnabled && !physicsEnabled === true) { - // visible changed to true. - isInterstitialOverlaysVisible = !physicsEnabled; + // visible changed to true. + isInterstitialOverlaysVisible = !physicsEnabled; } var properties = { @@ -400,7 +395,7 @@ }; var loadingBarProperties = { - dimensions: { x: 0.0, y: 2.8 }, + dimensions: { x: 2.0, y: 2.8 }, visible: !physicsEnabled }; @@ -434,8 +429,8 @@ } if (isInterstitialOverlaysVisible !== !physicsEnabled && !physicsEnabled === false) { - // visible changed to false. - isInterstitialOverlaysVisible = !physicsEnabled; + // visible changed to false. + isInterstitialOverlaysVisible = !physicsEnabled; } } @@ -459,6 +454,27 @@ } } + function updateProgressBar(progress) { + var progressPercentage = progress / TOTAL_LOADING_PROGRESS; + var subImageWidth = progressPercentage * LOADING_IMAGE_WIDTH_PIXELS; + + var properties = { + localPosition: { x: (TOTAL_LOADING_PROGRESS / 2) - (currentProgress / 2), y: -0.86, z: 0.0 }, + dimensions: { + x: currentProgress, + y: FINAL_Y_DIMENSIONS * (subImageWidth / LOADING_IMAGE_WIDTH_PIXELS) + }, + subImage: { + x: 0.0, + y: 0.0, + width: subImageWidth, + height: 90 + } + }; + + Overlays.editOverlay(loadingBarProgress, properties); + } + var MAX_TEXTURE_STABILITY_COUNT = 30; var INTERVAL_PROGRESS = 0.04; function update() { @@ -503,15 +519,8 @@ } currentProgress = lerp(currentProgress, target, INTERVAL_PROGRESS); - var properties = { - localPosition: { x: (1.85 - (currentProgress / 2) - (-0.029 * (currentProgress / TOTAL_LOADING_PROGRESS))), y: -0.935, z: 0.0 }, - dimensions: { - x: currentProgress, - y: 2.8 - } - }; - Overlays.editOverlay(loadingBarProgress, properties); + updateProgressBar(currentProgress); if (errorConnectingToDomain) { updateOverlays(errorConnectingToDomain); @@ -542,17 +551,11 @@ } var whiteColor = { red: 255, green: 255, blue: 255 }; var greyColor = { red: 125, green: 125, blue: 125 }; + Overlays.mouseReleaseOnOverlay.connect(clickedOnOverlay); Overlays.hoverEnterOverlay.connect(onEnterOverlay); - Overlays.hoverLeaveOverlay.connect(onLeaveOverlay); - location.hostChanged.connect(domainChanged); - location.lookupResultsFinished.connect(function() { - Script.setTimeout(function() { - connectionToDomainFailed = !location.isConnected; - }, 1200); - }); Window.redirectErrorStateChanged.connect(toggleInterstitialPage); MyAvatar.sensorToWorldScaleChanged.connect(scaleInterstitialPage); From b3539b101b6a5be02d1ef435c0ed930ffb19ce53 Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Wed, 31 Oct 2018 11:04:30 -0700 Subject: [PATCH 2/4] faster loading bar interpolation once physics is enabled --- scripts/system/interstitialPage.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/scripts/system/interstitialPage.js b/scripts/system/interstitialPage.js index 34eee605ae..e6e8d3d6d6 100644 --- a/scripts/system/interstitialPage.js +++ b/scripts/system/interstitialPage.js @@ -19,6 +19,7 @@ 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; @@ -457,12 +458,13 @@ function updateProgressBar(progress) { var progressPercentage = progress / TOTAL_LOADING_PROGRESS; var subImageWidth = progressPercentage * LOADING_IMAGE_WIDTH_PIXELS; + var subImageWidthPercentage = subImageWidth / LOADING_IMAGE_WIDTH_PIXELS; var properties = { localPosition: { x: (TOTAL_LOADING_PROGRESS / 2) - (currentProgress / 2), y: -0.86, z: 0.0 }, dimensions: { x: currentProgress, - y: FINAL_Y_DIMENSIONS * (subImageWidth / LOADING_IMAGE_WIDTH_PIXELS) + y: (subImageWidthPercentage * (FINAL_Y_DIMENSIONS - BEGIN_Y_DIMENSIONS)) + BEGIN_Y_DIMENSIONS }, subImage: { x: 0.0, @@ -477,6 +479,7 @@ var MAX_TEXTURE_STABILITY_COUNT = 30; var INTERVAL_PROGRESS = 0.04; + var INTERVAL_PROGRESS_PHYSICS_ENABLED = 0.2; function update() { var renderStats = Render.getConfig("Stats"); var physicsEnabled = Window.isPhysicsEnabled(); @@ -518,7 +521,7 @@ target = TOTAL_LOADING_PROGRESS; } - currentProgress = lerp(currentProgress, target, INTERVAL_PROGRESS); + currentProgress = lerp(currentProgress, target, (physicsEnabled ? INTERVAL_PROGRESS_PHYSICS_ENABLED : INTERVAL_PROGRESS)); updateProgressBar(currentProgress); From a4b345bb583eca092e625dd0ef93c6cca6660bb3 Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Thu, 1 Nov 2018 09:25:46 -0700 Subject: [PATCH 3/4] fix interstitial domain loading due to bad texture url --- libraries/model-networking/src/model-networking/ModelCache.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libraries/model-networking/src/model-networking/ModelCache.cpp b/libraries/model-networking/src/model-networking/ModelCache.cpp index e96815d391..2686f1c9a8 100644 --- a/libraries/model-networking/src/model-networking/ModelCache.cpp +++ b/libraries/model-networking/src/model-networking/ModelCache.cpp @@ -551,7 +551,7 @@ graphics::TextureMapPointer NetworkMaterial::fetchTextureMap(const QUrl& baseUrl graphics::TextureMapPointer NetworkMaterial::fetchTextureMap(const QUrl& url, image::TextureUsage::Type type, MapChannel channel) { auto textureCache = DependencyManager::get(); - if (textureCache) { + if (textureCache && !url.isEmpty()) { auto texture = textureCache->getTexture(url, type); _textures[channel].texture = texture; From b33934ec467005517562025e3548a195741a7a31 Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Thu, 1 Nov 2018 15:43:56 -0700 Subject: [PATCH 4/4] fixing Image3DOverlay scaling --- interface/src/ui/overlays/Image3DOverlay.cpp | 14 ++++++++-- interface/src/ui/overlays/Image3DOverlay.h | 1 + scripts/system/interstitialPage.js | 29 ++++++++++---------- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/interface/src/ui/overlays/Image3DOverlay.cpp b/interface/src/ui/overlays/Image3DOverlay.cpp index 18da15f019..e24e3b3ed8 100644 --- a/interface/src/ui/overlays/Image3DOverlay.cpp +++ b/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: scale, size. * + * @property {bool} keepAspectRatio=true - overlays will maintain the aspect ratio when the subImage is applied. + * * @property {boolean} isFacingAvatar - If true, 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); } diff --git a/interface/src/ui/overlays/Image3DOverlay.h b/interface/src/ui/overlays/Image3DOverlay.h index 1ffa062d45..1000401abb 100644 --- a/interface/src/ui/overlays/Image3DOverlay.h +++ b/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 }; diff --git a/scripts/system/interstitialPage.js b/scripts/system/interstitialPage.js index e6e8d3d6d6..e2db032d8c 100644 --- a/scripts/system/interstitialPage.js +++ b/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();