@mml-io/3d-web-client-core 0.19.0 → 0.20.0

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();
   }
 };
 
@@ -2487,11 +2550,15 @@ var VirtualJoystick = class _VirtualJoystick {
 // src/mml/MMLCompositionScene.ts
 import {
   InteractionManager,
-  MMLClickTrigger,
-  PromptManager,
   LoadingProgressManager,
-  MMLDocumentTimeManager
-} from "mml-web";
+  MMLDocumentTimeManager,
+  PromptManager
+} from "@mml-io/mml-web";
+import {
+  ThreeJSClickTrigger,
+  ThreeJSGraphicsInterface,
+  ThreeJSInteractionAdapter
+} from "@mml-io/mml-web-threejs";
 import { Group as Group3 } from "three";
 var MMLCompositionScene = class {
   constructor(config) {
@@ -2499,21 +2566,55 @@ var MMLCompositionScene = class {
     this.chatProbes = /* @__PURE__ */ new Set();
     this.group = new Group3();
     this.promptManager = PromptManager.init(this.config.targetElement);
+    const graphicsAdapter = {
+      collisionType: null,
+      containerType: null,
+      getGraphicsAdapterFactory: () => {
+        return ThreeJSGraphicsInterface;
+      },
+      getRootContainer: () => {
+        return this.group;
+      },
+      interactionShouldShowDistance(interaction) {
+        return ThreeJSInteractionAdapter.interactionShouldShowDistance(
+          interaction,
+          this.config.camera,
+          this.config.scene
+        );
+      },
+      dispose() {
+      },
+      getAudioListener: () => {
+        return config.audioListener;
+      },
+      getCamera: () => {
+        return config.camera;
+      },
+      getThreeScene: () => {
+        return config.scene;
+      },
+      getUserPositionAndRotation: () => {
+        return this.config.getUserPositionAndRotation();
+      }
+    };
     const { interactionListener, interactionManager } = InteractionManager.init(
       this.config.targetElement,
-      this.config.camera,
-      this.config.scene
+      (interaction) => {
+        return graphicsAdapter.interactionShouldShowDistance(interaction);
+      }
     );
     this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.loadingProgressManager = new LoadingProgressManager();
     this.documentTimeManager = new MMLDocumentTimeManager();
     this.mmlScene = {
-      getAudioListener: () => this.config.audioListener,
-      getRenderer: () => this.config.renderer,
-      getThreeScene: () => this.config.scene,
+      getGraphicsAdapter() {
+        return graphicsAdapter;
+      },
+      hasGraphicsAdapter() {
+        return true;
+      },
       getRootContainer: () => this.group,
-      getCamera: () => this.config.camera,
       addCollider: (object, mElement) => {
         this.config.collisionsManager.addMeshesGroup(object, mElement);
       },
@@ -2551,7 +2652,11 @@ var MMLCompositionScene = class {
         return this.loadingProgressManager;
       }
     };
-    this.clickTrigger = MMLClickTrigger.init(this.config.targetElement, this.mmlScene);
+    this.clickTrigger = ThreeJSClickTrigger.init(
+      this.config.targetElement,
+      this.group,
+      this.config.camera
+    );
   }
   onChatMessage(message) {
     for (const chatProbe of this.chatProbes) {
@@ -5152,7 +5257,7 @@ var N8SSAOPass = class extends Pass {
 var Composer = class {
   constructor({
     scene,
-    camera,
+    cameraManager,
     spawnSun = false,
     environmentConfiguration
   }) {
@@ -5166,8 +5271,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 +5292,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 +5317,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 +5330,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 +5348,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 +5364,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 +5373,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 +5460,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 +5490,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(
@@ -5522,11 +5637,13 @@ var Composer = class {
     }
     if (typeof ((_e = (_d = this.environmentConfiguration) == null ? void 0 : _d.sun) == null ? void 0 : _e.azimuthalAngle) === "number") {
       sunValues.sunPosition.sunAzimuthalAngle = this.environmentConfiguration.sun.azimuthalAngle;
-      (_f = this.sun) == null ? void 0 : _f.setAzimuthalAngle(this.environmentConfiguration.sun.azimuthalAngle);
+      (_f = this.sun) == null ? void 0 : _f.setAzimuthalAngle(
+        this.environmentConfiguration.sun.azimuthalAngle * (Math.PI / 180)
+      );
     }
     if (typeof ((_h = (_g = this.environmentConfiguration) == null ? void 0 : _g.sun) == null ? void 0 : _h.polarAngle) === "number") {
       sunValues.sunPosition.sunPolarAngle = this.environmentConfiguration.sun.polarAngle;
-      (_i = this.sun) == null ? void 0 : _i.setPolarAngle(this.environmentConfiguration.sun.polarAngle);
+      (_i = this.sun) == null ? void 0 : _i.setPolarAngle(this.environmentConfiguration.sun.polarAngle * (Math.PI / 180));
     }
   }
   updateSkyboxAndEnvValues() {
@@ -5625,39 +5742,73 @@ var TimeManager = class {
 };
 
 // src/collisions/CollisionsManager.ts
-import {
-  getRelativePositionAndRotationRelativeToObject,
-  MMLCollisionTrigger
-} from "mml-web";
+import { MMLCollisionTrigger } from "@mml-io/mml-web";
 import {
   Box3,
   Color as Color8,
   DoubleSide,
-  Euler as Euler4,
+  Euler as Euler5,
   Group as Group5,
   Line3 as Line32,
-  Matrix4 as Matrix46,
+  Matrix4 as Matrix47,
   Mesh as Mesh5,
   MeshBasicMaterial as MeshBasicMaterial3,
-  Quaternion as Quaternion6,
+  Quaternion as Quaternion7,
   Ray as Ray2,
-  Vector3 as Vector314
+  Vector3 as Vector315
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
+
+// src/collisions/getRelativePositionAndRotationRelativeToObject.ts
+import { Euler as Euler4, Matrix4 as Matrix46, Quaternion as Quaternion6, Vector3 as Vector314 } from "three";
+var tempContainerMatrix = new Matrix46();
+var tempTargetMatrix = new Matrix46();
+var tempPositionVector = new Vector314();
+var tempRotationEuler = new Euler4();
+var tempRotationQuaternion = new Quaternion6();
+var tempScaleVector = new Vector314();
+function getRelativePositionAndRotationRelativeToObject(positionAndRotation, container) {
+  const { x, y, z } = positionAndRotation.position;
+  const { x: rx, y: ry, z: rz } = positionAndRotation.rotation;
+  container.updateWorldMatrix(true, false);
+  tempContainerMatrix.copy(container.matrixWorld).invert();
+  tempPositionVector.set(x, y, z);
+  tempRotationEuler.set(rx, ry, rz);
+  tempRotationQuaternion.setFromEuler(tempRotationEuler);
+  tempScaleVector.set(1, 1, 1);
+  tempTargetMatrix.compose(tempPositionVector, tempRotationQuaternion, tempScaleVector);
+  tempTargetMatrix.premultiply(tempContainerMatrix);
+  tempTargetMatrix.decompose(tempPositionVector, tempRotationQuaternion, tempScaleVector);
+  tempRotationEuler.setFromQuaternion(tempRotationQuaternion);
+  return {
+    position: {
+      x: tempPositionVector.x,
+      y: tempPositionVector.y,
+      z: tempPositionVector.z
+    },
+    rotation: {
+      x: tempRotationEuler.x,
+      y: tempRotationEuler.y,
+      z: tempRotationEuler.z
+    }
+  };
+}
+
+// src/collisions/CollisionsManager.ts
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
-    this.tempVector = new Vector314();
-    this.tempVector2 = new Vector314();
-    this.tempVector3 = new Vector314();
-    this.tempQuaternion = new Quaternion6();
+    this.tempVector = new Vector315();
+    this.tempVector2 = new Vector315();
+    this.tempVector3 = new Vector315();
+    this.tempQuaternion = new Quaternion7();
     this.tempRay = new Ray2();
-    this.tempMatrix = new Matrix46();
-    this.tempMatrix2 = new Matrix46();
+    this.tempMatrix = new Matrix47();
+    this.tempMatrix2 = new Matrix47();
     this.tempBox = new Box3();
-    this.tempEuler = new Euler4();
+    this.tempEuler = new Euler5();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -5667,7 +5818,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector314();
+    let minimumNormal = new Vector315();
     for (const [, collisionMeshState] of this.collisionMeshState) {
       this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
       const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
@@ -5808,7 +5959,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector315().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -5910,59 +6061,134 @@ var GroundPlane = class extends Group6 {
 };
 
 // src/loading-screen/LoadingScreen.ts
-import { LoadingProgressManager as LoadingProgressManager2 } from "mml-web";
+import { LoadingProgressManager as LoadingProgressManager2 } from "@mml-io/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);
@@ -5971,6 +6197,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();
       }
@@ -5989,23 +6217,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";
@@ -6013,7 +6254,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";
@@ -6021,11 +6263,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 = () => {
@@ -6040,7 +6285,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(
@@ -6100,6 +6345,7 @@ export {
   Composer,
   ErrorScreen,
   GroundPlane,
+  Key,
   KeyInputManager,
   LoadingScreen,
   MMLCompositionScene,