@mml-io/3d-web-client-core 0.7.0 → 0.9.0

package/build/index.js

@@ -2,7 +2,21 @@
 import { PerspectiveCamera, Raycaster, Vector3 as Vector32 } from "three";
 
 // src/helpers/math-helpers.ts
-import { Vector3 } from "three";
+import { Quaternion, Vector3, Vector4 } from "three";
+var roundToDecimalPlaces = (value, decimalPlaces) => {
+  const mult = 10 ** decimalPlaces;
+  return Math.round(value * mult) / mult;
+};
+var toArray = (origin, precision = 3) => {
+  const array = [];
+  array[0] = roundToDecimalPlaces(origin.x, precision);
+  array[1] = roundToDecimalPlaces(origin.y, precision);
+  array[2] = roundToDecimalPlaces(origin.z, precision);
+  if (origin instanceof Vector4 || origin instanceof Quaternion) {
+    array[3] = roundToDecimalPlaces(origin.w, precision);
+  }
+  return array;
+};
 var getSpawnPositionInsideCircle = (radius, positions, id, yPos = 0) => {
   if (id > 0)
     id += 3;
@@ -27,6 +41,47 @@ var remap = (value, minValue, maxValue, minScaledValue, maxScaledValue) => {
   return minScaledValue + (maxScaledValue - minScaledValue) * (value - minValue) / (maxValue - minValue);
 };
 
+// src/input/EventHandlerCollection.ts
+var EventHandlerCollection = class _EventHandlerCollection {
+  constructor() {
+    this.eventsByTarget = /* @__PURE__ */ new Map();
+  }
+  add(target, key, listener, options) {
+    target.addEventListener(key, listener, options);
+    let existingTarget = this.eventsByTarget.get(target);
+    if (existingTarget === void 0) {
+      existingTarget = /* @__PURE__ */ new Map();
+      this.eventsByTarget.set(target, existingTarget);
+    }
+    let existingKey = existingTarget.get(key);
+    if (existingKey === void 0) {
+      existingKey = /* @__PURE__ */ new Set();
+      existingTarget.set(key, existingKey);
+    }
+    existingKey.add(listener);
+    return this;
+  }
+  clear() {
+    this.eventsByTarget.forEach((keyMap, target) => {
+      keyMap.forEach((listenerSet, key) => {
+        listenerSet.forEach((listenerFunc) => {
+          target.removeEventListener(key, listenerFunc);
+        });
+      });
+    });
+    this.eventsByTarget.clear();
+  }
+  static create(initial) {
+    const instance = new _EventHandlerCollection();
+    if (initial !== void 0) {
+      initial.forEach(([target, key, listenerFunc, options]) => {
+        instance.add(target, key, listenerFunc, options);
+      });
+    }
+    return instance;
+  }
+};
+
 // src/tweakpane/tweakPaneActivity.ts
 var isTweakpaneActive = false;
 function setTweakpaneActive(status) {
@@ -38,7 +93,7 @@ function getTweakpaneActive() {
 
 // src/camera/CameraManager.ts
 var CameraManager = class {
-  constructor(collisionsManager) {
+  constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
     this.collisionsManager = collisionsManager;
     this.initialDistance = 3.3;
     this.minDistance = 0.1;
@@ -53,42 +108,39 @@ var CameraManager = class {
     this.dampingFactor = 0.091;
     this.targetDistance = this.initialDistance;
     this.distance = this.initialDistance;
-    this.targetPhi = Math.PI / 2;
-    this.phi = Math.PI / 2;
-    this.targetTheta = -Math.PI / 2;
-    this.theta = -Math.PI / 2;
+    this.desiredDistance = this.initialDistance;
     this.dragging = false;
     this.target = new Vector32(0, 1.55, 0);
     this.hadTarget = false;
+    this.phi = initialPhi;
+    this.targetPhi = initialPhi;
+    this.theta = initialTheta;
+    this.targetTheta = initialTheta;
     this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
     this.rayCaster = new Raycaster();
-    document.addEventListener("mousedown", this.onMouseDown.bind(this));
-    document.addEventListener("mouseup", this.onMouseUp.bind(this));
-    document.addEventListener("mousemove", this.onMouseMove.bind(this));
-    document.addEventListener("wheel", this.onMouseWheel.bind(this));
-    window.addEventListener("resize", this.onResize.bind(this));
-  }
-  onResize() {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    this.camera.aspect = width / height;
-    this.camera.updateProjectionMatrix();
-  }
-  onMouseDown(_event) {
+    this.eventHandlerCollection = EventHandlerCollection.create([
+      [targetElement, "mousedown", this.onMouseDown.bind(this)],
+      [document, "mouseup", this.onMouseUp.bind(this)],
+      [document, "mousemove", this.onMouseMove.bind(this)],
+      [targetElement, "wheel", this.onMouseWheel.bind(this)]
+    ]);
+  }
+  onMouseDown() {
     this.dragging = true;
   }
   onMouseUp(_event) {
     this.dragging = false;
   }
   onMouseMove(event) {
-    if (!this.dragging || getTweakpaneActive() === true)
+    if (!this.dragging || getTweakpaneActive())
       return;
     if (this.targetTheta === null || this.targetPhi === null)
       return;
     this.targetTheta += event.movementX * 0.01;
     this.targetPhi -= event.movementY * 0.01;
     this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
+    event.preventDefault();
   }
   onMouseWheel(event) {
     const scrollAmount = event.deltaY * 1e-3;
@@ -97,6 +149,8 @@ var CameraManager = class {
       this.minDistance,
       Math.min(this.maxDistance, this.targetDistance)
     );
+    this.desiredDistance = this.targetDistance;
+    event.preventDefault();
   }
   setTarget(target) {
     this.target.copy(target);
@@ -128,8 +182,13 @@ var CameraManager = class {
     if (minimumDistance !== null && minimumDistance <= cameraToPlayerDistance) {
       this.targetDistance = cameraToPlayerDistance - minimumDistance;
       this.distance = this.targetDistance;
+    } else {
+      this.targetDistance += (this.desiredDistance - this.targetDistance) * this.dampingFactor * 4;
     }
   }
+  dispose() {
+    this.eventHandlerCollection.clear();
+  }
   update() {
     if (this.target === null)
       return;
@@ -159,15 +218,15 @@ var CameraManager = class {
 };
 
 // src/character/Character.ts
-import { Color as Color3, Vector3 as Vector34 } from "three";
+import { Color as Color3, Vector3 as Vector35 } from "three";
 
 // src/character/CharacterModel.ts
 import {
-  AnimationClip as AnimationClip2,
+  AnimationClip,
   AnimationMixer,
   LoopRepeat,
   MeshStandardMaterial,
-  Object3D as Object3D2
+  Object3D
 } from "three";
 
 // src/character/CharacterMaterial.ts
@@ -542,128 +601,14 @@ var AnimationState = /* @__PURE__ */ ((AnimationState2) => {
   return AnimationState2;
 })(AnimationState || {});
 
-// src/character/ModelLoader.ts
-import { LoadingManager } from "three";
-import { GLTFLoader as ThreeGLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-var CachedGLTFLoader = class extends ThreeGLTFLoader {
-  constructor(manager) {
-    super(manager);
-    this.blobCache = /* @__PURE__ */ new Map();
-  }
-  setBlobUrl(originalUrl, blobUrl) {
-    this.blobCache.set(originalUrl, blobUrl);
-  }
-  getBlobUrl(originalUrl) {
-    return this.blobCache.get(originalUrl);
-  }
-  load(url, onLoad, onProgress, onError) {
-    const blobUrl = this.getBlobUrl(url);
-    if (blobUrl) {
-      console.log(`Loading cached ${url.split("/").pop()}`);
-      super.load(blobUrl, onLoad, onProgress, onError);
-    } else {
-      super.load(url, onLoad, onProgress, onError);
-    }
-  }
-};
-var LRUCache = class {
-  constructor(maxSize = 100) {
-    this.maxSize = maxSize;
-    this.cache = /* @__PURE__ */ new Map();
-  }
-  get(key) {
-    const item = this.cache.get(key);
-    if (item) {
-      this.cache.delete(key);
-      this.cache.set(key, item);
-    }
-    return item;
-  }
-  set(key, value) {
-    if (this.cache.size >= this.maxSize) {
-      const oldestKey = this.cache.keys().next().value;
-      this.cache.delete(oldestKey);
-    }
-    this.cache.set(key, value);
-  }
-};
-var _ModelLoader = class _ModelLoader {
-  constructor(maxCacheSize = 100) {
-    this.ongoingLoads = /* @__PURE__ */ new Map();
-    this.loadingManager = new LoadingManager();
-    this.gltfLoader = new CachedGLTFLoader(this.loadingManager);
-    this.modelCache = new LRUCache(maxCacheSize);
-  }
-  /* TODO: decide between below lazy initialization or eager on this file's bottom export */
-  static getInstance() {
-    if (!_ModelLoader.instance) {
-      _ModelLoader.instance = new _ModelLoader();
-    }
-    return _ModelLoader.instance;
-  }
-  async load(fileUrl, fileType) {
-    const cachedModel = this.modelCache.get(fileUrl);
-    if (cachedModel) {
-      const blobURL = URL.createObjectURL(cachedModel.blob);
-      this.gltfLoader.setBlobUrl(fileUrl, blobURL);
-      return this.loadFromUrl(fileUrl, fileType, cachedModel.originalExtension);
-    } else {
-      console.log(`Loading ${fileUrl} from server`);
-      const ongoingLoad = this.ongoingLoads.get(fileUrl);
-      if (ongoingLoad)
-        return ongoingLoad;
-      const loadPromise = fetch(fileUrl).then((response) => response.blob()).then((blob) => {
-        const originalExtension = fileUrl.split(".").pop() || "";
-        this.modelCache.set(fileUrl, { blob, originalExtension });
-        const blobURL = URL.createObjectURL(blob);
-        this.ongoingLoads.delete(fileUrl);
-        return this.loadFromUrl(blobURL, fileType, originalExtension);
-      });
-      this.ongoingLoads.set(fileUrl, loadPromise);
-      return loadPromise;
-    }
-  }
-  async loadFromUrl(url, fileType, extension) {
-    if (["gltf", "glb"].includes(extension)) {
-      return new Promise((resolve, reject) => {
-        this.gltfLoader.load(
-          url,
-          (object) => {
-            if (fileType === "model") {
-              resolve(object.scene);
-            } else if (fileType === "animation") {
-              resolve(object.animations[0]);
-            } else {
-              const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
-              console.error(error);
-              reject(error);
-            }
-          },
-          void 0,
-          (error) => {
-            console.error(`Error loading GL(B|TF) from ${url}: ${error}`);
-            reject(error);
-          }
-        );
-      });
-    } else {
-      console.error(`Error: can't recognize ${url} extension: ${extension}`);
-    }
-  }
-};
-_ModelLoader.instance = null;
-var ModelLoader = _ModelLoader;
-var MODEL_LOADER = ModelLoader.getInstance();
-var ModelLoader_default = MODEL_LOADER;
-
 // src/character/CharacterModel.ts
 var CharacterModel = class {
-  constructor(characterDescription) {
+  constructor(characterDescription, characterModelLoader) {
     this.characterDescription = characterDescription;
-    /* TODO: pick between below eager instantiation or ModelLoader.getInstance() lazy one */
-    this.modelLoader = ModelLoader_default;
+    this.characterModelLoader = characterModelLoader;
     this.mesh = null;
     this.material = new CharacterMaterial();
+    this.headBone = null;
     this.animations = {};
     this.animationMixer = null;
     this.currentAnimation = 0 /* idle */;
@@ -699,6 +644,9 @@ var CharacterModel = class {
     if (!this.mesh)
       return;
     this.mesh.traverse((child) => {
+      if (child.type === "Bone" && child.name === "mixamorigHeadTop_End") {
+        this.headBone = child;
+      }
       if (child.type === "SkinnedMesh" && child.name === meshName) {
         child.material = new MeshStandardMaterial({
           color: 16711680,
@@ -735,9 +683,9 @@ var CharacterModel = class {
     const scale = this.characterDescription.modelScale;
     const extension = mainMeshUrl.split(".").pop();
     const name = mainMeshUrl.split("/").pop().replace(`.${extension}`, "");
-    const mainMesh = await this.modelLoader.load(mainMeshUrl, "model");
+    const mainMesh = await this.characterModelLoader.load(mainMeshUrl, "model");
     if (typeof mainMesh !== "undefined") {
-      this.mesh = new Object3D2();
+      this.mesh = new Object3D();
       const model = mainMesh;
       model.position.set(0, -0.4, 0);
       this.mesh.add(model);
@@ -749,8 +697,8 @@ var CharacterModel = class {
   async setAnimationFromFile(animationFileUrl, animationType) {
     return new Promise(async (resolve, reject) => {
       this.initAnimationMixer();
-      const animation = await this.modelLoader.load(animationFileUrl, "animation");
-      if (typeof animation !== "undefined" && animation instanceof AnimationClip2) {
+      const animation = await this.characterModelLoader.load(animationFileUrl, "animation");
+      if (typeof animation !== "undefined" && animation instanceof AnimationClip) {
         this.animations[animationType] = this.animationMixer.clipAction(animation);
         this.animations[animationType].stop();
         if (animationType === 0 /* idle */) {
@@ -782,12 +730,104 @@ var CharacterModel = class {
   }
 };
 
+// src/character/CharacterSpeakingIndicator.ts
+import {
+  CircleGeometry,
+  GLSL3,
+  Mesh as Mesh2,
+  RawShaderMaterial
+} from "three";
+var CharacterSpeakingIndicator = class {
+  constructor(scene) {
+    this.scene = scene;
+    this.vertexShader = /* glsl */
+    `
+  in vec3 position;
+  in vec2 uv;
+  uniform mat4 modelViewMatrix;
+  uniform mat4 projectionMatrix;
+  out vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }`;
+    this.fragmentShader = /* glsl */
+    `
+  precision highp float;
+
+  uniform float time;
+  uniform float alpha;
+  in vec2 vUv;
+  out vec4 fragColor;
+
+  const float size = 1.7;
+  const float distribution = 0.03;
+  const float speed = 0.2;
+  const float overdraw = 3.5;
+  const float shapeK = 0.25;
+
+  float sdHyperbola(vec2 p, float k, float wi) {
+    p = abs(p);
+    float k2 = k * k;
+    float a = p.x + p.y;
+    float i = 0.5 * (a - k2 / a) > wi ? -1.0 : 1.0;
+    float x = clamp(0.5 * (a - k2 / a), 0.0, wi);
+    vec2 q = vec2(x, sqrt(x * x + k2));
+    float s = sign(p.x * p.x - p.y * p.y + k2);
+    return s * length(p - q);
+  }
+
+  void main(void) {
+    vec2 uv = (vUv * 2.0 - 1.0);
+    float r = -(uv.x * uv.x + uv.y * uv.y);
+    float z = 0.5 + 0.5 * sin((r + time * speed) / distribution);
+    float a = clamp(smoothstep(-0.1, 0.2, size - length(uv * 2.0)), 0.0, 0.5);
+    float h = clamp(sdHyperbola(uv, shapeK, 1.0), 0.0, 1.0) * overdraw;
+    float fragAlpha = clamp(a * h, 0.0, 0.7);
+    fragColor = vec4(z * fragAlpha) * alpha;
+  }`;
+    this.uniforms = {
+      time: { value: 0 },
+      alpha: { value: 0 }
+    };
+    this.geometry = new CircleGeometry(0.35, 21);
+    this.material = new RawShaderMaterial({
+      vertexShader: this.vertexShader,
+      fragmentShader: this.fragmentShader,
+      uniforms: this.uniforms,
+      transparent: true,
+      glslVersion: GLSL3
+    });
+    this.mesh = new Mesh2(this.geometry, this.material);
+    this.currentAlpha = 0;
+    this.targetAlpha = 0;
+    this.scene.add(this.mesh);
+  }
+  setBillboarding(position, camera) {
+    this.mesh.position.set(position.x, position.y - 0.15, position.z);
+    this.mesh.lookAt(camera.position);
+  }
+  setTime(value) {
+    this.currentAlpha += ease(this.targetAlpha, this.currentAlpha, 0.06);
+    this.uniforms.time.value = value;
+    this.uniforms.alpha.value = this.currentAlpha;
+  }
+  setSpeaking(value) {
+    this.targetAlpha = value === true ? 1 : 0;
+  }
+  dispose() {
+    this.scene.remove(this.mesh);
+    this.mesh.material.dispose();
+    this.mesh.geometry.dispose();
+  }
+};
+
 // src/character/CharacterTooltip.ts
 import {
   Color as Color2,
   FrontSide,
   LinearFilter as LinearFilter2,
-  Mesh as Mesh2,
+  Mesh as Mesh3,
   MeshBasicMaterial as MeshBasicMaterial2,
   PlaneGeometry
 } from "three";
@@ -937,7 +977,7 @@ var CharacterTooltip = class {
     });
     this.material.side = FrontSide;
     this.geometry = new PlaneGeometry(1, 1, 1, 1);
-    this.mesh = new Mesh2(this.geometry, this.material);
+    this.mesh = new Mesh3(this.geometry, this.material);
     this.mesh.position.set(0, 1.6, 0);
     this.mesh.visible = false;
     parentModel.add(this.mesh);
@@ -1020,7 +1060,7 @@ var CharacterTooltip = class {
 };
 
 // src/character/LocalController.ts
-import { Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
+import { Line3, Matrix4, Quaternion as Quaternion2, Raycaster as Raycaster2, Vector3 as Vector34 } from "three";
 var LocalController = class {
   constructor(model, id, collisionsManager, keyInputManager, cameraManager, timeManager) {
     this.model = model;
@@ -1032,7 +1072,7 @@ var LocalController = class {
     this.collisionDetectionSteps = 15;
     this.capsuleInfo = {
       radius: 0.4,
-      segment: new Line3(new Vector33(), new Vector33(0, 1.05, 0))
+      segment: new Line3(new Vector34(), new Vector34(0, 1.05, 0))
     };
     this.maxWalkSpeed = 6;
     this.maxRunSpeed = 8.5;
@@ -1045,15 +1085,15 @@ var LocalController = class {
     this.characterWasOnGround = false;
     this.characterAirborneSince = 0;
     this.currentHeight = 0;
-    this.characterVelocity = new Vector33();
-    this.vectorUp = new Vector33(0, 1, 0);
-    this.vectorDown = new Vector33(0, -1, 0);
+    this.characterVelocity = new Vector34();
+    this.vectorUp = new Vector34(0, 1, 0);
+    this.vectorDown = new Vector34(0, -1, 0);
     this.rotationOffset = 0;
     this.azimuthalAngle = 0;
     this.tempMatrix = new Matrix4();
     this.tempSegment = new Line3();
-    this.tempVector = new Vector33();
-    this.tempVector2 = new Vector33();
+    this.tempVector = new Vector34();
+    this.tempVector2 = new Vector34();
     this.rayCaster = new Raycaster2();
     this.thirdPersonCamera = null;
     this.speed = 0;
@@ -1141,7 +1181,7 @@ var LocalController = class {
     const camToModelDistance = this.thirdPersonCamera.position.distanceTo(this.model.mesh.position);
     const isCameraFirstPerson = camToModelDistance < 2;
     if (isCameraFirstPerson) {
-      const cameraForward = new Vector33(0, 0, 1).applyQuaternion(this.thirdPersonCamera.quaternion);
+      const cameraForward = new Vector34(0, 0, 1).applyQuaternion(this.thirdPersonCamera.quaternion);
       this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
     } else {
       this.azimuthalAngle = Math.atan2(
@@ -1162,7 +1202,7 @@ var LocalController = class {
       return;
     this.updateRotationOffset();
     this.updateAzimuthalAngle();
-    const rotationQuaternion = new Quaternion();
+    const rotationQuaternion = new Quaternion2();
     rotationQuaternion.setFromAxisAngle(this.vectorUp, this.azimuthalAngle + this.rotationOffset);
     const angularDifference = this.computeAngularDifference(rotationQuaternion);
     const desiredTime = 0.07;
@@ -1190,7 +1230,6 @@ var LocalController = class {
         this.characterVelocity.y = deltaTime * this.gravity;
       }
     } else if (this.jump && this.coyoteTime) {
-      console.log("coyoteJump");
       this.characterVelocity.y = this.jumpForce;
       this.canJump = false;
     } else {
@@ -1200,19 +1239,19 @@ var LocalController = class {
     this.model.mesh.position.addScaledVector(this.characterVelocity, deltaTime);
     this.tempVector.set(0, 0, 0);
     if (this.forward) {
-      const forward = new Vector33(0, 0, -1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+      const forward = new Vector34(0, 0, -1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
       this.tempVector.add(forward);
     }
     if (this.backward) {
-      const backward = new Vector33(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+      const backward = new Vector34(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
       this.tempVector.add(backward);
     }
     if (this.left) {
-      const left = new Vector33(-1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+      const left = new Vector34(-1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
       this.tempVector.add(left);
     }
     if (this.right) {
-      const right = new Vector33(1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+      const right = new Vector34(1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
       this.tempVector.add(right);
     }
     if (this.tempVector.length() > 0) {
@@ -1249,13 +1288,13 @@ var LocalController = class {
     if (!((_a = this.model) == null ? void 0 : _a.mesh)) {
       this.networkState = {
         id: this.id,
-        position: new Vector33(),
+        position: new Vector34(),
         rotation: { quaternionY: 0, quaternionW: 1 },
         state: 0 /* idle */
       };
     } else {
-      const characterQuaternion = this.model.mesh.getWorldQuaternion(new Quaternion());
-      const positionUpdate = new Vector33(
+      const characterQuaternion = this.model.mesh.getWorldQuaternion(new Quaternion2());
+      const positionUpdate = new Vector34(
         this.model.mesh.position.x,
         this.model.mesh.position.y,
         this.model.mesh.position.z
@@ -1280,8 +1319,9 @@ var LocalController = class {
 
 // src/character/Character.ts
 var Character = class {
-  constructor(characterDescription, id, isLocal, modelLoadedCallback, collisionsManager, keyInputManager, cameraManager, timeManager) {
+  constructor(characterDescription, characterModelLoader, id, isLocal, modelLoadedCallback, collisionsManager, keyInputManager, cameraManager, timeManager, composer) {
     this.characterDescription = characterDescription;
+    this.characterModelLoader = characterModelLoader;
     this.id = id;
     this.isLocal = isLocal;
     this.modelLoadedCallback = modelLoadedCallback;
@@ -1289,20 +1329,25 @@ var Character = class {
     this.keyInputManager = keyInputManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
+    this.composer = composer;
     this.controller = null;
     this.name = null;
     this.model = null;
     this.color = new Color3();
-    this.position = new Vector34();
+    this.position = new Vector35();
     this.tooltip = null;
+    this.speakingIndicator = null;
     this.load();
   }
   async load() {
-    this.model = new CharacterModel(this.characterDescription);
+    this.model = new CharacterModel(this.characterDescription, this.characterModelLoader);
     await this.model.init();
     if (this.tooltip === null) {
       this.tooltip = new CharacterTooltip(this.model.mesh);
     }
+    if (this.speakingIndicator === null) {
+      this.speakingIndicator = new CharacterSpeakingIndicator(this.composer.postPostScene);
+    }
     this.color = this.model.material.colorsCube216[this.id];
     if (this.isLocal) {
       this.controller = new LocalController(
@@ -1317,11 +1362,21 @@ var Character = class {
     this.modelLoadedCallback();
   }
   update(time) {
+    var _a;
     if (!this.model)
       return;
     if (this.tooltip) {
       this.tooltip.update(this.cameraManager.camera);
     }
+    if (this.speakingIndicator) {
+      this.speakingIndicator.setTime(time);
+      if (this.model.mesh && this.model.headBone) {
+        this.speakingIndicator.setBillboarding(
+          (_a = this.model.headBone) == null ? void 0 : _a.getWorldPosition(new Vector35()),
+          this.cameraManager.camera
+        );
+      }
+    }
     this.model.mesh.getWorldPosition(this.position);
     if (typeof this.model.material.uniforms.time !== "undefined") {
       this.model.material.uniforms.time.value = time;
@@ -1332,20 +1387,20 @@ var Character = class {
 };
 
 // src/character/CharacterManager.ts
-import { Group, Vector3 as Vector36 } from "three";
+import { Euler, Group, Quaternion as Quaternion4, Vector3 as Vector37 } from "three";
 
 // src/character/RemoteController.ts
 import {
   AnimationMixer as AnimationMixer2,
   Object3D as Object3D4,
-  Quaternion as Quaternion2,
-  Vector3 as Vector35
+  Quaternion as Quaternion3,
+  Vector3 as Vector36
 } from "three";
 var RemoteController = class {
-  constructor(character, id) {
+  constructor(character, characterModelLoader, id) {
     this.character = character;
+    this.characterModelLoader = characterModelLoader;
     this.id = id;
-    this.modelLoader = ModelLoader_default;
     this.characterModel = null;
     this.animationMixer = new AnimationMixer2(new Object3D4());
     this.animations = /* @__PURE__ */ new Map();
@@ -1368,7 +1423,7 @@ var RemoteController = class {
     this.animationMixer.update(deltaTime);
   }
   async setAnimationFromFile(animationType, fileName) {
-    const animation = await this.modelLoader.load(fileName, "animation");
+    const animation = await this.characterModelLoader.load(fileName, "animation");
     const animationAction = this.animationMixer.clipAction(animation);
     this.animations.set(animationType, animationAction);
     if (animationType === 0 /* idle */) {
@@ -1395,8 +1450,8 @@ var RemoteController = class {
     if (!this.characterModel)
       return;
     const { position, rotation, state } = clientUpdate;
-    this.characterModel.position.lerp(new Vector35(position.x, position.y, position.z), 0.15);
-    const rotationQuaternion = new Quaternion2(0, rotation.quaternionY, 0, rotation.quaternionW);
+    this.characterModel.position.lerp(new Vector36(position.x, position.y, position.z), 0.15);
+    const rotationQuaternion = new Quaternion3(0, rotation.quaternionY, 0, rotation.quaternionW);
     this.characterModel.quaternion.slerp(rotationQuaternion, 0.6);
     if (state !== this.currentAnimation) {
       this.transitionToAnimation(state);
@@ -1407,10 +1462,10 @@ var RemoteController = class {
 // src/character/CharacterManager.ts
 function encodeCharacterAndCamera(character, camera) {
   return [
-    ...character.position.toArray(),
-    ...character.quaternion.toArray(),
-    ...camera.position.toArray(),
-    ...camera.quaternion.toArray()
+    ...toArray(character.position),
+    ...toArray(character.quaternion),
+    ...toArray(camera.position),
+    ...toArray(camera.quaternion)
   ].join(",");
 }
 function decodeCharacterAndCamera(hash, character, camera) {
@@ -1421,7 +1476,9 @@ function decodeCharacterAndCamera(hash, character, camera) {
   camera.quaternion.fromArray(values.slice(10, 14));
 }
 var CharacterManager = class {
-  constructor(collisionsManager, cameraManager, timeManager, inputManager, clientStates, sendUpdate) {
+  constructor(composer, characterModelLoader, collisionsManager, cameraManager, timeManager, inputManager, clientStates, sendUpdate) {
+    this.composer = composer;
+    this.characterModelLoader = characterModelLoader;
     this.collisionsManager = collisionsManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
@@ -1434,6 +1491,7 @@ var CharacterManager = class {
       can be trapped).
     */
     this.updateLocationHash = false;
+    this.id = 0;
     this.loadingCharacters = /* @__PURE__ */ new Map();
     this.remoteCharacters = /* @__PURE__ */ new Map();
     this.remoteCharacterControllers = /* @__PURE__ */ new Map();
@@ -1441,6 +1499,7 @@ var CharacterManager = class {
     this.character = null;
     this.cameraOffsetTarget = 0;
     this.cameraOffset = 0;
+    this.speakingCharacters = /* @__PURE__ */ new Map();
     this.group = new Group();
   }
   /* TODO: 
@@ -1449,11 +1508,12 @@ var CharacterManager = class {
       the mesh loading async (would allow us to show a nameplate where a remote
       user is before the asset loads).
   */
-  spawnCharacter(characterDescription, id, isLocal = false, spawnPosition = new Vector36()) {
+  spawnCharacter(characterDescription, id, isLocal = false, spawnPosition = new Vector37(), spawnRotation = new Euler()) {
     this.characterDescription = characterDescription;
     const characterLoadingPromise = new Promise((resolve) => {
       const character = new Character(
         characterDescription,
+        this.characterModelLoader,
         id,
         isLocal,
         () => {
@@ -1465,9 +1525,12 @@ var CharacterManager = class {
               this.cameraManager.camera
             );
           } else {
-            spawnPosition = getSpawnPositionInsideCircle(3, 30, id, 0.4);
+            spawnPosition = spawnPosition || getSpawnPositionInsideCircle(3, 30, id, 0.4);
             character.model.mesh.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+            character.model.mesh.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+            character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
             character.model.mesh.updateMatrixWorld();
+            const quaternion = new Quaternion4().setFromEuler(character.model.mesh.rotation);
             this.sendUpdate({
               id,
               position: {
@@ -1475,7 +1538,7 @@ var CharacterManager = class {
                 y: spawnPosition.y,
                 z: spawnPosition.z
               },
-              rotation: { quaternionY: 0, quaternionW: 1 },
+              rotation: { quaternionY: quaternion.y, quaternionW: quaternion.w },
               state: 0 /* idle */
             });
           }
@@ -1487,11 +1550,12 @@ var CharacterManager = class {
           }
           this.group.add(character.model.mesh);
           if (isLocal) {
+            this.id = id;
             this.character = character;
             (_e = this.character.tooltip) == null ? void 0 : _e.setText(`${id}`);
           } else {
             this.remoteCharacters.set(id, character);
-            const remoteController = new RemoteController(character, id);
+            const remoteController = new RemoteController(character, this.characterModelLoader, id);
             remoteController.setAnimationFromFile(
               0 /* idle */,
               characterDescription.idleAnimationFileUrl
@@ -1521,7 +1585,8 @@ var CharacterManager = class {
         this.collisionsManager,
         this.inputManager,
         this.cameraManager,
-        this.timeManager
+        this.timeManager,
+        this.composer
       );
     });
     this.loadingCharacters.set(id, characterLoadingPromise);
@@ -1551,14 +1616,20 @@ var CharacterManager = class {
     }
     this.loadingCharacters.clear();
   }
+  setSpeakingCharacter(id, value) {
+    this.speakingCharacters.set(id, value);
+  }
   update() {
-    var _a;
+    var _a, _b, _c, _d;
     if (this.character) {
       this.character.update(this.timeManager.time);
-      if ((_a = this.character.model) == null ? void 0 : _a.mesh) {
-        this.cameraOffsetTarget = this.cameraManager.targetDistance <= 0.4 ? 0.6 : 0;
+      if (this.speakingCharacters.has(this.id)) {
+        (_a = this.character.speakingIndicator) == null ? void 0 : _a.setSpeaking(this.speakingCharacters.get(this.id));
+      }
+      if ((_b = this.character.model) == null ? void 0 : _b.mesh) {
+        this.cameraOffsetTarget = this.cameraManager.targetDistance <= 0.4 ? 0.13 : 0;
         this.cameraOffset += ease(this.cameraOffsetTarget, this.cameraOffset, 0.1);
-        const targetOffset = new Vector36(0, 1.3, this.cameraOffset);
+        const targetOffset = new Vector37(0, 1.3, this.cameraOffset);
         targetOffset.applyQuaternion(this.character.model.mesh.quaternion);
         this.cameraManager.setTarget(this.character.position.add(targetOffset));
       }
@@ -1569,13 +1640,17 @@ var CharacterManager = class {
         }
       }
       for (const [id, update] of this.clientStates) {
+        if (this.remoteCharacters.has(id) && this.speakingCharacters.has(id)) {
+          const character = this.remoteCharacters.get(id);
+          (_c = character == null ? void 0 : character.speakingIndicator) == null ? void 0 : _c.setSpeaking(this.speakingCharacters.get(id));
+        }
         const { position } = update;
         if (!this.remoteCharacters.has(id) && !this.loadingCharacters.has(id)) {
           this.spawnCharacter(
             this.characterDescription,
             id,
             false,
-            new Vector36(position.x, position.y, position.z)
+            new Vector37(position.x, position.y, position.z)
           ).then((_character) => {
             this.loadingCharacters.delete(id);
           });
@@ -1587,6 +1662,7 @@ var CharacterManager = class {
       }
       for (const [id, character] of this.remoteCharacters) {
         if (!this.clientStates.has(id)) {
+          (_d = character.speakingIndicator) == null ? void 0 : _d.dispose();
           this.group.remove(character.model.mesh);
           this.remoteCharacters.delete(id);
           this.remoteCharacterControllers.delete(id);
@@ -1602,57 +1678,179 @@ var CharacterManager = class {
   }
 };
 
-// src/input/KeyInputManager.ts
-var KeyInputManager = class {
-  constructor() {
-    this.keys = /* @__PURE__ */ new Map();
-    document.addEventListener("keydown", this.onKeyDown.bind(this));
-    document.addEventListener("keyup", this.onKeyUp.bind(this));
-    window.addEventListener("blur", this.handleUnfocus.bind(this));
-  }
-  handleUnfocus(_event) {
-    this.keys.clear();
-  }
-  onKeyDown(event) {
-    this.keys.set(event.key.toLowerCase(), true);
-  }
-  onKeyUp(event) {
-    this.keys.set(event.key.toLowerCase(), false);
-  }
-  isKeyPressed(key) {
-    return this.keys.get(key) || false;
+// src/character/CharacterModelLoader.ts
+import { LoadingManager } from "three";
+import { GLTFLoader as ThreeGLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+var CachedGLTFLoader = class extends ThreeGLTFLoader {
+  constructor(manager) {
+    super(manager);
+    this.blobCache = /* @__PURE__ */ new Map();
   }
-  isMovementKeyPressed() {
-    return ["w", "a", "s", "d"].some((key) => this.isKeyPressed(key));
+  setBlobUrl(originalUrl, blobUrl) {
+    this.blobCache.set(originalUrl, blobUrl);
   }
-  get forward() {
-    return this.isKeyPressed("w");
+  getBlobUrl(originalUrl) {
+    return this.blobCache.get(originalUrl);
   }
-  get backward() {
-    return this.isKeyPressed("s");
+  load(url, onLoad, onProgress, onError) {
+    const blobUrl = this.getBlobUrl(url);
+    if (blobUrl) {
+      console.log(`Loading cached ${url.split("/").pop()}`);
+      super.load(blobUrl, onLoad, onProgress, onError);
+    } else {
+      super.load(url, onLoad, onProgress, onError);
+    }
   }
-  get left() {
-    return this.isKeyPressed("a");
+};
+var LRUCache = class {
+  constructor(maxSize = 100) {
+    this.maxSize = maxSize;
+    this.cache = /* @__PURE__ */ new Map();
   }
-  get right() {
-    return this.isKeyPressed("d");
+  get(key) {
+    const item = this.cache.get(key);
+    if (item) {
+      this.cache.delete(key);
+      this.cache.set(key, item);
+    }
+    return item;
   }
-  get run() {
-    return this.isKeyPressed("shift");
+  set(key, value) {
+    if (this.cache.size >= this.maxSize) {
+      const oldestKey = this.cache.keys().next().value;
+      this.cache.delete(oldestKey);
+    }
+    this.cache.set(key, value);
   }
-  get jump() {
-    return this.isKeyPressed(" ");
+};
+var _CharacterModelLoader = class _CharacterModelLoader {
+  constructor(maxCacheSize = 100) {
+    this.ongoingLoads = /* @__PURE__ */ new Map();
+    this.loadingManager = new LoadingManager();
+    this.gltfLoader = new CachedGLTFLoader(this.loadingManager);
+    this.modelCache = new LRUCache(maxCacheSize);
   }
-  get anyDirection() {
-    return this.isMovementKeyPressed();
+  /* TODO: decide between below lazy initialization or eager on this file's bottom export */
+  static getInstance() {
+    if (!_CharacterModelLoader.instance) {
+      _CharacterModelLoader.instance = new _CharacterModelLoader();
+    }
+    return _CharacterModelLoader.instance;
   }
-  get conflictingDirection() {
-    return this.isKeyPressed("w") && this.isKeyPressed("s") || this.isKeyPressed("a") && this.isKeyPressed("d");
+  async load(fileUrl, fileType) {
+    const cachedModel = this.modelCache.get(fileUrl);
+    if (cachedModel) {
+      const blobURL = URL.createObjectURL(cachedModel.blob);
+      this.gltfLoader.setBlobUrl(fileUrl, blobURL);
+      return this.loadFromUrl(fileUrl, fileType, cachedModel.originalExtension);
+    } else {
+      console.log(`Loading ${fileUrl} from server`);
+      const ongoingLoad = this.ongoingLoads.get(fileUrl);
+      if (ongoingLoad)
+        return ongoingLoad;
+      const loadPromise = fetch(fileUrl).then((response) => response.blob()).then((blob) => {
+        const originalExtension = fileUrl.split(".").pop() || "";
+        this.modelCache.set(fileUrl, { blob, originalExtension });
+        const blobURL = URL.createObjectURL(blob);
+        this.ongoingLoads.delete(fileUrl);
+        return this.loadFromUrl(blobURL, fileType, originalExtension);
+      });
+      this.ongoingLoads.set(fileUrl, loadPromise);
+      return loadPromise;
+    }
+  }
+  async loadFromUrl(url, fileType, extension) {
+    if (["gltf", "glb"].includes(extension)) {
+      return new Promise((resolve, reject) => {
+        this.gltfLoader.load(
+          url,
+          (object) => {
+            if (fileType === "model") {
+              resolve(object.scene);
+            } else if (fileType === "animation") {
+              resolve(object.animations[0]);
+            } else {
+              const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
+              console.error(error);
+              reject(error);
+            }
+          },
+          void 0,
+          (error) => {
+            console.error(`Error loading GL(B|TF) from ${url}: ${error}`);
+            reject(error);
+          }
+        );
+      });
+    } else {
+      console.error(`Error: can't recognize ${url} extension: ${extension}`);
+    }
+  }
+};
+_CharacterModelLoader.instance = null;
+var CharacterModelLoader = _CharacterModelLoader;
+var MODEL_LOADER = CharacterModelLoader.getInstance();
+
+// src/input/KeyInputManager.ts
+var KeyInputManager = class {
+  constructor(shouldCaptureKeyPress = () => true) {
+    this.shouldCaptureKeyPress = shouldCaptureKeyPress;
+    this.keys = /* @__PURE__ */ new Map();
+    this.eventHandlerCollection = new EventHandlerCollection();
+    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));
+  }
+  handleUnfocus(_event) {
+    this.keys.clear();
+  }
+  onKeyDown(event) {
+    if (this.shouldCaptureKeyPress()) {
+      if (event.key.length === 2 && event.key[0] === "F") {
+        return;
+      }
+      if (event.metaKey) {
+        return;
+      }
+      this.keys.set(event.key.toLowerCase(), true);
+      event.preventDefault();
+    }
+  }
+  onKeyUp(event) {
+    this.keys.set(event.key.toLowerCase(), false);
+  }
+  isKeyPressed(key) {
+    return this.keys.get(key) || false;
+  }
+  isMovementKeyPressed() {
+    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
+  }
+  get forward() {
+    return this.isKeyPressed("w" /* W */);
+  }
+  get backward() {
+    return this.isKeyPressed("s" /* S */);
+  }
+  get left() {
+    return this.isKeyPressed("a" /* A */);
+  }
+  get right() {
+    return this.isKeyPressed("d" /* D */);
+  }
+  get run() {
+    return this.isKeyPressed("shift" /* SHIFT */);
+  }
+  get jump() {
+    return this.isKeyPressed(" " /* SPACE */);
+  }
+  get anyDirection() {
+    return this.isMovementKeyPressed();
+  }
+  get conflictingDirection() {
+    return this.isKeyPressed("w" /* W */) && this.isKeyPressed("s" /* S */) || this.isKeyPressed("a" /* A */) && this.isKeyPressed("d" /* D */);
   }
   dispose() {
-    document.removeEventListener("keydown", this.onKeyDown.bind(this));
-    document.removeEventListener("keyup", this.onKeyDown.bind(this));
-    window.removeEventListener("blur", this.handleUnfocus.bind(this));
+    this.eventHandlerCollection.clear();
   }
 };
 
@@ -1660,23 +1858,25 @@ var KeyInputManager = class {
 import {
   InteractionManager,
   MMLClickTrigger,
-  PromptManager,
-  registerCustomElementsToWindow,
-  setGlobalMScene
+  PromptManager
 } from "mml-web";
 import { Group as Group2 } from "three";
 var MMLCompositionScene = class {
-  constructor(renderer, scene, camera, audioListener, collisionsManager, getUserPositionAndRotation, documentAddresses) {
+  constructor(targetElement, renderer, scene, camera, audioListener, collisionsManager, getUserPositionAndRotation) {
     this.renderer = renderer;
     this.scene = scene;
     this.camera = camera;
     this.audioListener = audioListener;
     this.collisionsManager = collisionsManager;
     this.getUserPositionAndRotation = getUserPositionAndRotation;
-    this.debug = false;
     this.group = new Group2();
-    this.promptManager = PromptManager.init(document.body);
-    const { interactionListener } = InteractionManager.init(document.body, this.camera, this.scene);
+    this.promptManager = PromptManager.init(targetElement);
+    const { interactionListener, interactionManager } = InteractionManager.init(
+      targetElement,
+      this.camera,
+      this.scene
+    );
+    this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.mmlScene = {
       getAudioListener: () => this.audioListener,
@@ -1707,54 +1907,65 @@ var MMLCompositionScene = class {
         this.promptManager.prompt(promptProps, callback);
       }
     };
-    setGlobalMScene(this.mmlScene);
-    registerCustomElementsToWindow(window);
-    this.clickTrigger = MMLClickTrigger.init(document, this.mmlScene);
-    if (this.debug) {
-      console.log(this.clickTrigger);
-    }
-    for (const address of documentAddresses) {
-      const frameElement = document.createElement("m-frame");
-      frameElement.setAttribute("src", address);
-      document.body.appendChild(frameElement);
-    }
+    this.clickTrigger = MMLClickTrigger.init(targetElement, this.mmlScene);
+  }
+  dispose() {
+    this.promptManager.dispose();
+    this.clickTrigger.dispose();
+    this.interactionManager.dispose();
   }
 };
 
-// src/rendering/composer.ts
-import { N8AOPostPass } from "n8ao";
-import {
-  EffectComposer as EffectComposer2,
-  RenderPass,
-  EffectPass as EffectPass2,
-  FXAAEffect,
-  ShaderPass,
-  BloomEffect,
-  SSAOEffect as SSAOEffect2,
-  BlendFunction as BlendFunction2,
-  TextureEffect,
-  ToneMappingEffect,
-  SMAAEffect,
-  SMAAPreset,
-  EdgeDetectionMode,
-  PredicationMode,
-  NormalPass as NormalPass2
-} from "postprocessing";
-import {
-  AmbientLight,
-  Color as Color6,
-  Fog,
-  HalfFloatType,
-  LinearSRGBColorSpace,
-  LoadingManager as LoadingManager2,
-  PMREMGenerator,
-  Vector2 as Vector22,
-  WebGLRenderer as WebGLRenderer2
-} from "three";
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
+// src/tweakpane/TweakPane.ts
+import * as EssentialsPlugin from "@tweakpane/plugin-essentials";
+import { Pane } from "tweakpane";
 
-// src/sun/Sun.ts
-import { CameraHelper, Color as Color4, DirectionalLight, Group as Group3, OrthographicCamera, Vector3 as Vector37 } from "three";
+// src/tweakpane/blades/bcsFolder.ts
+var bcsValues = {
+  brightness: 0,
+  contrast: 1.25,
+  saturation: 1
+};
+var bcsOptions = {
+  brightness: {
+    amount: { min: -1, max: 1, step: 0.01 }
+  },
+  contrast: {
+    amount: { min: 0, max: 2, step: 0.01 }
+  },
+  saturation: {
+    amount: { min: 0, max: 2, step: 0.01 }
+  }
+};
+var BrightnessContrastSaturationFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({
+      title: "brightness / contrast / sat",
+      expanded: expand
+    });
+    this.folder.addBinding(bcsValues, "brightness", bcsOptions.brightness.amount);
+    this.folder.addBinding(bcsValues, "contrast", bcsOptions.contrast.amount);
+    this.folder.addBinding(bcsValues, "saturation", bcsOptions.saturation.amount);
+  }
+  setupChangeEvent(brightnessContrastSaturation) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "brightness":
+          brightnessContrastSaturation.uniforms.brightness.value = e.value;
+          break;
+        case "contrast":
+          brightnessContrastSaturation.uniforms.contrast.value = e.value;
+          break;
+        case "saturation":
+          brightnessContrastSaturation.uniforms.saturation.value = e.value;
+          break;
+      }
+    });
+  }
+};
 
 // src/tweakpane/blades/environmentFolder.ts
 var sunValues = {
@@ -1911,135 +2122,6 @@ var EnvironmentFolder = class {
   }
 };
 
-// src/sun/Sun.ts
-var Sun = class extends Group3 {
-  constructor() {
-    super();
-    this.debug = false;
-    this.sunOffset = new Vector37(
-      39 * (Math.PI / 180),
-      50 * (Math.PI / 180),
-      100
-    );
-    this.shadowResolution = 8192;
-    this.shadowCamFrustum = 50;
-    this.camHelper = null;
-    this.target = null;
-    this.shadowCamera = new OrthographicCamera(
-      -this.shadowCamFrustum,
-      this.shadowCamFrustum,
-      this.shadowCamFrustum,
-      -this.shadowCamFrustum,
-      0.1,
-      200
-    );
-    if (this.debug === true) {
-      this.camHelper = new CameraHelper(this.shadowCamera);
-    }
-    this.directionalLight = new DirectionalLight(16777215, 0.5);
-    this.directionalLight.shadow.normalBias = 0.05;
-    this.directionalLight.shadow.radius = 1.5;
-    this.directionalLight.shadow.camera = this.shadowCamera;
-    this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
-    this.directionalLight.castShadow = true;
-    this.setColor();
-    this.updateCharacterPosition(new Vector37(0, 0, 0));
-    this.add(this.directionalLight);
-    if (this.debug === true && this.camHelper instanceof CameraHelper) {
-      this.add(this.camHelper);
-    }
-  }
-  updateCharacterPosition(position) {
-    if (!position)
-      return;
-    this.target = position;
-    this.setSunPosition(this.sunOffset.x, this.sunOffset.y);
-  }
-  setAzimuthalAngle(angle) {
-    if (this.sunOffset)
-      this.sunOffset.x = angle;
-    if (this.target)
-      this.updateCharacterPosition(this.target);
-  }
-  setPolarAngle(angle) {
-    if (this.sunOffset)
-      this.sunOffset.y = angle;
-    if (this.target)
-      this.updateCharacterPosition(this.target);
-  }
-  setIntensity(intensity) {
-    this.directionalLight.intensity = intensity;
-  }
-  setColor() {
-    this.directionalLight.color = new Color4().setRGB(
-      sunValues.sunColor.r,
-      sunValues.sunColor.g,
-      sunValues.sunColor.b
-    );
-  }
-  setSunPosition(azimuthalAngle, polarAngle) {
-    if (!this.target)
-      return;
-    const distance = this.sunOffset.z;
-    const sphericalPosition = new Vector37(
-      distance * Math.sin(polarAngle) * Math.cos(azimuthalAngle),
-      distance * Math.cos(polarAngle),
-      distance * Math.sin(polarAngle) * Math.sin(azimuthalAngle)
-    );
-    const newSunPosition = this.target.clone().add(sphericalPosition);
-    this.directionalLight.position.set(newSunPosition.x, newSunPosition.y, newSunPosition.z);
-    this.directionalLight.target.position.copy(this.target.clone());
-    this.directionalLight.target.updateMatrixWorld();
-  }
-};
-
-// src/tweakpane/blades/bcsFolder.ts
-var bcsValues = {
-  brightness: 0,
-  contrast: 1.25,
-  saturation: 1
-};
-var bcsOptions = {
-  brightness: {
-    amount: { min: -1, max: 1, step: 0.01 }
-  },
-  contrast: {
-    amount: { min: 0, max: 2, step: 0.01 }
-  },
-  saturation: {
-    amount: { min: 0, max: 2, step: 0.01 }
-  }
-};
-var BrightnessContrastSaturationFolder = class {
-  constructor(parentFolder, expand = false) {
-    this.folder = parentFolder.addFolder({
-      title: "brightness / contrast / sat",
-      expanded: expand
-    });
-    this.folder.addBinding(bcsValues, "brightness", bcsOptions.brightness.amount);
-    this.folder.addBinding(bcsValues, "contrast", bcsOptions.contrast.amount);
-    this.folder.addBinding(bcsValues, "saturation", bcsOptions.saturation.amount);
-  }
-  setupChangeEvent(brightnessContrastSaturation) {
-    this.folder.on("change", (e) => {
-      const target = e.target.key;
-      if (!target)
-        return;
-      switch (target) {
-        case "brightness":
-          brightnessContrastSaturation.uniforms.brightness.value = e.value;
-          break;
-        case "contrast":
-          brightnessContrastSaturation.uniforms.contrast.value = e.value;
-          break;
-        case "saturation":
-          brightnessContrastSaturation.uniforms.saturation.value = e.value;
-          break;
-      }
-    });
-  }
-};
-
 // src/tweakpane/blades/postExtrasFolder.ts
 var extrasValues = {
   grain: 0.055,
@@ -2164,9 +2246,52 @@ var RendererFolder = class {
   }
 };
 
+// src/tweakpane/blades/rendererStatsFolder.ts
+var RendererStatsFolder = class {
+  constructor(parentFolder, expanded = true) {
+    this.statsData = {
+      triangles: "0",
+      geometries: "0",
+      textures: "0",
+      shaders: "0",
+      postPasses: "0",
+      drawCalls: "0",
+      rawDeltaTime: "0",
+      deltaTime: "0",
+      FPS: "0"
+    };
+    this.folder = parentFolder.addFolder({ title: "renderStats", expanded });
+    this.performance = this.folder.addFolder({ title: "performance", expanded: true });
+    this.defails = this.folder.addFolder({ title: "pipeline details", expanded: false });
+    this.folder.addBlade({ view: "separator" });
+    this.performance.addBinding(this.statsData, "FPS", { readonly: true });
+    this.performance.addBinding(this.statsData, "deltaTime", { readonly: true });
+    this.performance.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
+    this.defails.addBinding(this.statsData, "triangles", { readonly: true });
+    this.defails.addBinding(this.statsData, "geometries", { readonly: true });
+    this.defails.addBinding(this.statsData, "textures", { readonly: true });
+    this.defails.addBinding(this.statsData, "shaders", { readonly: true });
+    this.defails.addBinding(this.statsData, "postPasses", { readonly: true });
+    this.defails.addBinding(this.statsData, "drawCalls", { readonly: true });
+  }
+  update(renderer, composer, timeManager) {
+    const { geometries, textures } = renderer.info.memory;
+    const { triangles, calls } = renderer.info.render;
+    this.statsData.triangles = triangles.toString();
+    this.statsData.geometries = geometries.toString();
+    this.statsData.textures = textures.toString();
+    this.statsData.shaders = renderer.info.programs.length.toString();
+    this.statsData.postPasses = composer.passes.length.toString();
+    this.statsData.drawCalls = calls.toString();
+    this.statsData.rawDeltaTime = (Math.round(timeManager.rawDeltaTime * 1e5) / 1e5).toString();
+    this.statsData.deltaTime = (Math.round(timeManager.deltaTime * 1e5) / 1e5).toString();
+    this.statsData.FPS = timeManager.fps.toString();
+  }
+};
+
 // src/tweakpane/blades/ssaoFolder.ts
 import { BlendFunction } from "postprocessing";
-import { Color as Color5 } from "three";
+import { Color as Color4 } from "three";
 var ppssaoValues = {
   enabled: false,
   blendFunction: BlendFunction.MULTIPLY,
@@ -2358,7 +2483,7 @@ var SSAOFolder = class {
         }
         case "color": {
           const value = e.value;
-          ppssaoEffect.color = new Color5().setRGB(value.r, value.g, value.b);
+          ppssaoEffect.color = new Color4().setRGB(value.r, value.g, value.b);
           break;
         }
         default: {
@@ -2398,7 +2523,7 @@ var SSAOFolder = class {
           break;
         case "color":
           const value = e.value;
-          n8aopass.configuration.color = new Color5().setRGB(value.r, value.g, value.b);
+          n8aopass.configuration.color = new Color4().setRGB(value.r, value.g, value.b);
           break;
         default:
           break;
@@ -2491,53 +2616,6 @@ var ToneMappingFolder = class {
   }
 };
 
-// src/tweakpane/TweakPane.ts
-import * as EssentialsPlugin from "@tweakpane/plugin-essentials";
-import { Pane } from "tweakpane";
-
-// src/tweakpane/blades/rendererStatsFolder.ts
-var RendererStatsFolder = class {
-  constructor(parentFolder, expanded = true) {
-    this.statsData = {
-      triangles: "0",
-      geometries: "0",
-      textures: "0",
-      shaders: "0",
-      postPasses: "0",
-      drawCalls: "0",
-      rawDeltaTime: "0",
-      deltaTime: "0",
-      FPS: "0"
-    };
-    this.folder = parentFolder.addFolder({ title: "renderStats", expanded });
-    this.performance = this.folder.addFolder({ title: "performance", expanded: true });
-    this.defails = this.folder.addFolder({ title: "pipeline details", expanded: false });
-    this.folder.addBlade({ view: "separator" });
-    this.performance.addBinding(this.statsData, "FPS", { readonly: true });
-    this.performance.addBinding(this.statsData, "deltaTime", { readonly: true });
-    this.performance.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
-    this.defails.addBinding(this.statsData, "triangles", { readonly: true });
-    this.defails.addBinding(this.statsData, "geometries", { readonly: true });
-    this.defails.addBinding(this.statsData, "textures", { readonly: true });
-    this.defails.addBinding(this.statsData, "shaders", { readonly: true });
-    this.defails.addBinding(this.statsData, "postPasses", { readonly: true });
-    this.defails.addBinding(this.statsData, "drawCalls", { readonly: true });
-  }
-  update(renderer, composer, timeManager) {
-    const { geometries, textures } = renderer.info.memory;
-    const { triangles, calls } = renderer.info.render;
-    this.statsData.triangles = triangles.toString();
-    this.statsData.geometries = geometries.toString();
-    this.statsData.textures = textures.toString();
-    this.statsData.shaders = renderer.info.programs.length.toString();
-    this.statsData.postPasses = composer.passes.length.toString();
-    this.statsData.drawCalls = calls.toString();
-    this.statsData.rawDeltaTime = (Math.round(timeManager.rawDeltaTime * 1e5) / 1e5).toString();
-    this.statsData.deltaTime = (Math.round(timeManager.deltaTime * 1e5) / 1e5).toString();
-    this.statsData.FPS = timeManager.fps.toString();
-  }
-};
-
 // src/tweakpane/tweakPaneStyle.ts
 var tweakPaneStyle = `
 :root {
@@ -2736,6 +2814,122 @@ var TweakPane = class {
   }
 };
 
+// src/rendering/composer.ts
+import { N8AOPostPass } from "n8ao";
+import {
+  EffectComposer as EffectComposer2,
+  RenderPass,
+  EffectPass as EffectPass2,
+  FXAAEffect,
+  ShaderPass,
+  BloomEffect,
+  SSAOEffect as SSAOEffect2,
+  BlendFunction as BlendFunction2,
+  TextureEffect,
+  ToneMappingEffect,
+  SMAAEffect,
+  SMAAPreset,
+  EdgeDetectionMode,
+  PredicationMode,
+  NormalPass as NormalPass2
+} from "postprocessing";
+import {
+  AmbientLight,
+  Color as Color6,
+  Fog,
+  HalfFloatType,
+  LinearSRGBColorSpace,
+  LoadingManager as LoadingManager2,
+  PMREMGenerator,
+  Scene as Scene3,
+  Vector2 as Vector22,
+  WebGLRenderer as WebGLRenderer2
+} from "three";
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
+
+// src/sun/Sun.ts
+import { CameraHelper, Color as Color5, DirectionalLight, Group as Group3, OrthographicCamera, Vector3 as Vector38 } from "three";
+var Sun = class extends Group3 {
+  constructor() {
+    super();
+    this.debug = false;
+    this.sunOffset = new Vector38(
+      39 * (Math.PI / 180),
+      50 * (Math.PI / 180),
+      100
+    );
+    this.shadowResolution = 8192;
+    this.shadowCamFrustum = 50;
+    this.camHelper = null;
+    this.target = null;
+    this.shadowCamera = new OrthographicCamera(
+      -this.shadowCamFrustum,
+      this.shadowCamFrustum,
+      this.shadowCamFrustum,
+      -this.shadowCamFrustum,
+      0.1,
+      200
+    );
+    if (this.debug === true) {
+      this.camHelper = new CameraHelper(this.shadowCamera);
+    }
+    this.directionalLight = new DirectionalLight(16777215, 0.5);
+    this.directionalLight.shadow.normalBias = 0.05;
+    this.directionalLight.shadow.radius = 1.5;
+    this.directionalLight.shadow.camera = this.shadowCamera;
+    this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
+    this.directionalLight.castShadow = true;
+    this.setColor();
+    this.updateCharacterPosition(new Vector38(0, 0, 0));
+    this.add(this.directionalLight);
+    if (this.debug === true && this.camHelper instanceof CameraHelper) {
+      this.add(this.camHelper);
+    }
+  }
+  updateCharacterPosition(position) {
+    if (!position)
+      return;
+    this.target = position;
+    this.setSunPosition(this.sunOffset.x, this.sunOffset.y);
+  }
+  setAzimuthalAngle(angle) {
+    if (this.sunOffset)
+      this.sunOffset.x = angle;
+    if (this.target)
+      this.updateCharacterPosition(this.target);
+  }
+  setPolarAngle(angle) {
+    if (this.sunOffset)
+      this.sunOffset.y = angle;
+    if (this.target)
+      this.updateCharacterPosition(this.target);
+  }
+  setIntensity(intensity) {
+    this.directionalLight.intensity = intensity;
+  }
+  setColor() {
+    this.directionalLight.color = new Color5().setRGB(
+      sunValues.sunColor.r,
+      sunValues.sunColor.g,
+      sunValues.sunColor.b
+    );
+  }
+  setSunPosition(azimuthalAngle, polarAngle) {
+    if (!this.target)
+      return;
+    const distance = this.sunOffset.z;
+    const sphericalPosition = new Vector38(
+      distance * Math.sin(polarAngle) * Math.cos(azimuthalAngle),
+      distance * Math.cos(polarAngle),
+      distance * Math.sin(polarAngle) * Math.sin(azimuthalAngle)
+    );
+    const newSunPosition = this.target.clone().add(sphericalPosition);
+    this.directionalLight.position.set(newSunPosition.x, newSunPosition.y, newSunPosition.z);
+    this.directionalLight.target.position.copy(this.target.clone());
+    this.directionalLight.target.updateMatrixWorld();
+  }
+};
+
 // src/rendering/post-effects/bright-contrast-sat.ts
 import { ShaderMaterial, Uniform } from "three";
 
@@ -2883,8 +3077,8 @@ var GaussGrainEffect = new ShaderMaterial2({
 // src/rendering/composer.ts
 var Composer = class {
   constructor(scene, camera, spawnSun = false) {
-    this.width = window.innerWidth;
-    this.height = window.innerHeight;
+    this.width = 1;
+    this.height = 1;
     this.resolution = new Vector22(this.width, this.height);
     this.isEnvHDRI = false;
     this.bcs = BrightnessContrastSaturation;
@@ -2892,6 +3086,7 @@ var Composer = class {
     this.ambientLight = null;
     this.sun = null;
     this.scene = scene;
+    this.postPostScene = new Scene3();
     this.camera = camera;
     this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer2({
@@ -2908,11 +3103,9 @@ var Composer = class {
     this.renderer.toneMappingExposure = rendererValues.exposure;
     this.setAmbientLight();
     this.setFog();
-    document.body.appendChild(this.renderer.domElement);
-    this.composer = new EffectComposer2(this.renderer, {
+    this.effectComposer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType
     });
-    this.tweakPane = new TweakPane(this.renderer, this.scene, this.composer);
     this.renderPass = new RenderPass(this.scene, this.camera);
     this.normalPass = new NormalPass2(this.scene, this.camera);
     this.normalPass.enabled = ppssaoValues.enabled;
@@ -2981,26 +3174,33 @@ var Composer = class {
     this.bcs.uniforms.saturation.value = bcsValues.saturation;
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
     this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
-    this.composer.addPass(this.renderPass);
+    this.effectComposer.addPass(this.renderPass);
     if (ppssaoValues.enabled) {
-      this.composer.addPass(this.normalPass);
-      this.composer.addPass(this.ppssaoPass);
+      this.effectComposer.addPass(this.normalPass);
+      this.effectComposer.addPass(this.ppssaoPass);
     }
     if (n8ssaoValues.enabled) {
-      this.composer.addPass(this.n8aopass);
-    }
-    this.composer.addPass(this.fxaaPass);
-    this.composer.addPass(this.smaaPass);
-    this.composer.addPass(this.bloomPass);
-    this.composer.addPass(this.toneMappingPass);
-    this.composer.addPass(this.bcsPass);
-    this.composer.addPass(this.gaussGrainPass);
+      this.effectComposer.addPass(this.n8aopass);
+    }
+    this.effectComposer.addPass(this.fxaaPass);
+    this.effectComposer.addPass(this.smaaPass);
+    this.effectComposer.addPass(this.bloomPass);
+    this.effectComposer.addPass(this.toneMappingPass);
+    this.effectComposer.addPass(this.bcsPass);
+    this.effectComposer.addPass(this.gaussGrainPass);
     if (this.spawnSun === true) {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
-    this.tweakPane.setupRenderPane(
-      this.composer,
+    this.resizeListener = () => {
+      this.fitContainer();
+    };
+    window.addEventListener("resize", this.resizeListener, false);
+    this.fitContainer();
+  }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupRenderPane(
+      this.effectComposer,
       this.normalPass,
       this.ppssaoEffect,
       this.ppssaoPass,
@@ -3016,14 +3216,32 @@ var Composer = class {
       this.setAmbientLight.bind(this),
       this.setFog.bind(this)
     );
-    window.addEventListener("resize", () => this.updateProjection());
-    this.updateProjection();
   }
-  updateProjection() {
-    this.width = window.innerWidth;
-    this.height = innerHeight;
-    this.resolution = new Vector22(this.width, this.height);
-    this.composer.setSize(this.width, this.height);
+  dispose() {
+    window.removeEventListener("resize", this.resizeListener);
+  }
+  fitContainer() {
+    if (!this) {
+      console.error("Composer not initialized");
+      return;
+    }
+    const parentElement = this.renderer.domElement.parentNode;
+    if (!parentElement) {
+      return;
+    }
+    this.width = parentElement.clientWidth;
+    this.height = parentElement.clientHeight;
+    this.camera.aspect = this.width / this.height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.resolution.set(
+      this.width * window.devicePixelRatio,
+      this.height * window.devicePixelRatio
+    );
+    this.effectComposer.setSize(
+      this.width / window.devicePixelRatio,
+      this.height / window.devicePixelRatio
+    );
     this.renderPass.setSize(this.width, this.height);
     if (ppssaoValues.enabled) {
       this.normalPass.setSize(this.width, this.height);
@@ -3040,19 +3258,14 @@ var Composer = class {
     this.gaussGrainPass.setSize(this.width, this.height);
     this.renderer.setSize(this.width, this.height);
   }
-  isTweakPaneVisible() {
-    return this.tweakPane.guiVisible;
-  }
   render(timeManager) {
     this.renderer.info.reset();
     this.normalPass.texture.needsUpdate = true;
     this.gaussGrainEffect.uniforms.resolution.value = this.resolution;
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
     this.gaussGrainEffect.uniforms.alpha.value = 1;
-    this.composer.render();
-    if (this.tweakPane.guiVisible) {
-      this.tweakPane.updateStats(timeManager);
-    }
+    this.effectComposer.render();
+    this.renderer.render(this.postPostScene, this.camera);
   }
   useHDRI(url, fromFile = false) {
     if (this.isEnvHDRI && fromFile === false || !this.renderer)
@@ -3181,17 +3394,17 @@ import {
   MMLCollisionTrigger
 } from "mml-web";
 import {
-  Box3 as Box32,
+  Box3,
   Color as Color7,
   DoubleSide,
-  Euler,
+  Euler as Euler2,
   Group as Group4,
   Line3 as Line32,
   Matrix4 as Matrix42,
-  Mesh as Mesh3,
+  Mesh as Mesh4,
   MeshBasicMaterial as MeshBasicMaterial3,
   Ray,
-  Vector3 as Vector38
+  Vector3 as Vector39
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
@@ -3199,14 +3412,14 @@ import { MeshBVH, MeshBVHVisualizer } from "three-mesh-bvh";
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
-    this.tempVector = new Vector38();
-    this.tempVector2 = new Vector38();
-    this.tempVector3 = new Vector38();
+    this.tempVector = new Vector39();
+    this.tempVector2 = new Vector39();
+    this.tempVector3 = new Vector39();
     this.tempRay = new Ray();
     this.tempMatrix = new Matrix42();
     this.tempMatrix2 = new Matrix42();
-    this.tempBox = new Box32();
-    this.tempEuler = new Euler();
+    this.tempBox = new Box3();
+    this.tempEuler = new Euler2();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -3267,7 +3480,7 @@ var CollisionsManager = class {
     };
     if (this.debug) {
       newBufferGeometry.boundsTree = meshBVH;
-      const wireframeMesh = new Mesh3(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
+      const wireframeMesh = new Mesh4(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
       const normalsHelper = new VertexNormalsHelper(wireframeMesh, 0.25, 65280);
       const visualizer = new MeshBVHVisualizer(wireframeMesh, 4);
       visualizer.edgeMaterial.color = new Color7("blue");
@@ -3350,7 +3563,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector38().copy(closestPointOnSegment);
+            collisionPosition = new Vector39().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -3399,11 +3612,13 @@ export {
   AnimationState,
   CameraManager,
   CharacterManager,
+  CharacterModelLoader,
   CollisionsManager,
   Composer,
   KeyInputManager,
   MMLCompositionScene,
   Sun,
-  TimeManager
+  TimeManager,
+  TweakPane
 };
 //# sourceMappingURL=index.js.map