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

package/build/index.js

@@ -203,10 +203,10 @@ var CameraManager = class {
       this.camera.position,
       this.target.clone().sub(this.camera.position).normalize()
     );
-    const minimumDistance = this.collisionsManager.raycastFirstDistance(this.rayCaster.ray);
+    const firstRaycastHit = this.collisionsManager.raycastFirst(this.rayCaster.ray);
     const cameraToPlayerDistance = this.camera.position.distanceTo(this.target);
-    if (minimumDistance !== null && minimumDistance <= cameraToPlayerDistance) {
-      this.targetDistance = cameraToPlayerDistance - minimumDistance;
+    if (firstRaycastHit !== null && firstRaycastHit[0] <= cameraToPlayerDistance) {
+      this.targetDistance = cameraToPlayerDistance - firstRaycastHit[0];
       this.distance = this.targetDistance;
     } else {
       this.targetDistance += (this.desiredDistance - this.targetDistance) * this.dampingFactor * 4;
@@ -259,11 +259,15 @@ var CameraManager = class {
 import { Color as Color3, Group, Vector3 as Vector34 } from "three";
 
 // src/character/CharacterModel.ts
+import {
+  Character as MMLCharacter,
+  ModelLoader,
+  parseMMLDescription
+} from "@mml-io/3d-web-avatar";
 import {
   AnimationClip,
   AnimationMixer,
-  LoopRepeat,
-  Object3D
+  LoopRepeat
 } from "three";
 
 // src/character/CharacterMaterial.ts
@@ -362,15 +366,15 @@ ${before}
 // src/tweakpane/blades/characterFolder.ts
 var characterValues = {
   transmission: 0.01,
-  metalness: 0.8,
-  roughness: 0.05,
+  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.1,
-  envMapIntensity: 0.8,
+  emissiveIntensity: 0.01,
+  envMapIntensity: 0.12,
   sheenColor: { r: 1, g: 1, b: 1 },
   sheen: 0.5,
   clearcoat: 0,
@@ -468,11 +472,13 @@ var CharacterFolder = class {
 
 // src/character/CharacterMaterial.ts
 var CharacterMaterial = class extends MeshPhysicalMaterial {
-  constructor() {
+  constructor(color) {
     super();
     this.uniforms = {};
     this.colorsCube216 = [];
-    this.color = new Color(16777215);
+    if (color) {
+      this.color = color;
+    }
     this.transmission = characterValues.transmission;
     this.metalness = characterValues.metalness;
     this.roughness = characterValues.roughness;
@@ -578,16 +584,14 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
           vec3 grid = vec3(smoothstep(0.01, 0.0, a) * 1.15) * diffuseRandomColor;
           outgoingLight += grid;
           #endif
-
-          outgoingLight += smoothstep(0.1, 0.0, scanLines) * 0.1;
         `
       );
     };
     this.generateColorCube();
   }
   generateColorCube() {
-    const saturation = 0.4;
-    const lightness = 0.7;
+    const saturation = 0.5;
+    const lightness = 0.9;
     const goldenRatioConjugate = 0.618033988749895;
     let hue = 0;
     for (let i = 0; i < 216; i++) {
@@ -640,8 +644,9 @@ var AnimationState = /* @__PURE__ */ ((AnimationState2) => {
 
 // src/character/CharacterModel.ts
 var CharacterModel = class {
-  constructor(characterDescription, characterModelLoader) {
+  constructor(characterDescription, animationConfig, characterModelLoader) {
     this.characterDescription = characterDescription;
+    this.animationConfig = animationConfig;
     this.characterModelLoader = characterModelLoader;
     this.mesh = null;
     this.material = new CharacterMaterial();
@@ -652,65 +657,130 @@ var CharacterModel = class {
   }
   async init() {
     await this.loadMainMesh();
+    await this.setAnimationFromFile(this.animationConfig.idleAnimationFileUrl, 0 /* idle */);
     await this.setAnimationFromFile(
-      this.characterDescription.idleAnimationFileUrl,
-      0 /* idle */
-    );
-    await this.setAnimationFromFile(
-      this.characterDescription.jogAnimationFileUrl,
+      this.animationConfig.jogAnimationFileUrl,
       1 /* walking */
     );
     await this.setAnimationFromFile(
-      this.characterDescription.sprintAnimationFileUrl,
+      this.animationConfig.sprintAnimationFileUrl,
       2 /* running */
     );
-    await this.setAnimationFromFile(
-      this.characterDescription.airAnimationFileUrl,
-      4 /* air */
-    );
-    this.applyMaterialToAllSkinnedMeshes(this.material);
+    await this.setAnimationFromFile(this.animationConfig.airAnimationFileUrl, 4 /* air */);
+    if (this.characterDescription.meshFileUrl) {
+      this.applyCustomMaterial(this.material);
+    }
+  }
+  applyCustomMaterial(material) {
+    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;
+        } else {
+          const color = mat.color;
+          asSkinnedMesh.material = new CharacterMaterial(color);
+        }
+      }
+    });
   }
   updateAnimation(targetAnimation) {
     if (this.currentAnimation !== targetAnimation) {
       this.transitionToAnimation(targetAnimation);
     }
   }
-  applyMaterialToAllSkinnedMeshes(material) {
-    if (!this.mesh)
-      return;
+  setMainMesh(mainMesh) {
+    this.mesh = mainMesh;
+    this.mesh.position.set(0, -0.4, 0);
     this.mesh.traverse((child) => {
       if (child.type === "SkinnedMesh") {
-        child.material = material;
+        child.castShadow = true;
+        child.receiveShadow = true;
       }
     });
+    this.animationMixer = new AnimationMixer(this.mesh);
+  }
+  async composeMMLCharacter(mmlCharacterDescription) {
+    var _a, _b, _c;
+    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"
+      );
+    }
+    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) {
+        const mmlCharacter = new MMLCharacter(new ModelLoader());
+        mergedCharacter = await mmlCharacter.mergeBodyParts(characterBase, parts);
+        if (mergedCharacter) {
+          return mergedCharacter.children[0].children[0];
+        }
+      }
+    }
+  }
+  async loadCharacterFromDescription() {
+    if (this.characterDescription.meshFileUrl) {
+      return await this.characterModelLoader.load(this.characterDescription.meshFileUrl, "model") || null;
+    }
+    let mmlCharacterSource;
+    if (this.characterDescription.mmlCharacterUrl) {
+      const res = await fetch(this.characterDescription.mmlCharacterUrl);
+      mmlCharacterSource = await res.text();
+    } else if (this.characterDescription.mmlCharacterString) {
+      mmlCharacterSource = this.characterDescription.mmlCharacterString;
+    } else {
+      throw new Error(
+        "ERROR: No Character Description was provided. Specify one of meshFileUrl, mmlCharacterUrl or mmlCharacterString"
+      );
+    }
+    const parsedMMLDescription = parseMMLDescription(mmlCharacterSource);
+    const mmlCharacterDescription = parsedMMLDescription[0];
+    if (parsedMMLDescription[1].length > 0) {
+      console.warn("Errors parsing MML Character Description: ", parsedMMLDescription[1]);
+    }
+    const mmlCharacterBody = await this.composeMMLCharacter(mmlCharacterDescription);
+    if (mmlCharacterBody) {
+      return mmlCharacterBody;
+    }
+    return null;
   }
   async loadMainMesh() {
-    const mainMeshUrl = this.characterDescription.meshFileUrl;
-    const scale = this.characterDescription.modelScale;
-    const extension = mainMeshUrl.split(".").pop();
-    const name = mainMeshUrl.split("/").pop().replace(`.${extension}`, "");
-    const mainMesh = await this.characterModelLoader.load(mainMeshUrl, "model");
+    const mainMesh = await this.loadCharacterFromDescription();
     if (typeof mainMesh !== "undefined") {
-      this.mesh = new Object3D();
-      const model = mainMesh;
-      model.position.set(0, -0.4, 0);
-      this.mesh.add(model);
-      this.mesh.name = name;
-      this.mesh.scale.set(scale, scale, scale);
-      this.mesh.traverse((child) => {
-        if (child.type === "SkinnedMesh") {
-          child.castShadow = true;
-          child.receiveShadow = true;
-        }
-      });
-      this.animationMixer = new AnimationMixer(this.mesh);
+      this.setMainMesh(mainMesh);
+    } else {
+      throw new Error("ERROR: No Character Model was loaded");
     }
   }
+  cleanAnimationClips(skeletalMesh, animationClip) {
+    const availableBones = /* @__PURE__ */ new Set();
+    skeletalMesh.traverse((child) => {
+      const asBone = child;
+      if (asBone.isBone) {
+        availableBones.add(child.name);
+      }
+    });
+    animationClip.tracks = animationClip.tracks.filter((track) => {
+      const trackName = track.name.split(".")[0];
+      return availableBones.has(trackName);
+    });
+    return animationClip;
+  }
   async setAnimationFromFile(animationFileUrl, animationType) {
     return new Promise(async (resolve, reject) => {
       const animation = await this.characterModelLoader.load(animationFileUrl, "animation");
-      if (typeof animation !== "undefined" && animation instanceof AnimationClip) {
-        this.animations[animationType] = this.animationMixer.clipAction(animation);
+      const cleanAnimation = this.cleanAnimationClips(this.mesh, animation);
+      if (typeof animation !== "undefined" && cleanAnimation instanceof AnimationClip) {
+        this.animations[animationType] = this.animationMixer.clipAction(cleanAnimation);
         this.animations[animationType].stop();
         if (animationType === 0 /* idle */) {
           this.animations[animationType].play();
@@ -750,7 +820,7 @@ var CharacterModel = class {
 import {
   CircleGeometry,
   GLSL3,
-  Mesh as Mesh2,
+  Mesh,
   RawShaderMaterial
 } from "three";
 var CharacterSpeakingIndicator = class {
@@ -814,7 +884,7 @@ var CharacterSpeakingIndicator = class {
       transparent: true,
       glslVersion: GLSL3
     });
-    this.mesh = new Mesh2(this.geometry, this.material);
+    this.mesh = new Mesh(this.geometry, this.material);
     this.currentAlpha = 0;
     this.targetAlpha = 0;
     this.scene.add(this.mesh);
@@ -843,7 +913,7 @@ import {
   Color as Color2,
   FrontSide,
   LinearFilter as LinearFilter2,
-  Mesh as Mesh3,
+  Mesh as Mesh2,
   MeshBasicMaterial as MeshBasicMaterial2,
   PlaneGeometry
 } from "three";
@@ -969,7 +1039,7 @@ var defaultLabelWidth = 0.25;
 var defaultLabelHeight = 0.125;
 var defaultLabelCastShadows = true;
 var tooltipGeometry = new PlaneGeometry(1, 1, 1, 1);
-var CharacterTooltip = class extends Mesh3 {
+var CharacterTooltip = class extends Mesh2 {
   constructor() {
     super(tooltipGeometry);
     this.visibleOpacity = 0.85;
@@ -1076,9 +1146,10 @@ var CharacterTooltip = class extends Mesh3 {
 
 // src/character/Character.ts
 var Character = class extends Group {
-  constructor(characterDescription, characterModelLoader, characterId, modelLoadedCallback, cameraManager, composer) {
+  constructor(characterDescription, animationConfig, characterModelLoader, characterId, modelLoadedCallback, cameraManager, composer) {
     super();
     this.characterDescription = characterDescription;
+    this.animationConfig = animationConfig;
     this.characterModelLoader = characterModelLoader;
     this.characterId = characterId;
     this.modelLoadedCallback = modelLoadedCallback;
@@ -1093,7 +1164,11 @@ var Character = class extends Group {
     this.load();
   }
   async load() {
-    this.model = new CharacterModel(this.characterDescription, this.characterModelLoader);
+    this.model = new CharacterModel(
+      this.characterDescription,
+      this.animationConfig,
+      this.characterModelLoader
+    );
     await this.model.init();
     this.add(this.model.mesh);
     if (this.speakingIndicator === null) {
@@ -1136,10 +1211,19 @@ var Character = class extends Group {
 };
 
 // src/character/CharacterManager.ts
-import { Euler, Group as Group2, Quaternion as Quaternion5, Vector3 as Vector38 } from "three";
+import { Euler as Euler2, Group as Group2, Quaternion as Quaternion5, Vector3 as Vector38 } from "three";
 
 // src/character/LocalController.ts
-import { Line3, Matrix4, Quaternion as Quaternion2, Raycaster as Raycaster2, Vector3 as Vector35 } from "three";
+import { Euler, Line3, Matrix4, Quaternion as Quaternion2, Ray, Raycaster as Raycaster2, Vector3 as Vector35 } from "three";
+var downVector = new Vector35(0, -1, 0);
+var airResistance = 0.5;
+var groundResistance = 0.99999999;
+var airControlModifier = 0.05;
+var groundWalkControl = 0.75;
+var groundRunControl = 1;
+var baseControl = 200;
+var collisionDetectionSteps = 15;
+var minimumSurfaceAngle = 0.9;
 var LocalController = class {
   constructor(character, id, collisionsManager, keyInputManager, cameraManager, timeManager) {
     this.character = character;
@@ -1148,15 +1232,12 @@ var LocalController = class {
     this.keyInputManager = keyInputManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
-    this.collisionDetectionSteps = 15;
     this.capsuleInfo = {
       radius: 0.4,
       segment: new Line3(new Vector35(), new Vector35(0, 1.05, 0))
     };
-    this.maxWalkSpeed = 6;
-    this.maxRunSpeed = 8.5;
     this.gravity = -42;
-    this.jumpForce = 16;
+    this.jumpForce = 20;
     this.coyoteTimeThreshold = 70;
     this.coyoteTime = false;
     this.canJump = true;
@@ -1164,6 +1245,7 @@ var LocalController = class {
     this.characterWasOnGround = false;
     this.characterAirborneSince = 0;
     this.currentHeight = 0;
+    this.currentSurfaceAngle = new Vector35();
     this.characterVelocity = new Vector35();
     this.vectorUp = new Vector35(0, 1, 0);
     this.vectorDown = new Vector35(0, -1, 0);
@@ -1171,11 +1253,21 @@ var LocalController = class {
     this.azimuthalAngle = 0;
     this.tempMatrix = new Matrix4();
     this.tempSegment = new Line3();
+    this.tempQuaternion = new Quaternion2();
+    this.tempEuler = new Euler();
     this.tempVector = new Vector35();
     this.tempVector2 = new Vector35();
+    this.tempVector3 = new Vector35();
     this.rayCaster = new Raycaster2();
-    this.speed = 0;
-    this.targetSpeed = 0;
+    this.surfaceTempQuaternion = new Quaternion2();
+    this.surfaceTempQuaternion2 = new Quaternion2();
+    this.surfaceTempVector1 = new Vector35();
+    this.surfaceTempVector2 = new Vector35();
+    this.surfaceTempVector3 = new Vector35();
+    this.surfaceTempVector4 = new Vector35();
+    this.surfaceTempVector5 = new Vector35();
+    this.surfaceTempRay = new Ray();
+    this.lastFrameSurfaceState = null;
     this.networkState = {
       id: this.id,
       position: { x: 0, y: 0, z: 0 },
@@ -1183,47 +1275,55 @@ var LocalController = class {
       state: 0 /* idle */
     };
   }
+  updateControllerState() {
+    this.forward = this.keyInputManager.forward;
+    this.backward = this.keyInputManager.backward;
+    this.left = this.keyInputManager.left;
+    this.right = this.keyInputManager.right;
+    this.run = this.keyInputManager.run;
+    this.jump = this.keyInputManager.jump;
+    this.anyDirection = this.keyInputManager.anyDirection;
+    this.conflictingDirections = this.keyInputManager.conflictingDirection;
+  }
   update() {
-    const { forward, backward, left, right, run, jump, anyDirection, conflictingDirection } = this.keyInputManager;
-    this.forward = forward;
-    this.backward = backward;
-    this.left = left;
-    this.right = right;
-    this.run = run;
-    this.jump = jump;
-    this.anyDirection = anyDirection;
-    this.conflictingDirections = conflictingDirection;
-    this.targetSpeed = this.run ? this.maxRunSpeed : this.maxWalkSpeed;
-    this.speed += ease(this.targetSpeed, this.speed, 0.07);
+    this.updateControllerState();
     this.rayCaster.set(this.character.position, this.vectorDown);
-    const minimumDistance = this.collisionsManager.raycastFirstDistance(this.rayCaster.ray);
-    if (minimumDistance !== null) {
-      this.currentHeight = minimumDistance;
+    const firstRaycastHit = this.collisionsManager.raycastFirst(this.rayCaster.ray);
+    if (firstRaycastHit !== null) {
+      this.currentHeight = firstRaycastHit[0];
+      this.currentSurfaceAngle.copy(firstRaycastHit[1]);
     }
-    if (anyDirection || !this.characterOnGround) {
+    if (this.anyDirection || !this.characterOnGround) {
       const targetAnimation = this.getTargetAnimation();
       this.character.updateAnimation(targetAnimation);
     } else {
       this.character.updateAnimation(0 /* idle */);
     }
-    if (this.anyDirection)
+    if (this.anyDirection) {
       this.updateRotation();
-    for (let i = 0; i < this.collisionDetectionSteps; i++) {
-      this.updatePosition(this.timeManager.deltaTime / this.collisionDetectionSteps, i);
     }
-    if (this.character.position.y < 0)
+    for (let i = 0; i < collisionDetectionSteps; i++) {
+      this.updatePosition(
+        this.timeManager.deltaTime,
+        this.timeManager.deltaTime / collisionDetectionSteps,
+        i
+      );
+    }
+    if (this.character.position.y < 0) {
       this.resetPosition();
+    }
     this.updateNetworkState();
   }
   getTargetAnimation() {
     if (!this.character)
       return 0 /* idle */;
-    if (this.conflictingDirections)
-      return 0 /* idle */;
     const jumpHeight = this.characterVelocity.y > 0 ? 0.2 : 1.8;
     if (this.currentHeight > jumpHeight && !this.characterOnGround) {
       return 4 /* air */;
     }
+    if (this.conflictingDirections) {
+      return 0 /* idle */;
+    }
     return this.run && this.anyDirection ? 2 /* running */ : this.anyDirection ? 1 /* walking */ : 0 /* idle */;
   }
   updateRotationOffset() {
@@ -1253,9 +1353,7 @@ var LocalController = class {
     );
     const isCameraFirstPerson = camToModelDistance < 2;
     if (isCameraFirstPerson) {
-      const cameraForward = new Vector35(0, 0, 1).applyQuaternion(
-        this.cameraManager.camera.quaternion
-      );
+      const cameraForward = this.tempVector.set(0, 0, 1).applyQuaternion(this.cameraManager.camera.quaternion);
       this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
     } else {
       this.azimuthalAngle = Math.atan2(
@@ -1270,91 +1368,162 @@ var LocalController = class {
   updateRotation() {
     this.updateRotationOffset();
     this.updateAzimuthalAngle();
-    const rotationQuaternion = new Quaternion2();
-    rotationQuaternion.setFromAxisAngle(this.vectorUp, this.azimuthalAngle + this.rotationOffset);
+    const rotationQuaternion = this.tempQuaternion.setFromAxisAngle(
+      this.vectorUp,
+      this.azimuthalAngle + this.rotationOffset
+    );
     const angularDifference = this.computeAngularDifference(rotationQuaternion);
     const desiredTime = 0.07;
     const angularSpeed = angularDifference / desiredTime;
     const frameRotation = angularSpeed * this.timeManager.deltaTime;
     this.character.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
-  addScaledVectorToCharacter(deltaTime) {
-    this.character.position.addScaledVector(this.tempVector, this.speed * deltaTime);
-  }
-  updatePosition(deltaTime, _iter) {
+  applyControls(deltaTime) {
+    const resistance = this.characterOnGround ? groundResistance : airResistance;
+    const speedFactor = Math.pow(1 - resistance, deltaTime);
+    this.characterVelocity.multiplyScalar(speedFactor);
+    const acceleration = this.tempVector.set(0, 0, 0);
     if (this.characterOnGround) {
-      if (!this.jump)
+      if (!this.jump) {
         this.canJump = true;
+      }
       if (this.jump && this.canJump) {
-        this.characterVelocity.y += this.jumpForce;
+        acceleration.y += this.jumpForce / deltaTime;
         this.canJump = false;
       } else {
-        this.characterVelocity.y = deltaTime * this.gravity;
+        if (this.currentSurfaceAngle.y < minimumSurfaceAngle) {
+          acceleration.y += this.gravity;
+        }
       }
     } else if (this.jump && this.coyoteTime) {
-      this.characterVelocity.y = this.jumpForce;
+      acceleration.y += this.jumpForce / deltaTime;
       this.canJump = false;
     } else {
-      this.characterVelocity.y += deltaTime * this.gravity;
+      acceleration.y += this.gravity;
       this.canJump = false;
     }
-    this.character.position.addScaledVector(this.characterVelocity, deltaTime);
-    this.tempVector.set(0, 0, 0);
-    if (this.forward) {
-      const forward = new Vector35(0, 0, -1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-      this.tempVector.add(forward);
-    }
-    if (this.backward) {
-      const backward = new Vector35(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-      this.tempVector.add(backward);
-    }
-    if (this.left) {
-      const left = new Vector35(-1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-      this.tempVector.add(left);
+    const control = (this.characterOnGround ? this.run ? groundRunControl : groundWalkControl : airControlModifier) * baseControl;
+    const controlAcceleration = this.tempVector2.set(0, 0, 0);
+    if (!this.conflictingDirections) {
+      if (this.forward) {
+        const forward = this.tempVector3.set(0, 0, -1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+        controlAcceleration.add(forward);
+      }
+      if (this.backward) {
+        const backward = this.tempVector3.set(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+        controlAcceleration.add(backward);
+      }
+      if (this.left) {
+        const left = this.tempVector3.set(-1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+        controlAcceleration.add(left);
+      }
+      if (this.right) {
+        const right = this.tempVector3.set(1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
+        controlAcceleration.add(right);
+      }
     }
-    if (this.right) {
-      const right = new Vector35(1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-      this.tempVector.add(right);
+    if (controlAcceleration.length() > 0) {
+      controlAcceleration.normalize();
+      controlAcceleration.multiplyScalar(control);
     }
-    if (this.tempVector.length() > 0) {
-      this.tempVector.normalize();
-      this.addScaledVectorToCharacter(deltaTime);
+    acceleration.add(controlAcceleration);
+    this.characterVelocity.addScaledVector(acceleration, deltaTime);
+    this.character.position.addScaledVector(this.characterVelocity, deltaTime);
+  }
+  updatePosition(deltaTime, stepDeltaTime, iter) {
+    this.applyControls(stepDeltaTime);
+    if (iter === 0) {
+      const lastMovement = this.getMovementFromSurfaces(this.character.position, deltaTime);
+      if (lastMovement) {
+        this.character.position.add(lastMovement.position);
+        const asQuaternion = this.tempQuaternion.setFromEuler(this.character.rotation);
+        const lastMovementEuler = this.tempEuler.setFromQuaternion(lastMovement.rotation);
+        lastMovementEuler.x = 0;
+        lastMovementEuler.z = 0;
+        lastMovement.rotation.setFromEuler(lastMovementEuler);
+        asQuaternion.multiply(lastMovement.rotation);
+        this.character.rotation.setFromQuaternion(asQuaternion);
+      }
     }
     this.character.updateMatrixWorld();
-    this.tempSegment.copy(this.capsuleInfo.segment);
-    this.tempSegment.start.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
-    this.tempSegment.end.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
-    this.collisionsManager.applyColliders(this.tempSegment, this.capsuleInfo.radius);
-    const newPosition = this.tempVector;
-    newPosition.copy(this.tempSegment.start);
-    const deltaVector = this.tempVector2;
-    deltaVector.subVectors(newPosition, this.character.position);
-    const offset = Math.max(0, deltaVector.length() - 1e-5);
-    deltaVector.normalize().multiplyScalar(offset);
-    this.character.position.add(deltaVector);
-    this.characterOnGround = deltaVector.y > Math.abs(deltaTime * this.characterVelocity.y * 0.25);
+    const avatarSegment = this.tempSegment;
+    avatarSegment.copy(this.capsuleInfo.segment);
+    avatarSegment.start.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
+    avatarSegment.end.applyMatrix4(this.character.matrixWorld).applyMatrix4(this.tempMatrix);
+    const positionBeforeCollisions = this.tempVector.copy(avatarSegment.start);
+    this.collisionsManager.applyColliders(avatarSegment, this.capsuleInfo.radius);
+    this.character.position.copy(avatarSegment.start);
+    const deltaCollisionPosition = avatarSegment.start.sub(positionBeforeCollisions);
+    this.characterOnGround = deltaCollisionPosition.y > 0;
     if (this.characterWasOnGround && !this.characterOnGround) {
       this.characterAirborneSince = Date.now();
     }
     this.coyoteTime = this.characterVelocity.y < 0 && !this.characterOnGround && Date.now() - this.characterAirborneSince < this.coyoteTimeThreshold;
     this.characterWasOnGround = this.characterOnGround;
-    if (this.characterOnGround) {
-      this.characterVelocity.set(0, 0, 0);
+  }
+  getMovementFromSurfaces(userPosition, deltaTime) {
+    let lastMovement = null;
+    if (this.lastFrameSurfaceState !== null) {
+      const meshState = this.lastFrameSurfaceState[0];
+      const currentFrameMatrix = meshState.matrix;
+      const lastFrameMatrix = this.lastFrameSurfaceState[1].lastMatrix;
+      if (lastFrameMatrix.equals(currentFrameMatrix)) {
+      } else {
+        const lastMeshPosition = this.surfaceTempVector1;
+        const lastMeshRotation = this.surfaceTempQuaternion;
+        lastFrameMatrix.decompose(lastMeshPosition, lastMeshRotation, this.surfaceTempVector3);
+        const currentMeshPosition = this.surfaceTempVector2;
+        const currentMeshRotation = this.surfaceTempQuaternion2;
+        currentFrameMatrix.decompose(
+          currentMeshPosition,
+          currentMeshRotation,
+          this.surfaceTempVector3
+        );
+        const meshTranslationDelta = this.surfaceTempVector5.copy(currentMeshPosition).sub(lastMeshPosition);
+        const lastFrameRelativeUserPosition = this.surfaceTempVector3.copy(userPosition).sub(lastMeshPosition);
+        const meshRotationDelta = lastMeshRotation.invert().multiply(currentMeshRotation);
+        const translationDueToRotation = this.surfaceTempVector4.copy(lastFrameRelativeUserPosition).applyQuaternion(meshRotationDelta).sub(lastFrameRelativeUserPosition);
+        const translationAndRotationPositionDelta = this.surfaceTempVector1.copy(meshTranslationDelta).add(translationDueToRotation);
+        lastMovement = {
+          position: translationAndRotationPositionDelta,
+          rotation: meshRotationDelta
+        };
+        lastFrameMatrix.copy(currentFrameMatrix);
+      }
+    }
+    const newPosition = this.surfaceTempVector3.copy(userPosition);
+    if (lastMovement) {
+      newPosition.add(lastMovement.position);
+    }
+    newPosition.setY(newPosition.y + 0.05);
+    const ray = this.surfaceTempRay.set(newPosition, downVector);
+    const hit = this.collisionsManager.raycastFirst(ray);
+    if (hit && hit[0] < 0.8) {
+      const currentCollisionMeshState = hit[2];
+      this.lastFrameSurfaceState = [
+        currentCollisionMeshState,
+        { lastMatrix: currentCollisionMeshState.matrix.clone() }
+      ];
     } else {
-      deltaVector.normalize();
-      this.characterVelocity.addScaledVector(deltaVector, -deltaVector.dot(this.characterVelocity));
+      if (this.lastFrameSurfaceState !== null && lastMovement) {
+        this.characterVelocity.add(
+          lastMovement.position.clone().divideScalar(deltaTime)
+          // The position delta is the result of one tick which is deltaTime seconds, so we need to divide by deltaTime to get the velocity per second
+        );
+      }
+      this.lastFrameSurfaceState = null;
     }
+    return lastMovement;
   }
   updateNetworkState() {
-    const characterQuaternion = this.character.getWorldQuaternion(new Quaternion2());
-    const positionUpdate = new Vector35(
-      this.character.position.x,
-      this.character.position.y,
-      this.character.position.z
-    );
+    const characterQuaternion = this.character.getWorldQuaternion(this.tempQuaternion);
     this.networkState = {
       id: this.id,
-      position: positionUpdate,
+      position: {
+        x: this.character.position.x,
+        y: this.character.position.y,
+        z: this.character.position.z
+      },
       rotation: { quaternionY: characterQuaternion.y, quaternionW: characterQuaternion.w },
       state: this.character.getCurrentAnimation()
     };
@@ -1424,7 +1593,7 @@ function decodeCharacterAndCamera(hash) {
 
 // src/character/CharacterManager.ts
 var CharacterManager = class {
-  constructor(composer, characterModelLoader, collisionsManager, cameraManager, timeManager, keyInputManager, clientStates, sendUpdate) {
+  constructor(composer, characterModelLoader, collisionsManager, cameraManager, timeManager, keyInputManager, clientStates, sendUpdate, animationConfig, characterDescription) {
     this.composer = composer;
     this.characterModelLoader = characterModelLoader;
     this.collisionsManager = collisionsManager;
@@ -1433,23 +1602,25 @@ var CharacterManager = class {
     this.keyInputManager = keyInputManager;
     this.clientStates = clientStates;
     this.sendUpdate = sendUpdate;
+    this.animationConfig = animationConfig;
+    this.characterDescription = characterDescription;
     this.updateLocationHash = true;
     this.headTargetOffset = new Vector38(0, 1.3, 0);
     this.id = 0;
     this.remoteCharacters = /* @__PURE__ */ new Map();
     this.remoteCharacterControllers = /* @__PURE__ */ new Map();
-    this.characterDescription = null;
+    this.localCharacterSpawned = false;
     this.localCharacter = null;
     this.cameraOffsetTarget = 0;
     this.cameraOffset = 0;
     this.speakingCharacters = /* @__PURE__ */ new Map();
     this.group = new Group2();
   }
-  spawnCharacter(characterDescription, id, isLocal = false, spawnPosition = new Vector38(), spawnRotation = new Euler()) {
+  spawnLocalCharacter(characterDescription, id, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
     var _a;
-    this.characterDescription = characterDescription;
     const character = new Character(
       characterDescription,
+      this.animationConfig,
       this.characterModelLoader,
       id,
       () => {
@@ -1457,39 +1628,50 @@ var CharacterManager = class {
       this.cameraManager,
       this.composer
     );
-    if (isLocal) {
-      const quaternion = new Quaternion5().setFromEuler(character.rotation);
-      this.sendUpdate({
-        id,
-        position: {
-          x: spawnPosition.x,
-          y: spawnPosition.y,
-          z: spawnPosition.z
-        },
-        rotation: { quaternionY: quaternion.y, quaternionW: quaternion.w },
-        state: 0 /* idle */
-      });
-    }
-    if (isLocal) {
-      this.id = id;
-      this.localCharacter = character;
-      this.localController = new LocalController(
-        this.localCharacter,
-        this.id,
-        this.collisionsManager,
-        this.keyInputManager,
-        this.cameraManager,
-        this.timeManager
-      );
-      this.localCharacter.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
-      this.localCharacter.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
-    } else {
-      this.remoteCharacters.set(id, character);
-      const remoteController = new RemoteController(character, id);
-      remoteController.character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
-      remoteController.character.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
-      this.remoteCharacterControllers.set(id, remoteController);
-    }
+    const quaternion = new Quaternion5().setFromEuler(character.rotation);
+    this.sendUpdate({
+      id,
+      position: {
+        x: spawnPosition.x,
+        y: spawnPosition.y,
+        z: spawnPosition.z
+      },
+      rotation: { quaternionY: quaternion.y, quaternionW: quaternion.w },
+      state: 0 /* idle */
+    });
+    this.id = id;
+    this.localCharacter = character;
+    this.localController = new LocalController(
+      this.localCharacter,
+      this.id,
+      this.collisionsManager,
+      this.keyInputManager,
+      this.cameraManager,
+      this.timeManager
+    );
+    this.localCharacter.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+    this.localCharacter.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+    (_a = character.tooltip) == null ? void 0 : _a.setText(`${id}`);
+    this.group.add(character);
+    this.localCharacterSpawned = true;
+  }
+  spawnRemoteCharacter(characterDescription, id, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+    var _a;
+    const character = new Character(
+      characterDescription,
+      this.animationConfig,
+      this.characterModelLoader,
+      id,
+      () => {
+      },
+      this.cameraManager,
+      this.composer
+    );
+    this.remoteCharacters.set(id, character);
+    const remoteController = new RemoteController(character, id);
+    remoteController.character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+    remoteController.character.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
+    this.remoteCharacterControllers.set(id, remoteController);
     (_a = character.tooltip) == null ? void 0 : _a.setText(`${id}`);
     this.group.add(character);
   }
@@ -1526,27 +1708,26 @@ var CharacterManager = class {
       if (this.speakingCharacters.has(this.id)) {
         (_a = this.localCharacter.speakingIndicator) == null ? void 0 : _a.setSpeaking(this.speakingCharacters.get(this.id));
       }
+      this.localController.update();
+      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));
-      this.localController.update();
-      if (this.timeManager.frame % 2 === 0) {
-        this.sendUpdate(this.localController.networkState);
-      }
       for (const [id, update] of this.clientStates) {
         if (this.remoteCharacters.has(id) && this.speakingCharacters.has(id)) {
           const character = this.remoteCharacters.get(id);
           (_b = character == null ? void 0 : character.speakingIndicator) == null ? void 0 : _b.setSpeaking(this.speakingCharacters.get(id));
         }
         const { position } = update;
-        if (!this.remoteCharacters.has(id)) {
-          this.spawnCharacter(
+        if (!this.remoteCharacters.has(id) && this.localCharacterSpawned === true) {
+          this.spawnRemoteCharacter(
             this.characterDescription,
             id,
-            false,
             new Vector38(position.x, position.y, position.z)
           );
         }
@@ -1839,7 +2020,7 @@ import { Pane } from "tweakpane";
 // src/tweakpane/blades/bcsFolder.ts
 var bcsValues = {
   brightness: 0,
-  contrast: 1.25,
+  contrast: 1,
   saturation: 1
 };
 var bcsOptions = {
@@ -1886,22 +2067,22 @@ var BrightnessContrastSaturationFolder = class {
 // src/tweakpane/blades/environmentFolder.ts
 var sunValues = {
   sunPosition: {
-    sunAzimuthalAngle: 39,
-    sunPolarAngle: 50
+    sunAzimuthalAngle: 215,
+    sunPolarAngle: -39
   },
-  sunIntensity: 0.5,
-  sunColor: { r: 1, g: 0.74, b: 0.5 }
+  sunIntensity: 1,
+  sunColor: { r: 1, g: 1, b: 1 }
 };
 var sunOptions = {
   sunPosition: {
     sunAzimuthalAngle: { min: 0, max: 360, step: 1 },
     sunPolarAngle: { min: -90, max: 90, step: 1 }
   },
-  sunIntensity: { min: 0, max: 1, step: 0.05 }
+  sunIntensity: { min: 0, max: 3, step: 0.05 }
 };
 var envValues = {
   ambientLight: {
-    ambientLightIntensity: 0,
+    ambientLightIntensity: 0.05,
     ambientLightColor: { r: 1, g: 1, b: 1 }
   },
   fog: {
@@ -2756,6 +2937,7 @@ import {
   LinearSRGBColorSpace,
   LoadingManager as LoadingManager2,
   PMREMGenerator,
+  SRGBColorSpace,
   Scene as Scene4,
   Vector2 as Vector27,
   WebGLRenderer as WebGLRenderer4
@@ -2769,8 +2951,8 @@ var Sun = class extends Group4 {
     super();
     this.debug = false;
     this.sunOffset = new Vector39(
-      39 * (Math.PI / 180),
-      50 * (Math.PI / 180),
+      sunValues.sunPosition.sunAzimuthalAngle * (Math.PI / 180),
+      sunValues.sunPosition.sunPolarAngle * (Math.PI / 180),
       100
     );
     this.shadowResolution = 8192;
@@ -2789,6 +2971,7 @@ var Sun = class extends Group4 {
       this.camHelper = new CameraHelper(this.shadowCamera);
     }
     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.camera = this.shadowCamera;
@@ -3639,7 +3822,7 @@ var EffectShader = {
 import {
   BufferAttribute,
   BufferGeometry,
-  Mesh as Mesh4,
+  Mesh as Mesh3,
   OrthographicCamera as OrthographicCamera2,
   Sphere
 } from "three";
@@ -3655,7 +3838,7 @@ var FullScreenTriangle = class {
     this.geometry.boundingSphere = new Sphere();
     this.geometry.computeBoundingSphere = function() {
     };
-    this.mesh = new Mesh4(this.geometry, material);
+    this.mesh = new Mesh3(this.geometry, material);
     this.mesh.frustumCulled = false;
   }
   get material() {
@@ -4319,6 +4502,7 @@ var Composer = class {
       stencil: false,
       depth: false
     });
+    this.renderer.outputColorSpace = SRGBColorSpace;
     this.renderer.info.autoReset = false;
     this.renderer.setSize(this.width, this.height);
     this.renderer.shadowMap.enabled = true;
@@ -4621,51 +4805,60 @@ import {
   Box3,
   Color as Color8,
   DoubleSide,
-  Euler as Euler2,
+  Euler as Euler3,
   Group as Group5,
   Line3 as Line32,
   Matrix4 as Matrix46,
-  Mesh as Mesh5,
+  Mesh as Mesh4,
   MeshBasicMaterial as MeshBasicMaterial3,
-  Ray,
+  Quaternion as Quaternion6,
+  Ray as Ray2,
   Vector3 as Vector314
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
-import { MeshBVH, MeshBVHVisualizer } from "three-mesh-bvh";
+import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
     this.tempVector = new Vector314();
     this.tempVector2 = new Vector314();
     this.tempVector3 = new Vector314();
-    this.tempRay = new Ray();
+    this.tempQuaternion = new Quaternion6();
+    this.tempRay = new Ray2();
     this.tempMatrix = new Matrix46();
     this.tempMatrix2 = new Matrix46();
     this.tempBox = new Box3();
-    this.tempEuler = new Euler2();
+    this.tempEuler = new Euler3();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
     this.scene = scene;
     this.collisionTrigger = MMLCollisionTrigger.init();
   }
-  raycastFirstDistance(ray) {
+  raycastFirst(ray) {
     let minimumDistance = null;
-    for (const [, value] of this.collisionMeshState) {
-      this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(value.matrix).invert());
-      const hit = value.meshBVH.raycastFirst(this.tempRay, DoubleSide);
+    let minimumHit = null;
+    let minimumNormal = new Vector314();
+    for (const [, collisionMeshState] of this.collisionMeshState) {
+      this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
+      const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
       if (hit) {
         this.tempSegment.start.copy(this.tempRay.origin);
         this.tempSegment.end.copy(hit.point);
-        this.tempSegment.applyMatrix4(value.matrix);
+        this.tempSegment.applyMatrix4(collisionMeshState.matrix);
         const dist = this.tempSegment.distance();
         if (minimumDistance === null || dist < minimumDistance) {
           minimumDistance = dist;
+          minimumHit = collisionMeshState;
+          minimumNormal = (hit.normal ? minimumNormal.copy(hit.normal) : minimumNormal).applyQuaternion(this.tempQuaternion.setFromRotationMatrix(collisionMeshState.matrix)).normalize();
         }
       }
     }
-    return minimumDistance;
+    if (minimumDistance === null || minimumNormal === null || minimumHit === null) {
+      return null;
+    }
+    return [minimumDistance, minimumNormal, minimumHit];
   }
   createCollisionMeshState(group, trackCollisions) {
     const geometries = [];
@@ -4704,9 +4897,9 @@ var CollisionsManager = class {
     };
     if (this.debug) {
       newBufferGeometry.boundsTree = meshBVH;
-      const wireframeMesh = new Mesh5(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);
+      const visualizer = new MeshBVHHelper(wireframeMesh, 4);
       visualizer.edgeMaterial.color = new Color8("blue");
       const debugGroup = new Group5();
       debugGroup.add(wireframeMesh, normalsHelper, visualizer);