@mml-io/3d-web-client-core 0.0.0-experimental-2ed8f19-20241118 → 0.0.0-experimental-16d1b9c-20241218

package/build/camera/CameraManager.d.ts

@@ -5,6 +5,9 @@ export declare class CameraManager {
     private targetElement;
     private collisionsManager;
     readonly camera: PerspectiveCamera;
+    private flyCamera;
+    private orbitControls;
+    private isMainCameraActive;
     initialDistance: number;
     minDistance: number;
     maxDistance: number;
@@ -37,6 +40,8 @@ export declare class CameraManager {
     private lerpDuration;
     private activePointers;
     constructor(targetElement: HTMLElement, collisionsManager: CollisionsManager, initialPhi?: number, initialTheta?: number);
+    private createEventHandlers;
+    private disposeEventHandlers;
     private preventDefaultAndStopPropagation;
     setupTweakPane(tweakPane: TweakPane): void;
     private onPointerDown;
@@ -54,6 +59,8 @@ export declare class CameraManager {
     private easeOutExpo;
     updateAspect(aspect: number): void;
     recomputeFoV(immediately?: boolean): void;
+    toggleFlyCamera(): void;
+    get activeCamera(): PerspectiveCamera;
     update(): void;
     hasActiveInput(): boolean;
 }

package/build/index.d.ts

@@ -5,7 +5,7 @@ export * from "./character/url-position";
 export * from "./helpers/math-helpers";
 export { CharacterModelLoader } from "./character/CharacterModelLoader";
 export { CharacterState, AnimationState } from "./character/CharacterState";
-export { KeyInputManager } from "./input/KeyInputManager";
+export { Key, KeyInputManager } from "./input/KeyInputManager";
 export { VirtualJoystick } from "./input/VirtualJoystick";
 export { MMLCompositionScene } from "./mml/MMLCompositionScene";
 export { TweakPane } from "./tweakpane/TweakPane";
@@ -14,6 +14,6 @@ export { TimeManager } from "./time/TimeManager";
 export { CollisionsManager } from "./collisions/CollisionsManager";
 export { Sun } from "./sun/Sun";
 export { GroundPlane } from "./ground-plane/GroundPlane";
-export { LoadingScreen } from "./loading-screen/LoadingScreen";
+export { LoadingScreenConfig, LoadingScreen } from "./loading-screen/LoadingScreen";
 export { ErrorScreen } from "./error-screen/ErrorScreen";
 export { EnvironmentConfiguration } from "./rendering/composer";

package/build/index.js

@@ -1,5 +1,6 @@
 // src/camera/CameraManager.ts
 import { PerspectiveCamera, Raycaster, Vector3 as Vector32 } from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 // src/helpers/math-helpers.ts
 import { Quaternion, Vector3, Vector4 } from "three";
@@ -218,6 +219,7 @@ var CameraManager = class {
   constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
     this.targetElement = targetElement;
     this.collisionsManager = collisionsManager;
+    this.isMainCameraActive = true;
     this.initialDistance = camValues.initialDistance;
     this.minDistance = camValues.minDistance;
     this.maxDistance = camValues.maxDistance;
@@ -248,19 +250,36 @@ var CameraManager = class {
     this.targetPhi = this.phi;
     this.theta = initialTheta;
     this.targetTheta = this.theta;
-    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
+    const aspect = window.innerWidth / window.innerHeight;
+    this.camera = new PerspectiveCamera(this.fov, aspect, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
+    this.camera.name = "MainCamera";
+    this.flyCamera = new PerspectiveCamera(this.initialFOV, aspect, 0.1, 400);
+    this.flyCamera.name = "FlyCamera";
+    this.flyCamera.position.copy(this.camera.position);
+    this.flyCamera.name = "FlyCamera";
+    this.orbitControls = new OrbitControls(this.flyCamera, this.targetElement);
+    this.orbitControls.enableDamping = true;
+    this.orbitControls.dampingFactor = 0.05;
+    this.orbitControls.enablePan = true;
+    this.orbitControls.enabled = false;
     this.rayCaster = new Raycaster();
+    this.createEventHandlers();
+  }
+  createEventHandlers() {
     this.eventHandlerCollection = EventHandlerCollection.create([
-      [targetElement, "pointerdown", this.onPointerDown.bind(this)],
-      [targetElement, "gesturestart", this.preventDefaultAndStopPropagation.bind(this)],
+      [this.targetElement, "pointerdown", this.onPointerDown.bind(this)],
+      [this.targetElement, "gesturestart", this.preventDefaultAndStopPropagation.bind(this)],
+      [this.targetElement, "wheel", this.onMouseWheel.bind(this)],
+      [this.targetElement, "contextmenu", this.onContextMenu.bind(this)],
       [document, "pointerup", this.onPointerUp.bind(this)],
       [document, "pointercancel", this.onPointerUp.bind(this)],
-      [document, "pointermove", this.onPointerMove.bind(this)],
-      [targetElement, "wheel", this.onMouseWheel.bind(this)],
-      [targetElement, "contextmenu", this.onContextMenu.bind(this)]
+      [document, "pointermove", this.onPointerMove.bind(this)]
     ]);
   }
+  disposeEventHandlers() {
+    this.eventHandlerCollection.clear();
+  }
   preventDefaultAndStopPropagation(evt) {
     evt.preventDefault();
     evt.stopPropagation();
@@ -391,7 +410,8 @@ var CameraManager = class {
     }
   }
   dispose() {
-    this.eventHandlerCollection.clear();
+    this.disposeEventHandlers();
+    this.orbitControls.dispose();
     document.body.style.cursor = "";
   }
   easeOutExpo(x) {
@@ -399,6 +419,7 @@ var CameraManager = class {
   }
   updateAspect(aspect) {
     this.camera.aspect = aspect;
+    this.flyCamera.aspect = aspect;
   }
   recomputeFoV(immediately = false) {
     this.targetFOV = remap(
@@ -412,7 +433,31 @@ var CameraManager = class {
       this.fov = this.targetFOV;
     }
   }
+  toggleFlyCamera() {
+    this.isMainCameraActive = !this.isMainCameraActive;
+    this.orbitControls.enabled = !this.isMainCameraActive;
+    if (!this.isMainCameraActive) {
+      this.updateAspect(window.innerWidth / window.innerHeight);
+      this.flyCamera.position.copy(this.camera.position);
+      this.flyCamera.rotation.copy(this.camera.rotation);
+      const target = new Vector32();
+      this.camera.getWorldDirection(target);
+      target.multiplyScalar(this.targetDistance).add(this.camera.position);
+      this.orbitControls.target.copy(target);
+      this.orbitControls.update();
+      this.disposeEventHandlers();
+    } else {
+      this.createEventHandlers();
+    }
+  }
+  get activeCamera() {
+    return this.isMainCameraActive ? this.camera : this.flyCamera;
+  }
   update() {
+    if (!this.isMainCameraActive) {
+      this.orbitControls.update();
+      return;
+    }
     if (this.isLerping && this.lerpFactor < 1) {
       this.lerpFactor += 0.01 / this.lerpDuration;
       this.lerpFactor = Math.min(1, this.lerpFactor);
@@ -1666,17 +1711,17 @@ var LocalController = class {
     }
   }
   updateAzimuthalAngle() {
-    const camToModelDistance = this.config.cameraManager.camera.position.distanceTo(
+    const camToModelDistance = this.config.cameraManager.activeCamera.position.distanceTo(
       this.config.character.position
     );
     const isCameraFirstPerson = camToModelDistance < 2;
     if (isCameraFirstPerson) {
-      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.camera.quaternion);
+      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.config.cameraManager.activeCamera.quaternion);
       this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
     } else {
       this.azimuthalAngle = Math.atan2(
-        this.config.cameraManager.camera.position.x - this.config.character.position.x,
-        this.config.cameraManager.camera.position.z - this.config.character.position.z
+        this.config.cameraManager.activeCamera.position.x - this.config.character.position.x,
+        this.config.cameraManager.activeCamera.position.z - this.config.character.position.z
       );
     }
   }
@@ -2221,11 +2266,22 @@ var CharacterModelLoader = class {
 };
 
 // src/input/KeyInputManager.ts
+var Key = /* @__PURE__ */ ((Key2) => {
+  Key2["W"] = "w";
+  Key2["A"] = "a";
+  Key2["S"] = "s";
+  Key2["D"] = "d";
+  Key2["SHIFT"] = "shift";
+  Key2["SPACE"] = " ";
+  Key2["C"] = "c";
+  return Key2;
+})(Key || {});
 var KeyInputManager = class {
   constructor(shouldCaptureKeyPress = () => true) {
     this.shouldCaptureKeyPress = shouldCaptureKeyPress;
     this.keys = /* @__PURE__ */ new Map();
     this.eventHandlerCollection = new EventHandlerCollection();
+    this.bindings = /* @__PURE__ */ new Map();
     this.eventHandlerCollection.add(document, "keydown", this.onKeyDown.bind(this));
     this.eventHandlerCollection.add(document, "keyup", this.onKeyUp.bind(this));
     this.eventHandlerCollection.add(window, "blur", this.handleUnfocus.bind(this));
@@ -2247,10 +2303,16 @@ var KeyInputManager = class {
   }
   onKeyUp(event) {
     this.keys.set(event.key.toLowerCase(), false);
+    if (this.bindings.has(event.key.toLowerCase())) {
+      this.bindings.get(event.key.toLowerCase())();
+    }
   }
   isKeyPressed(key) {
     return this.keys.get(key) || false;
   }
+  createKeyBinding(key, callback) {
+    this.bindings.set(key, callback);
+  }
   isMovementKeyPressed() {
     return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
@@ -2287,6 +2349,7 @@ var KeyInputManager = class {
   }
   dispose() {
     this.eventHandlerCollection.clear();
+    this.bindings.clear();
   }
 };
 
@@ -5152,7 +5215,7 @@ var N8SSAOPass = class extends Pass {
 var Composer = class {
   constructor({
     scene,
-    camera,
+    cameraManager,
     spawnSun = false,
     environmentConfiguration
   }) {
@@ -5166,8 +5229,8 @@ var Composer = class {
     this.sun = null;
     var _a, _b;
     this.scene = scene;
+    this.cameraManager = cameraManager;
     this.postPostScene = new Scene4();
-    this.camera = camera;
     this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer4({
       powerPreference: "high-performance",
@@ -5187,14 +5250,14 @@ var Composer = class {
     this.effectComposer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType2
     });
-    this.renderPass = new RenderPass(this.scene, this.camera);
-    this.normalPass = new NormalPass2(this.scene, this.camera);
+    this.renderPass = new RenderPass(this.scene, this.cameraManager.activeCamera);
+    this.normalPass = new NormalPass2(this.scene, this.cameraManager.activeCamera);
     this.normalPass.enabled = ppssaoValues.enabled;
     this.normalTextureEffect = new TextureEffect({
       blendFunction: BlendFunction2.SKIP,
       texture: this.normalPass.texture
     });
-    this.ppssaoEffect = new SSAOEffect2(this.camera, this.normalPass.texture, {
+    this.ppssaoEffect = new SSAOEffect2(this.cameraManager.activeCamera, this.normalPass.texture, {
       blendFunction: ppssaoValues.blendFunction,
       distanceScaling: ppssaoValues.distanceScaling,
       depthAwareUpsampling: ppssaoValues.depthAwareUpsampling,
@@ -5212,7 +5275,11 @@ var Composer = class {
       worldProximityThreshold: ppssaoValues.worldProximityThreshold,
       worldProximityFalloff: ppssaoValues.worldProximityFalloff
     });
-    this.ppssaoPass = new EffectPass2(this.camera, this.ppssaoEffect, this.normalTextureEffect);
+    this.ppssaoPass = new EffectPass2(
+      this.cameraManager.activeCamera,
+      this.ppssaoEffect,
+      this.normalTextureEffect
+    );
     this.ppssaoPass.enabled = ppssaoValues.enabled;
     this.fxaaEffect = new FXAAEffect();
     if ((_a = environmentConfiguration == null ? void 0 : environmentConfiguration.postProcessing) == null ? void 0 : _a.bloomIntensity) {
@@ -5221,7 +5288,12 @@ var Composer = class {
     this.bloomEffect = new BloomEffect({
       intensity: extrasValues.bloom
     });
-    this.n8aopass = new N8SSAOPass(this.scene, this.camera, this.width, this.height);
+    this.n8aopass = new N8SSAOPass(
+      this.scene,
+      this.cameraManager.activeCamera,
+      this.width,
+      this.height
+    );
     this.n8aopass.configuration.aoRadius = n8ssaoValues.aoRadius;
     this.n8aopass.configuration.distanceFalloff = n8ssaoValues.distanceFalloff;
     this.n8aopass.configuration.intensity = n8ssaoValues.intensity;
@@ -5234,8 +5306,8 @@ var Composer = class {
     this.n8aopass.configuration.denoiseSamples = n8ssaoValues.denoiseSamples;
     this.n8aopass.configuration.denoiseRadius = n8ssaoValues.denoiseRadius;
     this.n8aopass.enabled = n8ssaoValues.enabled;
-    this.fxaaPass = new EffectPass2(this.camera, this.fxaaEffect);
-    this.bloomPass = new EffectPass2(this.camera, this.bloomEffect);
+    this.fxaaPass = new EffectPass2(this.cameraManager.activeCamera, this.fxaaEffect);
+    this.bloomPass = new EffectPass2(this.cameraManager.activeCamera, this.bloomEffect);
     this.toneMappingEffect = new ToneMappingEffect({
       mode: toneMappingValues.mode,
       resolution: toneMappingValues.resolution,
@@ -5250,7 +5322,7 @@ var Composer = class {
       edgeDetectionMode: EdgeDetectionMode.COLOR,
       predicationMode: PredicationMode.DEPTH
     });
-    this.toneMappingPass = new EffectPass2(this.camera, this.toneMappingEffect);
+    this.toneMappingPass = new EffectPass2(this.cameraManager.activeCamera, this.toneMappingEffect);
     this.toneMappingPass.enabled = rendererValues.toneMapping === 5 || rendererValues.toneMapping === 0 ? true : false;
     this.bcsPass = new ShaderPass(this.bcs, "tDiffuse");
     this.bcs.uniforms.brightness.value = bcsValues.brightness;
@@ -5259,7 +5331,7 @@ var Composer = class {
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
     this.gaussGrainEffect.uniforms.amount.value = extrasValues.grain;
     this.gaussGrainEffect.uniforms.alpha.value = 1;
-    this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
+    this.smaaPass = new EffectPass2(this.cameraManager.activeCamera, this.smaaEffect);
     this.effectComposer.addPass(this.renderPass);
     if (ppssaoValues.enabled) {
       this.effectComposer.addPass(this.normalPass);
@@ -5346,8 +5418,8 @@ var Composer = class {
     }
     this.width = parentElement.clientWidth;
     this.height = parentElement.clientHeight;
-    this.camera.aspect = this.width / this.height;
-    this.camera.updateProjectionMatrix();
+    this.cameraManager.activeCamera.aspect = this.width / this.height;
+    this.cameraManager.activeCamera.updateProjectionMatrix();
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.resolution.set(
       this.width * window.devicePixelRatio,
@@ -5376,11 +5448,12 @@ var Composer = class {
   }
   render(timeManager) {
     this.renderer.info.reset();
+    this.renderPass.mainCamera = this.cameraManager.activeCamera;
     this.normalPass.texture.needsUpdate = true;
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
     this.effectComposer.render();
     this.renderer.clearDepth();
-    this.renderer.render(this.postPostScene, this.camera);
+    this.renderer.render(this.postPostScene, this.cameraManager.activeCamera);
   }
   updateSkyboxRotation() {
     this.scene.backgroundRotation = new Euler3(
@@ -5914,57 +5987,132 @@ var GroundPlane = class extends Group6 {
 // src/loading-screen/LoadingScreen.ts
 import { LoadingProgressManager as LoadingProgressManager2 } from "mml-web";
 var LoadingScreen = class {
-  constructor(loadingProgressManager) {
+  constructor(loadingProgressManager, config) {
     this.loadingProgressManager = loadingProgressManager;
+    this.config = config;
+    this.overlayLayers = [];
     this.hasCompleted = false;
     this.disposed = false;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    const defaultBackground = "linear-gradient(45deg, #28284B 0%, #303056 100%)";
     this.element = document.createElement("div");
+    this.element.id = "loading-screen";
     this.element.style.position = "absolute";
     this.element.style.top = "0";
     this.element.style.left = "0";
     this.element.style.width = "100%";
     this.element.style.height = "100%";
-    this.element.style.background = "linear-gradient(45deg, #28284B 0%, #303056 100%)";
-    this.element.style.color = "white";
-    this.element.addEventListener("click", (event) => {
-      event.stopPropagation();
-    });
-    this.element.addEventListener("mousedown", (event) => {
-      event.stopPropagation();
-    });
-    this.element.addEventListener("mousemove", (event) => {
-      event.stopPropagation();
-    });
-    this.element.addEventListener("mouseup", (event) => {
-      event.stopPropagation();
-    });
-    this.loadingBannerText = document.createElement("div");
-    this.loadingBannerText.textContent = "Loading...";
-    this.loadingBannerText.style.position = "absolute";
-    this.loadingBannerText.style.display = "flex";
-    this.loadingBannerText.style.top = "0";
-    this.loadingBannerText.style.left = "0";
-    this.loadingBannerText.style.width = "100%";
-    this.loadingBannerText.style.height = "100%";
-    this.loadingBannerText.style.color = "white";
-    this.loadingBannerText.style.fontSize = "80px";
-    this.loadingBannerText.style.fontWeight = "bold";
-    this.loadingBannerText.style.fontFamily = "sans-serif";
-    this.loadingBannerText.style.alignItems = "center";
-    this.loadingBannerText.style.justifyContent = "center";
-    this.element.append(this.loadingBannerText);
+    this.element.style.backgroundColor = ((_a = this.config) == null ? void 0 : _a.background) || defaultBackground;
+    this.element.style.background = ((_b = this.config) == null ? void 0 : _b.background) || defaultBackground;
+    this.element.style.zIndex = "10001";
+    this.backgroundBlur = document.createElement("div");
+    this.backgroundBlur.id = "loading-screen-blur";
+    this.backgroundBlur.style.position = "absolute";
+    this.backgroundBlur.style.top = "0";
+    this.backgroundBlur.style.left = "0";
+    this.backgroundBlur.style.width = "100%";
+    this.backgroundBlur.style.height = "100%";
+    this.backgroundBlur.style.display = "flex";
+    if ((_c = this.config) == null ? void 0 : _c.backgroundBlurAmount) {
+      this.backgroundBlur.style.backdropFilter = `blur(${this.config.backgroundBlurAmount}px)`;
+    }
+    this.element.append(this.backgroundBlur);
+    if ((_d = this.config) == null ? void 0 : _d.backgroundImageUrl) {
+      this.element.style.backgroundImage = `url(${this.config.backgroundImageUrl})`;
+      this.element.style.backgroundPosition = "center";
+      this.element.style.backgroundSize = "cover";
+    }
+    if ((_e = this.config) == null ? void 0 : _e.overlayLayers) {
+      const logLoadError = (imageUrl) => {
+        console.error(`Failed to load overlay image: ${imageUrl}`);
+      };
+      for (const layer of this.config.overlayLayers) {
+        const overlayLayer = document.createElement("div");
+        overlayLayer.style.position = "absolute";
+        overlayLayer.style.background = `url(${layer.overlayImageUrl}) no-repeat`;
+        overlayLayer.style.backgroundSize = "contain";
+        const anchor = layer.overlayAnchor;
+        const offsetX = ((_f = layer.overlayOffset) == null ? void 0 : _f.x) || 0;
+        const offsetY = ((_g = layer.overlayOffset) == null ? void 0 : _g.y) || 0;
+        if (anchor.includes("top")) {
+          overlayLayer.style.top = `${offsetY}px`;
+        } else if (anchor.includes("bottom")) {
+          overlayLayer.style.bottom = `${offsetY}px`;
+        }
+        if (anchor.includes("left")) {
+          overlayLayer.style.left = `${offsetX}px`;
+        } else if (anchor.includes("right")) {
+          overlayLayer.style.right = `${offsetX}px`;
+        }
+        const image = new Image();
+        image.src = layer.overlayImageUrl;
+        image.onload = () => {
+          const naturalWidth = image.naturalWidth;
+          const naturalHeight = image.naturalHeight;
+          overlayLayer.style.width = `${naturalWidth}px`;
+          overlayLayer.style.height = `${naturalHeight}px`;
+        };
+        image.onerror = () => logLoadError(layer.overlayImageUrl);
+        this.overlayLayers.push(overlayLayer);
+        this.backgroundBlur.append(overlayLayer);
+      }
+    }
+    this.element.style.color = ((_h = this.config) == null ? void 0 : _h.color) || "white";
+    this.loadingBanner = document.createElement("div");
+    this.loadingBanner.style.position = "absolute";
+    this.loadingBanner.style.display = "flex";
+    this.loadingBanner.style.flexDirection = "column";
+    this.loadingBanner.style.left = "0";
+    this.loadingBanner.style.bottom = "0";
+    this.loadingBanner.style.padding = "0";
+    this.loadingBanner.style.width = "100%";
+    this.loadingBanner.style.justifyContent = "flex-end";
+    this.backgroundBlur.append(this.loadingBanner);
+    if ((_i = this.config) == null ? void 0 : _i.title) {
+      this.loadingBannerTitle = document.createElement("div");
+      this.loadingBannerTitle.textContent = this.config.title;
+      this.loadingBannerTitle.style.color = ((_j = this.config) == null ? void 0 : _j.color) || "white";
+      this.loadingBannerTitle.style.paddingLeft = "40px";
+      this.loadingBannerTitle.style.paddingRight = "40px";
+      this.loadingBannerTitle.style.fontSize = "42px";
+      this.loadingBannerTitle.style.fontWeight = "bold";
+      this.loadingBannerTitle.style.fontFamily = "sans-serif";
+      if ((_k = this.config) == null ? void 0 : _k.background) {
+        this.loadingBannerTitle.style.textShadow = `0px 0px 80px ${this.config.background}`;
+      }
+      this.loadingBanner.append(this.loadingBannerTitle);
+    }
+    if ((_l = this.config) == null ? void 0 : _l.subtitle) {
+      this.loadingBannerSubtitle = document.createElement("div");
+      this.loadingBannerSubtitle.style.color = ((_m = this.config) == null ? void 0 : _m.color) || "white";
+      this.loadingBannerSubtitle.style.paddingLeft = "40px";
+      this.loadingBannerSubtitle.style.paddingRight = "40px";
+      this.loadingBannerSubtitle.style.fontSize = "16px";
+      this.loadingBannerSubtitle.style.fontWeight = "400";
+      this.loadingBannerSubtitle.style.fontFamily = "sans-serif";
+      this.loadingBannerSubtitle.style.marginTop = "12px";
+      if ((_n = this.config) == null ? void 0 : _n.background) {
+        this.loadingBannerSubtitle.style.textShadow = `0px 0px 40px ${this.config.background}`;
+      }
+      this.loadingBannerSubtitle.textContent = this.config.subtitle;
+      this.loadingBanner.append(this.loadingBannerSubtitle);
+    }
     this.progressDebugViewHolder = document.createElement("div");
-    this.progressDebugViewHolder.style.display = "flex";
+    this.progressDebugViewHolder.style.display = "none";
     this.progressDebugViewHolder.style.position = "absolute";
-    this.progressDebugViewHolder.style.maxHeight = "calc(100% - 74px)";
-    this.progressDebugViewHolder.style.left = "0";
-    this.progressDebugViewHolder.style.bottom = "74px";
-    this.progressDebugViewHolder.style.width = "100%";
+    this.progressDebugViewHolder.style.width = "calc(100% - 80px)";
+    this.progressDebugViewHolder.style.maxHeight = "calc(100% - 120px)";
+    this.progressDebugViewHolder.style.left = "40px";
+    this.progressDebugViewHolder.style.bottom = "60px";
+    this.progressDebugViewHolder.style.alignItems = "center";
     this.progressDebugViewHolder.style.justifyContent = "center";
+    this.progressDebugViewHolder.style.zIndex = "10003";
     this.element.append(this.progressDebugViewHolder);
     this.progressDebugView = document.createElement("div");
-    this.progressDebugView.style.backgroundColor = "rgba(128, 128, 128, 0.25)";
+    this.progressDebugView.style.backgroundColor = "rgba(128, 128, 128, 0.5)";
     this.progressDebugView.style.border = "1px solid black";
+    this.progressDebugView.style.borderRadius = "7px";
+    this.progressDebugView.style.width = "100%";
     this.progressDebugView.style.maxWidth = "100%";
     this.progressDebugView.style.overflow = "auto";
     this.progressDebugViewHolder.append(this.progressDebugView);
@@ -5973,6 +6121,8 @@ var LoadingScreen = class {
     this.debugCheckbox.checked = false;
     this.debugCheckbox.addEventListener("change", () => {
       this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+      this.loadingBannerTitle.style.display = this.debugCheckbox.checked ? "none" : "flex";
+      this.loadingBannerSubtitle.style.display = this.debugCheckbox.checked ? "none" : "flex";
       if (this.hasCompleted) {
         this.dispose();
       }
@@ -5991,23 +6141,36 @@ var LoadingScreen = class {
     this.progressDebugView.append(this.progressDebugElement);
     this.progressBarHolder = document.createElement("div");
     this.progressBarHolder.style.display = "flex";
-    this.progressBarHolder.style.alignItems = "center";
-    this.progressBarHolder.style.justifyContent = "center";
-    this.progressBarHolder.style.position = "absolute";
-    this.progressBarHolder.style.bottom = "20px";
-    this.progressBarHolder.style.left = "0";
+    this.progressBarHolder.style.alignItems = "start";
+    this.progressBarHolder.style.justifyContent = "flex-start";
     this.progressBarHolder.style.width = "100%";
-    this.element.append(this.progressBarHolder);
+    this.progressBarHolder.style.marginLeft = "40px";
+    this.progressBarHolder.style.marginBottom = "40px";
+    this.progressBarHolder.style.cursor = "pointer";
+    this.progressBarHolder.style.marginTop = "24px";
+    this.loadingBanner.append(this.progressBarHolder);
     this.progressBarBackground = document.createElement("div");
     this.progressBarBackground.style.position = "relative";
-    this.progressBarBackground.style.width = "500px";
-    this.progressBarBackground.style.maxWidth = "80%";
-    this.progressBarBackground.style.backgroundColor = "gray";
-    this.progressBarBackground.style.height = "50px";
-    this.progressBarBackground.style.lineHeight = "50px";
-    this.progressBarBackground.style.borderRadius = "25px";
-    this.progressBarBackground.style.border = "2px solid white";
+    this.progressBarBackground.style.width = "80%";
+    this.progressBarBackground.style.maxWidth = "400px";
+    this.progressBarBackground.style.minWidth = "240px";
+    this.progressBarBackground.style.backgroundColor = "rgba(32,32,32, 0.25)";
+    this.progressBarBackground.style.backdropFilter = "blur(4px)";
+    this.progressBarBackground.style.height = "16px";
+    this.progressBarBackground.style.lineHeight = "16px";
+    this.progressBarBackground.style.borderRadius = "16px";
     this.progressBarBackground.style.overflow = "hidden";
+    this.progressBarBackground.addEventListener("click", () => {
+      const display = this.progressDebugViewHolder.style.display;
+      if (display === "none") {
+        this.progressDebugViewHolder.style.display = "flex";
+      } else {
+        this.progressDebugViewHolder.style.display = "none";
+        this.debugCheckbox.checked = false;
+        this.progressDebugElement.style.display = this.debugCheckbox.checked ? "block" : "none";
+        this.loadingBannerTitle.style.display = this.debugCheckbox.checked ? "none" : "flex";
+      }
+    });
     this.progressBarHolder.append(this.progressBarBackground);
     this.progressBar = document.createElement("div");
     this.progressBar.style.position = "absolute";
@@ -6015,7 +6178,8 @@ var LoadingScreen = class {
     this.progressBar.style.left = "0";
     this.progressBar.style.width = "0";
     this.progressBar.style.height = "100%";
-    this.progressBar.style.backgroundColor = "#0050a4";
+    this.progressBar.style.pointerEvents = "none";
+    this.progressBar.style.backgroundColor = ((_o = this.config) == null ? void 0 : _o.color) || "#0050a4";
     this.progressBarBackground.append(this.progressBar);
     this.loadingStatusText = document.createElement("div");
     this.loadingStatusText.style.position = "absolute";
@@ -6023,11 +6187,14 @@ var LoadingScreen = class {
     this.loadingStatusText.style.left = "0";
     this.loadingStatusText.style.width = "100%";
     this.loadingStatusText.style.height = "100%";
-    this.loadingStatusText.style.color = "white";
+    this.loadingStatusText.style.color = "rgba(200,200,200,0.9)";
+    this.loadingStatusText.style.fontSize = "10px";
     this.loadingStatusText.style.textAlign = "center";
     this.loadingStatusText.style.verticalAlign = "middle";
+    this.loadingStatusText.style.mixBlendMode = "difference";
     this.loadingStatusText.style.fontFamily = "sans-serif";
     this.loadingStatusText.style.fontWeight = "bold";
+    this.loadingStatusText.style.userSelect = "none";
     this.loadingStatusText.textContent = "Loading...";
     this.progressBarBackground.append(this.loadingStatusText);
     this.loadingCallback = () => {
@@ -6042,7 +6209,7 @@ var LoadingScreen = class {
         this.loadingStatusText.textContent = "Completed";
         this.progressBar.style.width = "100%";
       } else {
-        this.loadingStatusText.textContent = `Loading... ${(loadingRatio * 100).toFixed(2)}%`;
+        this.loadingStatusText.textContent = `${(loadingRatio * 100).toFixed(2)}%`;
         this.progressBar.style.width = `${loadingRatio * 100}%`;
       }
       this.progressDebugElement.textContent = LoadingProgressManager2.LoadingProgressSummaryToString(
@@ -6102,6 +6269,7 @@ export {
   Composer,
   ErrorScreen,
   GroundPlane,
+  Key,
   KeyInputManager,
   LoadingScreen,
   MMLCompositionScene,