@mml-io/3d-web-client-core 0.12.0 → 0.12.2

package/build/index.js

@@ -100,8 +100,8 @@ var CameraManager = class {
     this.maxDistance = 8;
     this.initialFOV = 60;
     this.fov = this.initialFOV;
-    this.minFOV = 50;
-    this.maxFOV = 70;
+    this.minFOV = 85;
+    this.maxFOV = 60;
     this.targetFOV = this.initialFOV;
     this.minPolarAngle = Math.PI * 0.25;
     this.maxPolarAngle = Math.PI * 0.95;
@@ -199,10 +199,12 @@ var CameraManager = class {
     this.fov = this.targetFOV;
   }
   adjustCameraPosition() {
-    this.rayCaster.set(
-      this.camera.position,
-      this.target.clone().sub(this.camera.position).normalize()
-    );
+    const offsetDistance = 0.5;
+    const offset = new Vector32(0, 0, offsetDistance);
+    offset.applyEuler(this.camera.rotation);
+    const rayOrigin = this.camera.position.clone().add(offset);
+    const rayDirection = this.target.clone().sub(rayOrigin).normalize();
+    this.rayCaster.set(rayOrigin, rayDirection);
     const firstRaycastHit = this.collisionsManager.raycastFirst(this.rayCaster.ray);
     const cameraToPlayerDistance = this.camera.position.distanceTo(this.target);
     if (firstRaycastHit !== null && firstRaycastHit[0] <= cameraToPlayerDistance) {
@@ -260,7 +262,7 @@ import { Color as Color3, Group, Vector3 as Vector34 } from "three";
 
 // src/character/CharacterModel.ts
 import {
-  Character as MMLCharacter,
+  MMLCharacter,
   ModelLoader,
   parseMMLDescription
 } from "@mml-io/3d-web-avatar";
@@ -271,7 +273,7 @@ import {
 } from "three";
 
 // src/character/CharacterMaterial.ts
-import { Color, MeshPhysicalMaterial, UniformsUtils } from "three";
+import { Color, MeshStandardMaterial, UniformsUtils } from "three";
 
 // src/rendering/shaders/bayer-dither.ts
 var bayerDither = (
@@ -365,50 +367,23 @@ ${before}
 
 // src/tweakpane/blades/characterFolder.ts
 var characterValues = {
-  transmission: 0.01,
   metalness: 0.2,
   roughness: 0.8,
-  ior: 1,
-  thickness: 0.1,
-  specularColor: { r: 1, g: 1, b: 1 },
-  specularIntensity: 0.1,
   emissive: { r: 1, g: 1, b: 1 },
   emissiveIntensity: 0.01,
-  envMapIntensity: 0.12,
-  sheenColor: { r: 1, g: 1, b: 1 },
-  sheen: 0.5,
-  clearcoat: 0,
-  clearcoatRoughness: 0
+  envMapIntensity: 0.12
 };
 var characterOptions = {
-  transmission: { min: 0.01, max: 3, step: 0.01 },
   metalness: { min: 0, max: 1, step: 0.01 },
   roughness: { min: 0, max: 1, step: 0.01 },
-  ior: { min: 1, max: 5, step: 0.01 },
-  thickness: { min: 0, max: 1, step: 0.01 },
-  specularIntensity: { min: 0, max: 1, step: 0.01 },
   emissiveIntensity: { min: 0, max: 1, step: 0.01 },
-  envMapIntensity: { min: 0, max: 1, step: 0.01 },
-  sheen: { min: 0, max: 1, step: 0.01 },
-  clearcoat: { min: 0, max: 1, step: 0.01 },
-  clearcoatRoughness: { min: 0, max: 1, step: 0.01 }
+  envMapIntensity: { min: 0, max: 1, step: 0.01 }
 };
 var CharacterFolder = class {
   constructor(parentFolder, expand = false) {
     this.folder = parentFolder.addFolder({ title: "characterMaterial", expanded: expand });
-    this.folder.addBinding(characterValues, "transmission", characterOptions.transmission);
     this.folder.addBinding(characterValues, "metalness", characterOptions.metalness);
     this.folder.addBinding(characterValues, "roughness", characterOptions.roughness);
-    this.folder.addBinding(characterValues, "ior", characterOptions.ior);
-    this.folder.addBinding(characterValues, "thickness", characterOptions.thickness);
-    this.folder.addBinding(characterValues, "specularColor", {
-      color: { type: "float" }
-    });
-    this.folder.addBinding(
-      characterValues,
-      "specularIntensity",
-      characterOptions.specularIntensity
-    );
     this.folder.addBinding(characterValues, "emissive", {
       color: { type: "float" }
     });
@@ -418,16 +393,6 @@ var CharacterFolder = class {
       characterOptions.emissiveIntensity
     );
     this.folder.addBinding(characterValues, "envMapIntensity", characterOptions.envMapIntensity);
-    this.folder.addBinding(characterValues, "sheenColor", {
-      color: { type: "float" }
-    });
-    this.folder.addBinding(characterValues, "sheen", characterOptions.sheen);
-    this.folder.addBinding(characterValues, "clearcoat", characterOptions.clearcoat);
-    this.folder.addBinding(
-      characterValues,
-      "clearcoatRoughness",
-      characterOptions.clearcoatRoughness
-    );
   }
   setupChangeEvent() {
     this.folder.on("change", (e) => {
@@ -435,15 +400,6 @@ var CharacterFolder = class {
       if (!target)
         return;
       switch (target) {
-        case "specularColor": {
-          const value = e.value;
-          characterValues.specularColor = {
-            r: value.r,
-            g: value.g,
-            b: value.b
-          };
-          break;
-        }
         case "emissive": {
           const value = e.value;
           characterValues.emissive = {
@@ -453,15 +409,6 @@ var CharacterFolder = class {
           };
           break;
         }
-        case "sheenColor": {
-          const value = e.value;
-          characterValues.sheenColor = {
-            r: value.r,
-            g: value.g,
-            b: value.b
-          };
-          break;
-        }
         default: {
           break;
         }
@@ -471,83 +418,59 @@ var CharacterFolder = class {
 };
 
 // src/character/CharacterMaterial.ts
-var CharacterMaterial = class extends MeshPhysicalMaterial {
-  constructor(color) {
+var CharacterMaterial = class extends MeshStandardMaterial {
+  constructor(isLocal, cameraManager, characterId, originalMaterial, colorOverride) {
     super();
-    this.uniforms = {};
+    this.isLocal = isLocal;
+    this.cameraManager = cameraManager;
+    this.characterId = characterId;
+    this.originalMaterial = originalMaterial;
+    this.colorOverride = colorOverride;
+    this.uniforms = {
+      discardAll: { value: 1 },
+      diffuseColor: { value: new Color() },
+      map: { value: null }
+    };
     this.colorsCube216 = [];
-    if (color) {
-      this.color = color;
-    }
-    this.transmission = characterValues.transmission;
-    this.metalness = characterValues.metalness;
-    this.roughness = characterValues.roughness;
-    this.ior = characterValues.ior;
-    this.thickness = characterValues.thickness;
-    this.specularColor = new Color().setRGB(
-      characterValues.specularColor.r,
-      characterValues.specularColor.g,
-      characterValues.specularColor.b
-    );
-    this.specularIntensity = characterValues.specularIntensity;
-    this.emissive = new Color().setRGB(
-      characterValues.emissive.r,
-      characterValues.emissive.g,
-      characterValues.emissive.b
-    );
-    this.emissiveIntensity = characterValues.emissiveIntensity;
+    this.targetAlpha = 1;
+    this.currentAlpha = 1;
+    this.copy(this.originalMaterial);
+    this.generateColorCube();
+    this.color = this.colorOverride || this.colorsCube216[this.characterId];
     this.envMapIntensity = characterValues.envMapIntensity;
-    this.sheenColor = new Color().setRGB(
-      characterValues.sheenColor.r,
-      characterValues.sheenColor.g,
-      characterValues.sheenColor.b
-    );
-    this.sheen = characterValues.sheen;
-    this.clearcoat = characterValues.clearcoat;
-    this.clearcoatRoughness = characterValues.clearcoatRoughness;
+    this.transparent = true;
+    this.side = this.originalMaterial.side;
     this.onBeforeCompile = (shader) => {
       this.uniforms = UniformsUtils.clone(shader.uniforms);
       this.uniforms.nearClip = { value: 0.01 };
       this.uniforms.farClip = { value: 1e3 };
-      this.uniforms.ditheringNear = { value: 0.25 };
+      this.uniforms.ditheringNear = { value: 0.3 };
       this.uniforms.ditheringRange = { value: 0.5 };
       this.uniforms.time = { value: 0 };
       this.uniforms.diffuseRandomColor = { value: new Color() };
+      this.uniforms.discardAll = { value: 0 };
       shader.uniforms = this.uniforms;
+      shader.vertexShader = "varying vec3 vWorldPosition;\n" + shader.vertexShader;
+      shader.vertexShader = shader.vertexShader.replace(
+        "#include <worldpos_vertex>",
+        "vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );\nvWorldPosition = worldPosition.xyz;"
+      );
       shader.vertexShader = injectBeforeMain(shader.vertexShader, "varying vec2 vUv;");
       shader.vertexShader = injectInsideMain(shader.vertexShader, "vUv = uv;");
       shader.fragmentShader = injectBeforeMain(
         shader.fragmentShader,
         /* glsl */
         `
-          //#define showPattern
           varying vec2 vUv;
+          varying vec3 vWorldPosition;
           uniform float nearClip;
           uniform float farClip;
           uniform float ditheringNear;
           uniform float ditheringRange;
           uniform float time;
           uniform vec3 diffuseRandomColor;
+          uniform int discardAll;
           ${bayerDither}
-
-          #ifdef showPattern
-          vec2 rand2(vec2 p) {
-            return fract(vec2(sin(p.x * 591.32 + p.y * 154.077), cos(p.x * 391.32 + p.y * 49.077)));
-          }
-          float voronoi(in vec2 x) {
-            vec2 p = floor(x);
-            vec2 f = fract(x);
-            float minDistance = 1.0;
-            for(int j = -1; j <= 1; j ++)
-            for(int i = -1; i <= 1; i ++) {
-              vec2 b = vec2(i, j);
-              vec2 rand = 0.5 + 0.5 * sin(time * 1.5 + 12.0 * rand2(p + b));
-              vec2 r = vec2(b) - f + rand;
-              minDistance = min(minDistance, length(r));
-            }
-            return minDistance;
-          }
-          #endif
         `
       );
       shader.fragmentShader = injectBefore(
@@ -555,42 +478,32 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
         "#include <output_fragment>",
         /* glsl */
         `
-          float distance = length(vWorldPosition - cameraPosition);
-          float normalizedDistance = (distance - nearClip) / (farClip - nearClip);
-          ivec2 p = ivec2(mod(gl_FragCoord.xy, 8.0));
-          float d = 0.0;
-          if (p.x <= 3 && p.y <= 3) {
-            d = bayerDither(bayertl, p);
-          } else if (p.x > 3 && p.y <= 3) {
-            d = bayerDither(bayertr, p - ivec2(4, 0));
-          } else if (p.x <= 3 && p.y > 3) {
-            d = bayerDither(bayerbl, p - ivec2(0, 4));
-          } else if (p.x > 3 && p.y > 3) {
-            d = bayerDither(bayerbr, p - ivec2(4, 4));
+          if (discardAll == 1) {
+            discard;
+          } else {
+            float distance = length(vWorldPosition - cameraPosition);
+            float normalizedDistance = (distance - nearClip) / (farClip - nearClip);
+            ivec2 p = ivec2(mod(gl_FragCoord.xy, 8.0));
+            float d = 0.0;
+            if (p.x <= 3 && p.y <= 3) {
+              d = bayerDither(bayertl, p);
+            } else if (p.x > 3 && p.y <= 3) {
+              d = bayerDither(bayertr, p - ivec2(4, 0));
+            } else if (p.x <= 3 && p.y > 3) {
+              d = bayerDither(bayerbl, p - ivec2(0, 4));
+            } else if (p.x > 3 && p.y > 3) {
+              d = bayerDither(bayerbr, p - ivec2(4, 4));
+            }
+            if (distance <= ditheringNear + d * ditheringRange) discard;  
+            outgoingLight *= diffuseRandomColor;  
           }
-          if (distance <= ditheringNear + d * ditheringRange) discard;
-
-          vec2 uv = vUv;
-          float s = clamp(0.35 + 0.35 * sin(5.0 * -time + vUv.y * 600.0), 0.0, 1.0);
-          float scanLines = pow(s, 1.33);
-
-          outgoingLight *= diffuseRandomColor;
-
-          #ifdef showPattern
-          float val = pow(voronoi(uv * 8.0) * 1.2, 0.5);
-          float thickness = 1.0 / 500.0;
-          vec2 g = step(mod(uv, 0.015), vec2(thickness));
-          float a = 1.0 - clamp(val * (g.x + g.y), 0.0, 1.0);
-          vec3 grid = vec3(smoothstep(0.01, 0.0, a) * 1.15) * diffuseRandomColor;
-          outgoingLight += grid;
-          #endif
         `
       );
     };
-    this.generateColorCube();
+    this.needsUpdate = true;
   }
   generateColorCube() {
-    const saturation = 0.5;
+    const saturation = 1;
     const lightness = 0.9;
     const goldenRatioConjugate = 0.618033988749895;
     let hue = 0;
@@ -602,17 +515,24 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
     }
   }
   update() {
-    this.transmission = characterValues.transmission;
+    if (this.isLocal) {
+      this.targetAlpha = this.cameraManager.targetDistance < 0.4 ? 0 : 1;
+      this.currentAlpha += ease(this.targetAlpha, this.currentAlpha, 0.07);
+      if (this.currentAlpha > 0.999) {
+        this.currentAlpha = 1;
+        this.cameraManager.minPolarAngle = Math.PI * 0.25;
+      }
+      if (this.currentAlpha < 1e-3) {
+        this.currentAlpha = 0;
+        this.cameraManager.minPolarAngle = Math.PI * 0.35;
+      }
+      this.uniforms.discardAll.value = this.currentAlpha === 0 ? 1 : 0;
+      if (this.currentAlpha !== this.opacity) {
+        this.opacity = this.currentAlpha;
+      }
+    }
     this.metalness = characterValues.metalness;
     this.roughness = characterValues.roughness;
-    this.ior = characterValues.ior;
-    this.thickness = characterValues.thickness;
-    this.specularColor = new Color().setRGB(
-      characterValues.specularColor.r,
-      characterValues.specularColor.g,
-      characterValues.specularColor.b
-    );
-    this.specularIntensity = characterValues.specularIntensity;
     this.emissive = new Color().setRGB(
       characterValues.emissive.r,
       characterValues.emissive.g,
@@ -620,14 +540,6 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
     );
     this.emissiveIntensity = characterValues.emissiveIntensity;
     this.envMapIntensity = characterValues.envMapIntensity;
-    this.sheenColor = new Color().setRGB(
-      characterValues.sheenColor.r,
-      characterValues.sheenColor.g,
-      characterValues.sheenColor.b
-    );
-    this.sheen = characterValues.sheen;
-    this.clearcoat = characterValues.clearcoat;
-    this.clearcoatRoughness = characterValues.clearcoatRoughness;
   }
 };
 
@@ -644,13 +556,16 @@ var AnimationState = /* @__PURE__ */ ((AnimationState2) => {
 
 // src/character/CharacterModel.ts
 var CharacterModel = class {
-  constructor(characterDescription, animationConfig, characterModelLoader) {
+  constructor(characterDescription, animationConfig, characterModelLoader, cameraManager, characterId, isLocal) {
     this.characterDescription = characterDescription;
     this.animationConfig = animationConfig;
     this.characterModelLoader = characterModelLoader;
+    this.cameraManager = cameraManager;
+    this.characterId = characterId;
+    this.isLocal = isLocal;
     this.mesh = null;
-    this.material = new CharacterMaterial();
     this.headBone = null;
+    this.materials = /* @__PURE__ */ new Map();
     this.animations = {};
     this.animationMixer = null;
     this.currentAnimation = 0 /* idle */;
@@ -667,22 +582,32 @@ var CharacterModel = class {
       2 /* running */
     );
     await this.setAnimationFromFile(this.animationConfig.airAnimationFileUrl, 4 /* air */);
-    if (this.characterDescription.meshFileUrl) {
-      this.applyCustomMaterial(this.material);
-    }
+    this.applyCustomMaterials();
   }
-  applyCustomMaterial(material) {
+  applyCustomMaterials() {
     if (!this.mesh)
       return;
     this.mesh.traverse((child) => {
-      const asSkinnedMesh = child;
-      if (asSkinnedMesh.isSkinnedMesh) {
-        const mat = asSkinnedMesh.material;
-        if (!mat.name.includes("joints")) {
-          asSkinnedMesh.material = material;
+      if (child.isMesh || child.isSkinnedMesh) {
+        const asMesh = child;
+        const originalMaterial = asMesh.material;
+        if (this.materials.has(originalMaterial.name)) {
+          asMesh.material = this.materials.get(originalMaterial.name);
         } else {
-          const color = mat.color;
-          asSkinnedMesh.material = new CharacterMaterial(color);
+          const material = originalMaterial.name === "body_replaceable_color" ? new CharacterMaterial(
+            this.isLocal,
+            this.cameraManager,
+            this.characterId,
+            originalMaterial
+          ) : new CharacterMaterial(
+            this.isLocal,
+            this.cameraManager,
+            this.characterId,
+            originalMaterial,
+            originalMaterial.color
+          );
+          this.materials.set(originalMaterial.name, material);
+          asMesh.material = material;
         }
       }
     });
@@ -704,7 +629,7 @@ var CharacterModel = class {
     this.animationMixer = new AnimationMixer(this.mesh);
   }
   async composeMMLCharacter(mmlCharacterDescription) {
-    var _a, _b, _c;
+    var _a, _b;
     if (((_a = mmlCharacterDescription.base) == null ? void 0 : _a.url.length) === 0) {
       throw new Error(
         "ERROR: An MML Character Description was provided but it's not a valid <m-character> string, or a valid URL"
@@ -713,14 +638,13 @@ var CharacterModel = class {
     let mergedCharacter = null;
     if (mmlCharacterDescription) {
       const characterBase = ((_b = mmlCharacterDescription.base) == null ? void 0 : _b.url) || null;
-      const parts = [];
-      (_c = mmlCharacterDescription.parts) == null ? void 0 : _c.forEach((part) => {
-        if (part.url)
-          parts.push(part.url);
-      });
       if (characterBase) {
+        this.mmlCharacterDescription = mmlCharacterDescription;
         const mmlCharacter = new MMLCharacter(new ModelLoader());
-        mergedCharacter = await mmlCharacter.mergeBodyParts(characterBase, parts);
+        mergedCharacter = await mmlCharacter.mergeBodyParts(
+          characterBase,
+          mmlCharacterDescription.parts
+        );
         if (mergedCharacter) {
           return mergedCharacter.children[0].children[0];
         }
@@ -812,6 +736,7 @@ var CharacterModel = class {
   update(time) {
     if (this.animationMixer) {
       this.animationMixer.update(time);
+      this.materials.forEach((material) => material.update());
     }
   }
 };
@@ -820,7 +745,7 @@ var CharacterModel = class {
 import {
   CircleGeometry,
   GLSL3,
-  Mesh,
+  Mesh as Mesh2,
   RawShaderMaterial
 } from "three";
 var CharacterSpeakingIndicator = class {
@@ -884,7 +809,7 @@ var CharacterSpeakingIndicator = class {
       transparent: true,
       glslVersion: GLSL3
     });
-    this.mesh = new Mesh(this.geometry, this.material);
+    this.mesh = new Mesh2(this.geometry, this.material);
     this.currentAlpha = 0;
     this.targetAlpha = 0;
     this.scene.add(this.mesh);
@@ -913,13 +838,13 @@ import {
   Color as Color2,
   FrontSide,
   LinearFilter as LinearFilter2,
-  Mesh as Mesh2,
+  Mesh as Mesh3,
   MeshBasicMaterial as MeshBasicMaterial2,
   PlaneGeometry
 } from "three";
 
 // src/character/CanvasText.ts
-import { Texture, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
+import { Texture as Texture2, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
 function getTextAlignOffset(textAlign, width) {
   switch (textAlign) {
     case "center":
@@ -1020,7 +945,7 @@ function CanvasText(message, options) {
 }
 function THREECanvasTextTexture(text, options) {
   const canvas = CanvasText(text, options);
-  const texture = new Texture(canvas);
+  const texture = new Texture2(canvas);
   texture.minFilter = LinearFilter;
   texture.magFilter = LinearFilter;
   texture.format = RGBAFormat;
@@ -1039,7 +964,7 @@ var defaultLabelWidth = 0.25;
 var defaultLabelHeight = 0.125;
 var defaultLabelCastShadows = true;
 var tooltipGeometry = new PlaneGeometry(1, 1, 1, 1);
-var CharacterTooltip = class extends Mesh2 {
+var CharacterTooltip = class extends Mesh3 {
   constructor() {
     super(tooltipGeometry);
     this.visibleOpacity = 0.85;
@@ -1146,7 +1071,7 @@ var CharacterTooltip = class extends Mesh2 {
 
 // src/character/Character.ts
 var Character = class extends Group {
-  constructor(characterDescription, animationConfig, characterModelLoader, characterId, modelLoadedCallback, cameraManager, composer) {
+  constructor(characterDescription, animationConfig, characterModelLoader, characterId, modelLoadedCallback, cameraManager, composer, isLocal) {
     super();
     this.characterDescription = characterDescription;
     this.animationConfig = animationConfig;
@@ -1155,6 +1080,7 @@ var Character = class extends Group {
     this.modelLoadedCallback = modelLoadedCallback;
     this.cameraManager = cameraManager;
     this.composer = composer;
+    this.isLocal = isLocal;
     this.model = null;
     this.color = new Color3();
     this.tooltip = null;
@@ -1167,14 +1093,16 @@ var Character = class extends Group {
     this.model = new CharacterModel(
       this.characterDescription,
       this.animationConfig,
-      this.characterModelLoader
+      this.characterModelLoader,
+      this.cameraManager,
+      this.characterId,
+      this.isLocal
     );
     await this.model.init();
     this.add(this.model.mesh);
     if (this.speakingIndicator === null) {
       this.speakingIndicator = new CharacterSpeakingIndicator(this.composer.postPostScene);
     }
-    this.color = this.model.material.colorsCube216[this.characterId];
     this.modelLoadedCallback();
   }
   updateAnimation(targetAnimation) {
@@ -1197,11 +1125,6 @@ var Character = class extends Group {
         );
       }
     }
-    if (typeof this.model.material.uniforms.time !== "undefined") {
-      this.model.material.uniforms.time.value = time;
-      this.model.material.uniforms.diffuseRandomColor.value = this.color;
-      this.model.material.update();
-    }
     this.model.update(deltaTime);
   }
   getCurrentAnimation() {
@@ -1611,8 +1534,6 @@ var CharacterManager = class {
     this.remoteCharacterControllers = /* @__PURE__ */ new Map();
     this.localCharacterSpawned = false;
     this.localCharacter = null;
-    this.cameraOffsetTarget = 0;
-    this.cameraOffset = 0;
     this.speakingCharacters = /* @__PURE__ */ new Map();
     this.group = new Group2();
   }
@@ -1626,7 +1547,8 @@ var CharacterManager = class {
       () => {
       },
       this.cameraManager,
-      this.composer
+      this.composer,
+      true
     );
     const quaternion = new Quaternion5().setFromEuler(character.rotation);
     this.sendUpdate({
@@ -1665,7 +1587,8 @@ var CharacterManager = class {
       () => {
       },
       this.cameraManager,
-      this.composer
+      this.composer,
+      false
     );
     this.remoteCharacters.set(id, character);
     const remoteController = new RemoteController(character, id);
@@ -1712,12 +1635,9 @@ var CharacterManager = class {
       if (this.timeManager.frame % 2 === 0) {
         this.sendUpdate(this.localController.networkState);
       }
-      this.cameraOffsetTarget = this.cameraManager.targetDistance <= 0.4 ? 0.13 : 0;
-      this.cameraOffset += ease(this.cameraOffsetTarget, this.cameraOffset, 0.1);
-      const targetOffset = new Vector38(0, 0, this.cameraOffset);
-      targetOffset.add(this.headTargetOffset);
-      targetOffset.applyQuaternion(this.localCharacter.quaternion);
-      this.cameraManager.setTarget(targetOffset.add(this.localCharacter.position));
+      const targetOffset = new Vector38();
+      targetOffset.add(this.headTargetOffset).applyQuaternion(this.localCharacter.quaternion).add(this.localCharacter.position);
+      this.cameraManager.setTarget(targetOffset);
       for (const [id, update] of this.clientStates) {
         if (this.remoteCharacters.has(id) && this.speakingCharacters.has(id)) {
           const character = this.remoteCharacters.get(id);
@@ -2067,8 +1987,8 @@ var BrightnessContrastSaturationFolder = class {
 // src/tweakpane/blades/environmentFolder.ts
 var sunValues = {
   sunPosition: {
-    sunAzimuthalAngle: 215,
-    sunPolarAngle: -39
+    sunAzimuthalAngle: 214.5,
+    sunPolarAngle: -41.5
   },
   sunIntensity: 1,
   sunColor: { r: 1, g: 1, b: 1 }
@@ -2222,14 +2142,14 @@ var EnvironmentFolder = class {
 // src/tweakpane/blades/postExtrasFolder.ts
 var extrasValues = {
   grain: 0.055,
-  bloom: 0.25
+  bloom: 3
 };
 var extrasOptions = {
   grain: {
     amount: { min: 0, max: 0.2, step: 2e-3 }
   },
   bloom: {
-    amount: { min: 0, max: 2, step: 0.05 }
+    amount: { min: 0, max: 5, step: 0.05 }
   }
 };
 var PostExtrasFolder = class {
@@ -2262,7 +2182,7 @@ var rendererValues = {
   shadowMap: 2,
   toneMapping: 5,
   exposure: 1,
-  bgIntensity: 0.45,
+  bgIntensity: 1,
   bgBlurriness: 0
 };
 var rendererOptions = {
@@ -2358,18 +2278,15 @@ var RendererStatsFolder = class {
       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 });
+    this.folder.addBinding(this.statsData, "FPS", { readonly: true });
+    this.folder.addBinding(this.statsData, "deltaTime", { readonly: true });
+    this.folder.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
+    this.folder.addBinding(this.statsData, "triangles", { readonly: true });
+    this.folder.addBinding(this.statsData, "geometries", { readonly: true });
+    this.folder.addBinding(this.statsData, "textures", { readonly: true });
+    this.folder.addBinding(this.statsData, "shaders", { readonly: true });
+    this.folder.addBinding(this.statsData, "postPasses", { readonly: true });
+    this.folder.addBinding(this.statsData, "drawCalls", { readonly: true });
   }
   update(renderer, composer, timeManager) {
     const { geometries, textures } = renderer.info.memory;
@@ -2716,7 +2633,7 @@ var ToneMappingFolder = class {
 // src/tweakpane/tweakPaneStyle.ts
 var tweakPaneStyle = `
 :root {
-  --tp-base-background-color: rgba(0, 0, 0, 0.6);
+  --tp-base-background-color: rgba(12, 12, 12, 0.6);
   --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
   --tp-button-background-color: hsla(0, 0%, 80%, 1);
   --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
@@ -2737,6 +2654,9 @@ var tweakPaneStyle = `
   --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);
   --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
   --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .tp-brkv {
@@ -2746,28 +2666,40 @@ var tweakPaneStyle = `
 }
 
 .tp-dfwv {
+  z-index: 100;
   color: white;
-  backdrop-filter: blur(12px);
-  width: 360px !important;
+  width: 600px !important;
   display: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
+.tp-fldv {
+  margin: 1px 0px 0px 0px !important;
+}
+
+.tp-fldv_b {
+  overflow: visible !important;
+}
+
 .tp-fldv_t {
-  font-size: 11px;
-  background-color: rgba(0, 0, 0, 0.1);
+  font-size: 13px;
+  font-weight: 900;
+  color: #ffffff;
+  background-color: rgba(70, 70, 70, 0.3);
+  border-top: 1px solid rgba(210, 210, 210, 0.1);
+  border-radius: 3px;
 }
 
 .tp-lblv_l {
-  font-size: 11px;
+  font-size: 12px;
   padding-left: 0px !important;
   padding-right: 0px !important;
 }
 
 .tp-lblv_v {
-  width: 180px;
+  width: 150px;
 }
 
 .tp-sldtxtv_t {
@@ -2775,9 +2707,13 @@ var tweakPaneStyle = `
 }
 
 .tp-sglv_i {
-  font-size: 11px;
+  font-size: 12px;
   color: rgba(255, 255, 255, 0.7);
 }
+
+.tp-ckbv_w {
+  border: 1px solid rgba(200, 200, 250, 0.2);
+}
 `;
 
 // src/tweakpane/TweakPane.ts
@@ -2786,9 +2722,13 @@ var TweakPane = class {
     this.renderer = renderer;
     this.scene = scene;
     this.composer = composer;
-    this.gui = new Pane();
     this.saveVisibilityInLocalStorage = true;
     this.guiVisible = false;
+    const appWrapper = document.getElementById("app");
+    const tweakPaneWrapper = document.createElement("div");
+    tweakPaneWrapper.id = "tweakpane-panel";
+    appWrapper.appendChild(tweakPaneWrapper);
+    this.gui = new Pane({ container: tweakPaneWrapper });
     this.gui.registerPlugin(EssentialsPlugin);
     if (this.saveVisibilityInLocalStorage) {
       const localStorageGuiVisible = localStorage.getItem("guiVisible");
@@ -2815,21 +2755,22 @@ var TweakPane = class {
     this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
     this.export = this.gui.addFolder({ title: "import / export", expanded: false });
     window.addEventListener("keydown", this.processKey.bind(this));
-    this.setupGUIListeners.bind(this)();
     this.setupRenderPane = this.setupRenderPane.bind(this);
-  }
-  processKey(e) {
-    if (e.key === "p")
-      this.toggleGUI();
+    this.setupGUIListeners.bind(this)();
   }
   setupGUIListeners() {
     const gui = this.gui;
     const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "unset" : "none";
+    paneElement.style.right = this.guiVisible ? "0px" : "-450px";
+    this.gui.element.addEventListener("mouseenter", () => setTweakpaneActive(true));
     this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
     this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
     this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
   }
+  processKey(e) {
+    if (e.key === "p")
+      this.toggleGUI();
+  }
   setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
       this.scene,
@@ -2901,10 +2842,10 @@ var TweakPane = class {
     input.click();
   }
   toggleGUI() {
+    this.guiVisible = !this.guiVisible;
     const gui = this.gui;
     const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "none" : "unset";
-    this.guiVisible = !this.guiVisible;
+    paneElement.style.right = this.guiVisible ? "0px" : "-450px";
     if (this.saveVisibilityInLocalStorage) {
       localStorage.setItem("guiVisible", this.guiVisible === true ? "true" : "false");
     }
@@ -2972,8 +2913,8 @@ var Sun = class extends Group4 {
     }
     this.directionalLight = new DirectionalLight(16777215, 0.5);
     this.directionalLight.intensity = sunValues.sunIntensity;
-    this.directionalLight.shadow.normalBias = 0.05;
-    this.directionalLight.shadow.radius = 1.5;
+    this.directionalLight.shadow.normalBias = 0.01;
+    this.directionalLight.shadow.radius = 0.02;
     this.directionalLight.shadow.camera = this.shadowCamera;
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
     this.directionalLight.castShadow = true;
@@ -3822,7 +3763,7 @@ var EffectShader = {
 import {
   BufferAttribute,
   BufferGeometry,
-  Mesh as Mesh3,
+  Mesh as Mesh4,
   OrthographicCamera as OrthographicCamera2,
   Sphere
 } from "three";
@@ -3838,7 +3779,7 @@ var FullScreenTriangle = class {
     this.geometry.boundingSphere = new Sphere();
     this.geometry.computeBoundingSphere = function() {
     };
-    this.mesh = new Mesh3(this.geometry, material);
+    this.mesh = new Mesh4(this.geometry, material);
     this.mesh.frustumCulled = false;
   }
   get material() {
@@ -4686,7 +4627,6 @@ var Composer = class {
         if (envMap) {
           envMap.colorSpace = LinearSRGBColorSpace;
           envMap.needsUpdate = true;
-          this.scene.environment = envMap;
           this.scene.background = envMap;
           this.scene.backgroundIntensity = rendererValues.bgIntensity;
           this.isEnvHDRI = true;
@@ -4809,7 +4749,7 @@ import {
   Group as Group5,
   Line3 as Line32,
   Matrix4 as Matrix46,
-  Mesh as Mesh4,
+  Mesh as Mesh5,
   MeshBasicMaterial as MeshBasicMaterial3,
   Quaternion as Quaternion6,
   Ray as Ray2,
@@ -4897,7 +4837,7 @@ var CollisionsManager = class {
     };
     if (this.debug) {
       newBufferGeometry.boundsTree = meshBVH;
-      const wireframeMesh = new Mesh4(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
+      const wireframeMesh = new Mesh5(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
       const normalsHelper = new VertexNormalsHelper(wireframeMesh, 0.25, 65280);
       const visualizer = new MeshBVHHelper(wireframeMesh, 4);
       visualizer.edgeMaterial.color = new Color8("blue");
@@ -5003,13 +4943,10 @@ var CollisionsManager = class {
     return collisionPosition;
   }
   applyColliders(tempSegment, radius) {
-    let collidedElements = null;
+    const collidedElements = /* @__PURE__ */ new Map();
     for (const meshState of this.collisionMeshState.values()) {
       const collisionPosition = this.applyCollider(tempSegment, radius, meshState);
       if (collisionPosition && meshState.trackCollisions) {
-        if (collidedElements === null) {
-          collidedElements = /* @__PURE__ */ new Map();
-        }
         const relativePosition = getRelativePositionAndRotationRelativeToObject(
           {
             position: collisionPosition,
@@ -5022,7 +4959,16 @@ var CollisionsManager = class {
         });
       }
     }
-    this.collisionTrigger.setCurrentCollisions(collidedElements);
+    const reportedCollidingElements = new Map(collidedElements);
+    if (this.previouslyCollidingElements) {
+      for (const [element, position] of this.previouslyCollidingElements) {
+        if (!reportedCollidingElements.has(element)) {
+          reportedCollidingElements.set(element, position);
+        }
+      }
+    }
+    this.previouslyCollidingElements = collidedElements;
+    this.collisionTrigger.setCurrentCollisions(reportedCollidingElements);
   }
 };
 export {