@mml-io/3d-web-client-core 0.0.0-experimental-b569a23-20240430 → 0.0.0-experimental-c4ef44a-20240506

package/build/character/CharacterState.d.ts

@@ -17,5 +17,14 @@ export type CharacterState = {
         quaternionY: number;
         quaternionW: number;
     };
+    camPosition?: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    camQuaternion?: {
+        y: number;
+        w: number;
+    };
     state: AnimationState;
 };

package/build/index.js

@@ -279,7 +279,7 @@ var CameraManager = class {
     this.targetPhi = initialPhi;
     this.theta = initialTheta;
     this.targetTheta = initialTheta;
-    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
+    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 300);
     this.camera.position.set(0, 1.4, -this.initialDistance);
     this.rayCaster = new Raycaster();
     this.hasTouchControl = VirtualJoystick.checkForTouch();
@@ -672,7 +672,7 @@ var CharacterMaterial = class extends MeshStandardMaterial {
       );
       shader.fragmentShader = injectBefore(
         shader.fragmentShader,
-        "#include <output_fragment>",
+        "#include <dithering_fragment>",
         /* glsl */
         `
           if (discardAll == 1) {
@@ -786,6 +786,11 @@ var _CharacterModel = class _CharacterModel {
     if (!this.mesh)
       return;
     this.mesh.traverse((child) => {
+      if (child.isBone) {
+        if (child.name === "head") {
+          this.headBone = child;
+        }
+      }
       if (child.isMesh || child.isSkinnedMesh) {
         const asMesh = child;
         const originalMaterial = asMesh.material;
@@ -1019,7 +1024,7 @@ var CharacterSpeakingIndicator = class {
     this.scene.add(this.mesh);
   }
   setBillboarding(position, camera) {
-    this.mesh.position.set(position.x, position.y - 0.15, position.z);
+    this.mesh.position.set(position.x, position.y, position.z);
     this.mesh.lookAt(camera.position);
   }
   setTime(value) {
@@ -1641,6 +1646,8 @@ var LocalController = class {
   }
   updateNetworkState() {
     const characterQuaternion = this.config.character.getWorldQuaternion(this.tempQuaternion);
+    const cameraQuaternion = new Quaternion2();
+    this.config.cameraManager.camera.getWorldQuaternion(cameraQuaternion);
     this.networkState = {
       id: this.config.id,
       position: {
@@ -1649,6 +1656,15 @@ var LocalController = class {
         z: this.config.character.position.z
       },
       rotation: { quaternionY: characterQuaternion.y, quaternionW: characterQuaternion.w },
+      camPosition: {
+        x: this.config.cameraManager.camera.position.x,
+        y: this.config.cameraManager.camera.position.y,
+        z: this.config.cameraManager.camera.position.z
+      },
+      camQuaternion: {
+        y: cameraQuaternion.y,
+        w: cameraQuaternion.w
+      },
       state: this.config.character.getCurrentAnimation()
     };
   }
@@ -2121,8 +2137,8 @@ import { Pane } from "tweakpane";
 
 // src/tweakpane/blades/bcsFolder.ts
 var bcsValues = {
-  brightness: 0,
-  contrast: 1,
+  brightness: 0.06,
+  contrast: 1.2,
   saturation: 1
 };
 var bcsOptions = {
@@ -2169,10 +2185,10 @@ var BrightnessContrastSaturationFolder = class {
 // src/tweakpane/blades/environmentFolder.ts
 var sunValues = {
   sunPosition: {
-    sunAzimuthalAngle: 214.5,
-    sunPolarAngle: -41.5
+    sunAzimuthalAngle: 219,
+    sunPolarAngle: -37
   },
-  sunIntensity: 2,
+  sunIntensity: 3.7,
   sunColor: { r: 1, g: 1, b: 1 }
 };
 var sunOptions = {
@@ -2180,17 +2196,17 @@ var sunOptions = {
     sunAzimuthalAngle: { min: 0, max: 360, step: 1 },
     sunPolarAngle: { min: -90, max: 90, step: 1 }
   },
-  sunIntensity: { min: 0, max: 3, step: 0.05 }
+  sunIntensity: { min: 0, max: 10, step: 0.1 }
 };
 var envValues = {
   ambientLight: {
-    ambientLightIntensity: 0.1,
+    ambientLightIntensity: 0.27,
     ambientLightColor: { r: 1, g: 1, b: 1 }
   },
   fog: {
-    fogNear: 30,
-    fogFar: 210,
-    fogColor: { r: 0.42, g: 0.48, b: 0.59 }
+    fogNear: 21,
+    fogFar: 180,
+    fogColor: { r: 0.7, g: 0.7, b: 0.7 }
   }
 };
 var envOptions = {
@@ -2323,15 +2339,15 @@ var EnvironmentFolder = class {
 
 // src/tweakpane/blades/postExtrasFolder.ts
 var extrasValues = {
-  grain: 0.055,
-  bloom: 3
+  grain: 0.045,
+  bloom: 0.75
 };
 var extrasOptions = {
   grain: {
     amount: { min: 0, max: 0.2, step: 2e-3 }
   },
   bloom: {
-    amount: { min: 0, max: 5, step: 0.05 }
+    amount: { min: 0, max: 50, step: 0.05 }
   }
 };
 var PostExtrasFolder = class {
@@ -2363,8 +2379,8 @@ var PostExtrasFolder = class {
 var rendererValues = {
   shadowMap: 2,
   toneMapping: 5,
-  exposure: 1,
-  bgIntensity: 1,
+  exposure: 1.7,
+  bgIntensity: 0.8,
   bgBlurriness: 0
 };
 var rendererOptions = {
@@ -2396,6 +2412,8 @@ var setShadowMapType = (value) => {
 };
 var setToneMappingType = (value) => {
   monitoredValues.toneMappingType = toneMappingTypes[value];
+  rendererValues.toneMapping = value;
+  console.log(rendererValues.toneMapping);
 };
 var RendererFolder = class {
   constructor(parentFolder, expand = false) {
@@ -2418,13 +2436,13 @@ var RendererFolder = class {
         return;
       switch (target) {
         case "shadowMap": {
-          const value = e.value;
-          renderer.shadowMap.type = value;
-          setShadowMapType(value);
+          const value2 = e.value;
+          renderer.shadowMap.type = value2;
+          setShadowMapType(value2);
           break;
         }
         case "toneMapping":
-          renderer.toneMapping = e.value;
+          const value = e.value;
           toneMappingFolder.hidden = e.value !== 5;
           toneMappingPass.enabled = e.value === 5 ? true : false;
           setToneMappingType(e.value);
@@ -2496,10 +2514,10 @@ var ppssaoValues = {
   samples: 30,
   rings: 11,
   luminanceInfluence: 0.7,
-  radius: 0.03,
-  intensity: 2.5,
-  bias: 0.05,
-  fade: 0.03,
+  radius: 0.045,
+  intensity: 3.14,
+  bias: 0.01,
+  fade: 0.06,
   resolutionScale: 0.5,
   color: { r: 0, g: 0, b: 0 },
   worldDistanceThreshold: 30,
@@ -2746,7 +2764,7 @@ var SSAOFolder = class {
 
 // src/tweakpane/blades/toneMappingFolder.ts
 var toneMappingValues = {
-  mode: 2,
+  mode: 7,
   resolution: 512,
   whitePoint: 32,
   middleGrey: 21,
@@ -2755,20 +2773,24 @@ var toneMappingValues = {
   adaptationRate: 2
 };
 var toneMappingOptions = {
-  mode: { min: 0, max: 4, step: 1 },
+  mode: { min: 0, max: 8, step: 1 },
   resolution: { min: 64, max: 512, step: 64 },
   whitePoint: { min: 0, max: 32, step: 0.01 },
   middleGrey: { min: 0, max: 32, step: 0.01 },
   minLuminance: { min: 0, max: 32, step: 1e-3 },
-  averageLuminance: { min: 1e-3, max: 0.2, step: 1e-3 },
+  averageLuminance: { min: 1e-3, max: 2, step: 1e-3 },
   adaptationRate: { min: 0.1, max: 2, step: 0.1 }
 };
 var customToneMappingTypes = {
-  0: "REINHARD",
-  1: "REINHARD2",
-  2: "REINHARD2_ADAPTIVE",
-  3: "OPTIMIZED_CINEON",
-  4: "ACES_FILMIC"
+  0: "LINEAR",
+  1: "REINHARD",
+  2: "REINHARD2",
+  3: "REINHARD2_ADAPTIVE",
+  4: "UNCHARTED2",
+  5: "OPTIMIZED_CINEON",
+  6: "ACES_FILMIC",
+  7: "AGX",
+  8: "NEUTRAL"
 };
 var customToneMappingBlade = {
   customToneMappingType: customToneMappingTypes[toneMappingValues.mode]
@@ -2791,13 +2813,13 @@ var ToneMappingFolder = class {
       "minLuminance",
       toneMappingOptions.minLuminance
     );
-    this.minLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.minLuminance.hidden = false;
     this.avgLuminance = this.folder.addBinding(
       toneMappingValues,
       "averageLuminance",
       toneMappingOptions.averageLuminance
     );
-    this.avgLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.avgLuminance.hidden = false;
     this.folder.addBinding(toneMappingValues, "adaptationRate", toneMappingOptions.adaptationRate);
   }
   setupChangeEvent(toneMappingEffect) {
@@ -2806,8 +2828,6 @@ var ToneMappingFolder = class {
       if (!target)
         return;
       if (target === "mode") {
-        this.minLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
-        this.avgLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
         setCustomToneMappingType(e.value);
       }
       toneMappingEffect[target] = e.value;
@@ -3111,7 +3131,7 @@ var Sun = class extends Group4 {
     }
     this.directionalLight = new DirectionalLight(16777215);
     this.directionalLight.intensity = sunValues.sunIntensity;
-    this.directionalLight.shadow.normalBias = 0.01;
+    this.directionalLight.shadow.normalBias = 0.1;
     this.directionalLight.shadow.radius = 0.02;
     this.directionalLight.shadow.camera = this.shadowCamera;
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
@@ -4637,9 +4657,7 @@ var Composer = class {
     this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer4({
       powerPreference: "high-performance",
-      antialias: false,
-      stencil: false,
-      depth: false
+      antialias: false
     });
     this.renderer.outputColorSpace = SRGBColorSpace;
     this.renderer.info.autoReset = false;
@@ -4720,6 +4738,8 @@ var Composer = class {
     this.bcs.uniforms.contrast.value = bcsValues.contrast;
     this.bcs.uniforms.saturation.value = bcsValues.saturation;
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
+    this.gaussGrainEffect.uniforms.amount.value = extrasValues.grain;
+    this.gaussGrainEffect.uniforms.alpha.value = 1;
     this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
     this.effectComposer.addPass(this.renderPass);
     if (ppssaoValues.enabled) {
@@ -4730,7 +4750,6 @@ var Composer = class {
       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);
@@ -4803,15 +4822,15 @@ var Composer = class {
     this.bloomPass.setSize(this.width, this.height);
     this.toneMappingPass.setSize(this.width, this.height);
     this.gaussGrainPass.setSize(this.width, this.height);
+    this.gaussGrainEffect.uniforms.resolution.value = new Vector27(this.width, this.height);
     this.renderer.setSize(this.width, this.height);
   }
   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.effectComposer.render();
+    this.renderer.clearDepth();
     this.renderer.render(this.postPostScene, this.camera);
   }
   useHDRJPG(url, fromFile = false) {
@@ -4977,7 +4996,7 @@ import {
   MeshBasicMaterial as MeshBasicMaterial3,
   Quaternion as Quaternion6,
   Ray as Ray2,
-  Vector3 as Vector314
+  Vector3 as Vector315
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
@@ -4985,9 +5004,9 @@ 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.tempVector = new Vector315();
+    this.tempVector2 = new Vector315();
+    this.tempVector3 = new Vector315();
     this.tempQuaternion = new Quaternion6();
     this.tempRay = new Ray2();
     this.tempMatrix = new Matrix46();
@@ -5003,7 +5022,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector314();
+    let minimumNormal = new Vector315();
     for (const [, collisionMeshState] of this.collisionMeshState) {
       this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
       const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
@@ -5144,7 +5163,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector315().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -5212,9 +5231,9 @@ var canvas = document.createElement("canvas");
 canvas.width = 2;
 canvas.height = 2;
 var ctx = canvas.getContext("2d");
-ctx.fillStyle = "#C0C0C0";
+ctx.fillStyle = "#e0e0e0";
 ctx.fillRect(0, 0, 2, 2);
-ctx.fillStyle = "#808080";
+ctx.fillStyle = "#606060";
 ctx.fillRect(0, 0, 1, 1);
 ctx.fillRect(1, 1, 1, 1);
 var GroundPlane = class extends Group6 {