@mml-io/3d-web-client-core 0.2.0 → 0.3.0

package/build/index.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 
 // src/camera/CameraManager.ts
-import { PerspectiveCamera, Vector3 as Vector32 } from "three";
+import { PerspectiveCamera, Raycaster, Vector3 as Vector32 } from "three";
 
 // src/helpers/math-helpers.ts
 import { Vector3 } from "three";
@@ -34,7 +34,7 @@ var remap = (value, minValue, maxValue, minScaledValue, maxScaledValue) => {
   return minScaledValue + (maxScaledValue - minScaledValue) * (value - minValue) / (maxValue - minValue);
 };
 
-// src/rendering/tweakPaneActivity.ts
+// src/tweakpane/tweakPaneActivity.ts
 var isTweakpaneActive = false;
 function setTweakpaneActive(status) {
   isTweakpaneActive = status;
@@ -45,14 +45,15 @@ function getTweakpaneActive() {
 
 // src/camera/CameraManager.ts
 var CameraManager = class {
-  constructor() {
+  constructor(collisionsManager) {
+    this.collisionsManager = collisionsManager;
     __publicField(this, "camera");
     __publicField(this, "initialDistance", 2.5);
     __publicField(this, "minDistance", 0.1);
     __publicField(this, "maxDistance", 6);
     __publicField(this, "initialFOV", 80);
     __publicField(this, "fov", this.initialFOV);
-    __publicField(this, "minFOV", 65);
+    __publicField(this, "minFOV", 63);
     __publicField(this, "maxFOV", 85);
     __publicField(this, "targetFOV", this.initialFOV);
     __publicField(this, "minPolarAngle", Math.PI * 0.25);
@@ -67,13 +68,10 @@ var CameraManager = class {
     __publicField(this, "dragging", false);
     __publicField(this, "target", new Vector32(0, 1.55, 0));
     __publicField(this, "hadTarget", false);
-    this.camera = new PerspectiveCamera(
-      this.fov,
-      window.innerWidth / window.innerHeight,
-      0.1,
-      2e3
-    );
+    __publicField(this, "rayCaster");
+    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));
@@ -129,6 +127,18 @@ var CameraManager = class {
     this.theta = this.targetTheta;
     this.distance = this.targetDistance;
   }
+  adjustCameraPosition() {
+    this.rayCaster.set(
+      this.camera.position,
+      this.target.clone().sub(this.camera.position).normalize()
+    );
+    const minimumDistance = this.collisionsManager.raycastFirstDistance(this.rayCaster.ray);
+    const cameraToPlayerDistance = this.camera.position.distanceTo(this.target);
+    if (minimumDistance !== null && minimumDistance <= cameraToPlayerDistance) {
+      this.targetDistance = cameraToPlayerDistance - minimumDistance;
+      this.distance = this.targetDistance;
+    }
+  }
   update() {
     if (this.target === null)
       return;
@@ -149,7 +159,9 @@ var CameraManager = class {
       this.fov += ease(this.targetFOV, this.fov, 0.07);
       this.camera.fov = this.fov;
       this.camera.updateProjectionMatrix();
+      this.camera.updateMatrixWorld();
       this.camera.position.set(x, clamp(y, 0.1, Infinity), z);
+      this.adjustCameraPosition();
       this.camera.lookAt(this.target);
     }
   }
@@ -260,6 +272,41 @@ ${before}
   );
 }
 
+// src/tweakpane/characterSettings.ts
+var characterValues = {
+  material: {
+    transmission: 1,
+    metalness: 0.8,
+    roughness: 0.12,
+    ior: 1.5,
+    thickness: 0.1,
+    specularColor: { r: 1, g: 1, b: 1 },
+    specularIntensity: 0.1,
+    emissive: { r: 1, g: 1, b: 1 },
+    emissiveIntensity: 0.1,
+    envMapIntensity: 1,
+    sheenColor: { r: 1, g: 1, b: 1 },
+    sheen: 0.5,
+    clearcoat: 0,
+    clearcoatRoughness: 0
+  }
+};
+var characterOptions = {
+  material: {
+    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: 0, 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 }
+  }
+};
+
 // src/character/CharacterMaterial.ts
 var CharacterMaterial = class extends MeshPhysicalMaterial {
   constructor() {
@@ -267,18 +314,32 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
     __publicField(this, "uniforms", {});
     __publicField(this, "colorsCube216", []);
     this.color = new Color(16777215);
-    this.transmission = 0.5;
-    this.metalness = 0.9;
-    this.roughness = 0.1;
-    this.ior = 1.2;
-    this.thickness = 0.1;
-    this.specularColor = new Color(30719);
-    this.specularIntensity = 0.1;
-    this.emissive = new Color(16777215);
-    this.emissiveIntensity = 0.1;
-    this.envMapIntensity = 1.8;
-    this.sheenColor = new Color(16777215);
-    this.sheen = 0.5;
+    this.transmission = characterValues.material.transmission;
+    this.metalness = characterValues.material.metalness;
+    this.roughness = characterValues.material.roughness;
+    this.ior = characterValues.material.ior;
+    this.thickness = characterValues.material.thickness;
+    this.specularColor = new Color().setRGB(
+      characterValues.material.specularColor.r,
+      characterValues.material.specularColor.g,
+      characterValues.material.specularColor.b
+    );
+    this.specularIntensity = characterValues.material.specularIntensity;
+    this.emissive = new Color().setRGB(
+      characterValues.material.emissive.r,
+      characterValues.material.emissive.g,
+      characterValues.material.emissive.b
+    );
+    this.emissiveIntensity = characterValues.material.emissiveIntensity;
+    this.envMapIntensity = characterValues.material.envMapIntensity;
+    this.sheenColor = new Color().setRGB(
+      characterValues.material.sheenColor.r,
+      characterValues.material.sheenColor.g,
+      characterValues.material.sheenColor.b
+    );
+    this.sheen = characterValues.material.sheen;
+    this.clearcoat = characterValues.material.clearcoat;
+    this.clearcoatRoughness = characterValues.material.clearcoatRoughness;
     this.onBeforeCompile = (shader) => {
       this.uniforms = UniformsUtils.clone(shader.uniforms);
       this.uniforms.nearClip = { value: 0.01 };
@@ -377,6 +438,34 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
       hue = (hue + goldenRatioConjugate) % 1;
     }
   }
+  update() {
+    this.transmission = characterValues.material.transmission;
+    this.metalness = characterValues.material.metalness;
+    this.roughness = characterValues.material.roughness;
+    this.ior = characterValues.material.ior;
+    this.thickness = characterValues.material.thickness;
+    this.specularColor = new Color().setRGB(
+      characterValues.material.specularColor.r,
+      characterValues.material.specularColor.g,
+      characterValues.material.specularColor.b
+    );
+    this.specularIntensity = characterValues.material.specularIntensity;
+    this.emissive = new Color().setRGB(
+      characterValues.material.emissive.r,
+      characterValues.material.emissive.g,
+      characterValues.material.emissive.b
+    );
+    this.emissiveIntensity = characterValues.material.emissiveIntensity;
+    this.envMapIntensity = characterValues.material.envMapIntensity;
+    this.sheenColor = new Color().setRGB(
+      characterValues.material.sheenColor.r,
+      characterValues.material.sheenColor.g,
+      characterValues.material.sheenColor.b
+    );
+    this.sheen = characterValues.material.sheen;
+    this.clearcoat = characterValues.material.clearcoat;
+    this.clearcoatRoughness = characterValues.material.clearcoatRoughness;
+  }
 };
 
 // src/character/CharacterState.ts
@@ -636,7 +725,7 @@ var CharacterModel = class {
 };
 
 // src/character/LocalController.ts
-import { Box3, Line3, Matrix4, Quaternion, Raycaster, Vector3 as Vector33 } from "three";
+import { Box3, Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
 var LocalController = class {
   constructor(model, id, collisionsManager, keyInputManager, cameraManager, timeManager) {
     this.model = model;
@@ -671,7 +760,7 @@ var LocalController = class {
     __publicField(this, "tempSegment", new Line3());
     __publicField(this, "tempVector", new Vector33());
     __publicField(this, "tempVector2", new Vector33());
-    __publicField(this, "rayCaster", new Raycaster());
+    __publicField(this, "rayCaster", new Raycaster2());
     __publicField(this, "forward");
     __publicField(this, "backward");
     __publicField(this, "left");
@@ -708,9 +797,10 @@ var LocalController = class {
     this.targetSpeed = this.run ? this.maxRunSpeed : this.maxWalkSpeed;
     this.speed += ease(this.targetSpeed, this.speed, 0.07);
     this.rayCaster.set(this.model.mesh.position, this.vectorDown);
-    const hit = this.rayCaster.intersectObjects([this.collisionsManager.colliders]);
-    if (hit.length > 0)
-      this.currentHeight = hit[0].distance;
+    const minimumDistance = this.collisionsManager.raycastFirstDistance(this.rayCaster.ray);
+    if (minimumDistance !== null) {
+      this.currentHeight = minimumDistance;
+    }
     if (anyDirection || !this.characterOnGround) {
       const targetAnimation = this.getTargetAnimation();
       this.model.updateAnimation(targetAnimation, this.timeManager.deltaTime);
@@ -761,10 +851,17 @@ var LocalController = class {
   updateAzimuthalAngle() {
     if (!this.thirdPersonCamera || !this.model?.mesh)
       return;
-    this.azimuthalAngle = Math.atan2(
-      this.thirdPersonCamera.position.x - this.model.mesh.position.x,
-      this.thirdPersonCamera.position.z - this.model.mesh.position.z
-    );
+    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);
+      this.azimuthalAngle = Math.atan2(cameraForward.x, cameraForward.z);
+    } else {
+      this.azimuthalAngle = Math.atan2(
+        this.thirdPersonCamera.position.x - this.model.mesh.position.x,
+        this.thirdPersonCamera.position.z - this.model.mesh.position.z
+      );
+    }
   }
   updateRotation() {
     if (!this.thirdPersonCamera || !this.model?.mesh)
@@ -918,6 +1015,7 @@ var Character = class {
     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();
     }
   }
 };
@@ -1030,6 +1128,8 @@ var CharacterManager = class {
     __publicField(this, "remoteCharacterControllers", /* @__PURE__ */ new Map());
     __publicField(this, "characterDescription", null);
     __publicField(this, "character", null);
+    __publicField(this, "cameraOffsetTarget", 0);
+    __publicField(this, "cameraOffset", 0);
     __publicField(this, "group");
     this.group = new Group();
     setInterval(() => this.update.bind(this), 3e3);
@@ -1142,7 +1242,13 @@ var CharacterManager = class {
   update() {
     if (this.character) {
       this.character.update(this.timeManager.time);
-      this.cameraManager.setTarget(this.character.position.add(new Vector36(0, 1.3, 0)));
+      if (this.character.model?.mesh) {
+        this.cameraOffsetTarget = this.cameraManager.targetDistance <= 0.4 ? 0.6 : 0;
+        this.cameraOffset += ease(this.cameraOffsetTarget, this.cameraOffset, 0.1);
+        const targetOffset = new Vector36(0, 1.3, this.cameraOffset);
+        targetOffset.applyQuaternion(this.character.model.mesh.quaternion);
+        this.cameraManager.setTarget(this.character.position.add(targetOffset));
+      }
       if (this.character.controller) {
         this.character.controller.update();
         if (this.timeManager.frame % 2 === 0) {
@@ -1309,36 +1415,40 @@ var MMLCompositionScene = class {
 
 // src/rendering/composer.ts
 import {
-  EffectComposer,
+  EffectComposer as EffectComposer2,
   RenderPass,
-  EffectPass,
+  EffectPass as EffectPass2,
   FXAAEffect,
   ShaderPass,
-  BloomEffect,
-  SSAOEffect,
-  NormalPass,
-  BlendFunction as BlendFunction2,
-  TextureEffect
+  BloomEffect as BloomEffect2,
+  SSAOEffect as SSAOEffect2,
+  BlendFunction as BlendFunction3,
+  TextureEffect,
+  ToneMappingEffect as ToneMappingEffect2,
+  SMAAEffect,
+  SMAAPreset,
+  EdgeDetectionMode,
+  PredicationMode,
+  NormalPass
 } from "postprocessing";
 import {
   Color as Color4,
+  HalfFloatType,
   LinearSRGBColorSpace,
   LoadingManager as LoadingManager2,
   PMREMGenerator,
   Vector2 as Vector22,
-  WebGLRenderer as WebGLRenderer2
+  WebGLRenderer as WebGLRenderer3
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
-import { Pane } from "tweakpane";
 
-// src/rendering/composerSettings.ts
+// src/tweakpane/composerSettings.ts
 import { BlendFunction } from "postprocessing";
-import { Color as Color3 } from "three";
 var composerValues = {
   renderer: {
     shadowMap: 2,
-    toneMapping: 1,
-    exposure: 0.75,
+    toneMapping: 4,
+    exposure: 1,
     bgIntensity: 0.6,
     bgBlurriness: 0
   },
@@ -1346,28 +1456,40 @@ var composerValues = {
     blendFunction: BlendFunction.MULTIPLY,
     distanceScaling: true,
     depthAwareUpsampling: true,
-    samples: 50,
-    rings: 11,
-    luminanceInfluence: 0.3,
-    radius: 0.07,
-    intensity: 3,
-    bias: 0.03,
+    samples: 17,
+    rings: 7,
+    luminanceInfluence: 0.7,
+    radius: 0.03,
+    intensity: 2.5,
+    bias: 0.05,
     fade: 0.03,
-    resolutionScale: 1,
-    color: new Color3(0),
-    worldDistanceThreshold: 200,
-    worldDistanceFalloff: 2,
-    worldProximityThreshold: 100,
-    worldProximityFalloff: 2
+    resolutionScale: 0.75,
+    color: { r: 0, g: 0, b: 0 },
+    worldDistanceThreshold: 30,
+    worldDistanceFalloff: 7,
+    worldProximityThreshold: 0.5,
+    worldProximityFalloff: 0.3
+  },
+  toneMapping: {
+    mode: 2,
+    resolution: 512,
+    whitePoint: 32,
+    middleGrey: 21,
+    minLuminance: 0.01,
+    averageLuminance: 0.01,
+    adaptationRate: 2
   },
-  grain: 0.04,
-  bloom: 0.7
+  brightness: -0.03,
+  contrast: 1.3,
+  saturation: 0.95,
+  grain: 0.055,
+  bloom: 0.4
 };
 var composerOptions = {
   renderer: {
     shadowMap: { min: 0, max: 2, step: 1 },
     toneMapping: { min: 0, max: 5, step: 1 },
-    exposure: { min: 0, max: 1, step: 0.01 },
+    exposure: { min: 0, max: 3, step: 0.01 },
     bgIntensity: { min: 0, max: 1, step: 0.01 },
     bgBlurriness: { min: 0, max: 0.1, step: 1e-3 }
   },
@@ -1385,6 +1507,24 @@ var composerOptions = {
     worldProximityThreshold: { min: 0, max: 2, step: 0.01 },
     worldProximityFalloff: { min: 0, max: 2, step: 0.01 }
   },
+  toneMapping: {
+    mode: { min: 0, max: 4, 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 },
+    adaptationRate: { min: 0.1, max: 2, step: 0.1 }
+  },
+  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 }
+  },
   grain: {
     amount: { min: 0, max: 0.2, step: 2e-3 }
   },
@@ -1405,6 +1545,13 @@ var rendererToneMappingTypes = {
   4: "ACESFilmicToneMapping",
   5: "CustomToneMapping"
 };
+var customToneMappingTypes = {
+  0: "REINHARD",
+  1: "REINHARD2",
+  2: "REINHARD2_ADAPTIVE",
+  3: "OPTIMIZED_CINEON",
+  4: "ACES_FILMIC"
+};
 var rendererBlades = {
   shadowMapType: shadowMapTypes[composerValues.renderer.shadowMap],
   toneMappingType: rendererToneMappingTypes[composerValues.renderer.toneMapping]
@@ -1415,6 +1562,12 @@ var setShadowMapType = (value) => {
 var setToneMappingType = (value) => {
   rendererBlades.toneMappingType = rendererToneMappingTypes[value];
 };
+var customToneMappingBlade = {
+  customToneMappingType: customToneMappingTypes[composerValues.toneMapping.mode]
+};
+var setCustomToneMappingType = (value) => {
+  customToneMappingBlade.customToneMappingType = customToneMappingTypes[value];
+};
 var ssaoMaterialParams = [
   "fade",
   "bias",
@@ -1431,11 +1584,437 @@ var statsData = {
   shaders: "0",
   postPasses: "0",
   drawCalls: "0",
+  rawDeltaTime: "0",
+  deltaTime: "0",
   FPS: "0"
 };
 
-// src/rendering/post-effects/gauss-grain.ts
-import { ShaderMaterial, Uniform, Vector2 } from "three";
+// src/tweakpane/TweakPane.ts
+import {
+  BlendFunction as BlendFunction2
+} from "postprocessing";
+import { Color as Color3 } from "three";
+import { Pane } from "tweakpane";
+var TweakPane = class {
+  constructor(renderer, scene, composer) {
+    __publicField(this, "renderer");
+    __publicField(this, "scene");
+    __publicField(this, "composer");
+    __publicField(this, "gui", new Pane());
+    __publicField(this, "render");
+    __publicField(this, "stats");
+    __publicField(this, "renderOptions");
+    __publicField(this, "ssao");
+    __publicField(this, "toneMapping");
+    __publicField(this, "post");
+    __publicField(this, "export");
+    __publicField(this, "characterMaterial");
+    __publicField(this, "saveVisibilityInLocalStorage", true);
+    __publicField(this, "guiVisible", false);
+    if (this.saveVisibilityInLocalStorage) {
+      const localStorageGuiVisible = localStorage.getItem("guiVisible");
+      if (localStorageGuiVisible !== null) {
+        if (localStorageGuiVisible === "true") {
+          this.guiVisible = true;
+        } else if (localStorageGuiVisible === "false") {
+          this.guiVisible = false;
+        }
+      }
+    }
+    this.renderer = renderer;
+    this.scene = scene;
+    this.composer = composer;
+    this.render = this.gui.addFolder({ title: "rendering", expanded: true });
+    this.stats = this.render.addFolder({ title: "stats", expanded: true });
+    this.renderOptions = this.render.addFolder({ title: "renderOptions", expanded: false });
+    this.toneMapping = this.render.addFolder({ title: "customToneMapping", expanded: false });
+    this.ssao = this.render.addFolder({ title: "ambientOcclusion", expanded: false });
+    this.post = this.render.addFolder({ title: "post", expanded: false });
+    this.toneMapping.hidden = composerValues.renderer.toneMapping === 5 ? false : true;
+    this.characterMaterial = this.gui.addFolder({ title: "characterMaterial", expanded: false });
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "transmission",
+      characterOptions.material.transmission
+    );
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "metalness",
+      characterOptions.material.metalness
+    );
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "roughness",
+      characterOptions.material.roughness
+    );
+    this.characterMaterial.addInput(characterValues.material, "ior", characterOptions.material.ior);
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "thickness",
+      characterOptions.material.thickness
+    );
+    this.characterMaterial.addInput(characterValues.material, "specularColor", {
+      color: { type: "float" }
+    });
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "specularIntensity",
+      characterOptions.material.specularIntensity
+    );
+    this.characterMaterial.addInput(characterValues.material, "emissive", {
+      color: { type: "float" }
+    });
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "emissiveIntensity",
+      characterOptions.material.emissiveIntensity
+    );
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "envMapIntensity",
+      characterOptions.material.envMapIntensity
+    );
+    this.characterMaterial.addInput(characterValues.material, "sheenColor", {
+      color: { type: "float" }
+    });
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "sheen",
+      characterOptions.material.sheen
+    );
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "clearcoat",
+      characterOptions.material.clearcoat
+    );
+    this.characterMaterial.addInput(
+      characterValues.material,
+      "clearcoatRoughness",
+      characterOptions.material.clearcoatRoughness
+    );
+    this.characterMaterial.on("change", (e) => {
+      if (!e.presetKey) {
+        return;
+      }
+      if (e.presetKey === "specularColor") {
+        characterValues.material.specularColor = {
+          r: e.value.r,
+          g: e.value.g,
+          b: e.value.b
+        };
+        return;
+      }
+      if (e.presetKey === "emissive") {
+        characterValues.material.emissive = {
+          r: e.value.r,
+          g: e.value.g,
+          b: e.value.b
+        };
+        return;
+      }
+      if (e.presetKey === "sheenColor") {
+        characterValues.material.sheenColor = {
+          r: e.value.r,
+          g: e.value.g,
+          b: e.value.b
+        };
+        return;
+      }
+    });
+    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();
+  }
+  setupGUIListeners() {
+    const gui = this.gui;
+    const paneElement = gui.containerElem_;
+    paneElement.style.display = this.guiVisible ? "unset" : "none";
+    this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
+    this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
+    this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
+  }
+  setupRenderPane(ssaoEffect, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect) {
+    this.stats.addMonitor(statsData, "triangles");
+    this.stats.addMonitor(statsData, "geometries");
+    this.stats.addMonitor(statsData, "textures");
+    this.stats.addMonitor(statsData, "shaders");
+    this.stats.addMonitor(statsData, "postPasses");
+    this.stats.addMonitor(statsData, "drawCalls");
+    this.stats.addMonitor(statsData, "rawDeltaTime");
+    this.stats.addMonitor(statsData, "deltaTime");
+    this.stats.addMonitor(statsData, "FPS");
+    this.renderOptions.addInput(
+      composerValues.renderer,
+      "shadowMap",
+      composerOptions.renderer.shadowMap
+    );
+    this.renderOptions.addMonitor(rendererBlades, "shadowMapType");
+    this.renderOptions.addInput(
+      composerValues.renderer,
+      "toneMapping",
+      composerOptions.renderer.toneMapping
+    );
+    this.renderOptions.addMonitor(rendererBlades, "toneMappingType");
+    this.renderOptions.addInput(
+      composerValues.renderer,
+      "exposure",
+      composerOptions.renderer.exposure
+    );
+    this.renderOptions.addInput(
+      composerValues.renderer,
+      "bgIntensity",
+      composerOptions.renderer.bgIntensity
+    );
+    this.renderOptions.addInput(
+      composerValues.renderer,
+      "bgBlurriness",
+      composerOptions.renderer.bgBlurriness
+    );
+    this.renderOptions.on("change", (e) => {
+      const target = e.target;
+      switch (target.label) {
+        case "shadowMap":
+          this.renderer.shadowMap.type = e.value;
+          setShadowMapType(e.value);
+          break;
+        case "toneMapping":
+          this.renderer.toneMapping = e.value;
+          if (e.value !== 5 && e.value !== 0) {
+            this.toneMapping.hidden = true;
+          } else {
+            this.toneMapping.hidden = false;
+          }
+          toneMappingPass.enabled = e.value === 5 || e.value === 0 ? true : false;
+          setToneMappingType(e.value);
+          break;
+        case "exposure":
+          this.renderer.toneMappingExposure = e.value;
+          break;
+        case "bgIntensity":
+          this.scene.backgroundIntensity = e.value;
+          break;
+        case "bgBlurriness":
+          this.scene.backgroundBlurriness = e.value;
+          break;
+        default:
+          break;
+      }
+    });
+    this.ssao.addInput({ showEffectOnly: false }, "showEffectOnly");
+    this.ssao.addInput(composerValues.ssao, "samples", composerOptions.ssao.samples);
+    this.ssao.addInput(composerValues.ssao, "rings", composerOptions.ssao.rings);
+    this.ssao.addInput(
+      composerValues.ssao,
+      "luminanceInfluence",
+      composerOptions.ssao.luminanceInfluence
+    );
+    this.ssao.addInput(composerValues.ssao, "radius", composerOptions.ssao.radius);
+    this.ssao.addInput(composerValues.ssao, "intensity", composerOptions.ssao.intensity);
+    this.ssao.addInput(composerValues.ssao, "bias", composerOptions.ssao.bias);
+    this.ssao.addInput(composerValues.ssao, "fade", composerOptions.ssao.fade);
+    this.ssao.addInput(
+      composerValues.ssao,
+      "resolutionScale",
+      composerOptions.ssao.resolutionScale
+    );
+    this.ssao.addInput(
+      composerValues.ssao,
+      "worldDistanceThreshold",
+      composerOptions.ssao.worldDistanceThreshold
+    );
+    this.ssao.addInput(
+      composerValues.ssao,
+      "worldDistanceFalloff",
+      composerOptions.ssao.worldDistanceFalloff
+    );
+    this.ssao.addInput(
+      composerValues.ssao,
+      "worldProximityThreshold",
+      composerOptions.ssao.worldProximityThreshold
+    );
+    this.ssao.addInput(
+      composerValues.ssao,
+      "worldProximityFalloff",
+      composerOptions.ssao.worldProximityFalloff
+    );
+    this.ssao.addInput(composerValues.ssao, "color", {
+      color: { alpha: false, type: "float" }
+    });
+    this.ssao.on("change", (e) => {
+      if (!e.presetKey) {
+        return;
+      }
+      const preset = e.presetKey;
+      if (preset === "showEffectOnly") {
+        ssaoEffect.blendMode.blendFunction = e.value === true ? BlendFunction2.NORMAL : BlendFunction2.MULTIPLY;
+        return;
+      }
+      if (preset === "resolutionScale") {
+        ssaoEffect.resolution.scale = e.value;
+        return;
+      }
+      if (ssaoMaterialParams.includes(e.presetKey)) {
+        ssaoEffect.ssaoMaterial[preset] = e.value;
+        return;
+      }
+      if (e.presetKey === "color") {
+        ssaoEffect.color = new Color3().setRGB(e.value.r, e.value.g, e.value.b);
+        return;
+      }
+      ssaoEffect[preset] = e.value;
+    });
+    this.toneMapping.addInput(composerValues.toneMapping, "mode", composerOptions.toneMapping.mode);
+    this.toneMapping.addMonitor(customToneMappingBlade, "customToneMappingType");
+    this.toneMapping.addInput(
+      composerValues.toneMapping,
+      "whitePoint",
+      composerOptions.toneMapping.whitePoint
+    );
+    this.toneMapping.addInput(
+      composerValues.toneMapping,
+      "middleGrey",
+      composerOptions.toneMapping.middleGrey
+    );
+    const minLuminance = this.toneMapping.addInput(
+      composerValues.toneMapping,
+      "minLuminance",
+      composerOptions.toneMapping.minLuminance
+    );
+    minLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+    const averageLuminance = this.toneMapping.addInput(
+      composerValues.toneMapping,
+      "averageLuminance",
+      composerOptions.toneMapping.averageLuminance
+    );
+    averageLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+    this.toneMapping.addInput(
+      composerValues.toneMapping,
+      "adaptationRate",
+      composerOptions.toneMapping.adaptationRate
+    );
+    this.toneMapping.on("change", (e) => {
+      if (!e.presetKey) {
+        return;
+      }
+      const preset = e.presetKey;
+      if (preset === "mode") {
+        minLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+        averageLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+        setCustomToneMappingType(e.value);
+      }
+      toneMappingEffect[preset] = e.value;
+      return;
+    });
+    this.post.addInput(composerValues, "brightness", composerOptions.brightness.amount);
+    this.post.addInput(composerValues, "contrast", composerOptions.contrast.amount);
+    this.post.addInput(composerValues, "saturation", composerOptions.saturation.amount);
+    this.post.addInput(composerValues, "bloom", composerOptions.bloom.amount);
+    this.post.addInput(composerValues, "grain", composerOptions.grain.amount);
+    this.post.on("change", (e) => {
+      const target = e.presetKey;
+      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;
+        case "bloom":
+          bloomEffect.intensity = e.value;
+          break;
+        case "grain":
+          gaussGrainEffect.uniforms.amount.value = e.value;
+          break;
+        default:
+          break;
+      }
+    });
+    const exportButton = this.export.addButton({ title: "export" });
+    exportButton.on("click", () => {
+      this.downloadSettingsAsJSON(this.gui.exportPreset());
+    });
+    const importButton = this.export.addButton({ title: "import" });
+    importButton.on("click", () => {
+      this.importSettingsFromJSON((settings) => {
+        this.gui.importPreset(settings);
+      });
+    });
+  }
+  formatDateForFilename() {
+    const date = /* @__PURE__ */ new Date();
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+    return `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
+  }
+  downloadSettingsAsJSON(settings) {
+    const jsonString = JSON.stringify(settings, null, 2);
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.download = `settings ${this.formatDateForFilename()}.json`;
+    a.href = url;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  importSettingsFromJSON(callback) {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.addEventListener("change", (event) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (loadEvent) => {
+          try {
+            const settings = JSON.parse(loadEvent.target?.result);
+            callback(settings);
+          } catch (err) {
+            console.error("Error parsing JSON:", err);
+          }
+        };
+        reader.readAsText(file);
+      }
+    });
+    input.click();
+  }
+  updateStats(timeManager) {
+    const { geometries, textures } = this.renderer.info.memory;
+    const { triangles, calls } = this.renderer.info.render;
+    statsData.triangles = triangles.toString();
+    statsData.geometries = geometries.toString();
+    statsData.textures = textures.toString();
+    statsData.shaders = this.renderer.info.programs.length.toString();
+    statsData.postPasses = this.composer.passes.length.toString();
+    statsData.drawCalls = calls.toString();
+    statsData.rawDeltaTime = (Math.round(timeManager.rawDeltaTime * 1e5) / 1e5).toString();
+    statsData.deltaTime = (Math.round(timeManager.deltaTime * 1e5) / 1e5).toString();
+    statsData.FPS = timeManager.fps.toString();
+  }
+  toggleGUI() {
+    const gui = this.gui;
+    const paneElement = gui.containerElem_;
+    paneElement.style.display = this.guiVisible ? "none" : "unset";
+    this.guiVisible = !this.guiVisible;
+    if (this.saveVisibilityInLocalStorage) {
+      localStorage.setItem("guiVisible", this.guiVisible === true ? "true" : "false");
+    }
+  }
+};
+
+// src/rendering/post-effects/bright-contrast-sat.ts
+import { ShaderMaterial, Uniform } from "three";
 
 // src/rendering/shaders/vertex-shader.ts
 var vertexShader = (
@@ -1451,14 +2030,86 @@ var vertexShader = (
   `
 );
 
-// src/rendering/post-effects/gauss-grain.ts
-var GaussGrainEffect = new ShaderMaterial({
+// src/rendering/post-effects/bright-contrast-sat.ts
+var BrightnessContrastSaturation = new ShaderMaterial({
   uniforms: {
     tDiffuse: new Uniform(null),
-    resolution: new Uniform(new Vector2()),
-    time: new Uniform(0),
-    amount: new Uniform(0),
-    alpha: new Uniform(0)
+    brightness: new Uniform(0),
+    contrast: new Uniform(1),
+    saturation: new Uniform(1)
+  },
+  vertexShader,
+  fragmentShader: (
+    /* glsl */
+    `
+    precision highp float;
+    in vec2 vUv;
+
+    uniform sampler2D tDiffuse;
+    uniform float brightness;
+    uniform float contrast;
+    uniform float saturation;
+
+    mat4 brightnessMatrix(float brightness) {
+      return mat4(
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        brightness, brightness, brightness, 1
+      );
+    }
+
+    mat4 contrastMatrix(float contrast) {
+      float t = (1.0 - contrast) / 2.0;
+
+      return mat4(
+        contrast, 0, 0, 0,
+        0, contrast, 0, 0,
+        0, 0, contrast, 0,
+        t, t, t, 1
+      );
+    }
+
+    mat4 saturationMatrix(float saturation) {
+      vec3 luminance = vec3(0.3086, 0.6094, 0.0820);
+      float oneMinusSat = 1.0 - saturation;
+      vec3 red = vec3(luminance.x * oneMinusSat);
+      red += vec3(saturation, 0, 0);
+      vec3 green = vec3(luminance.y * oneMinusSat);
+      green += vec3(0, saturation, 0);
+      vec3 blue = vec3(luminance.z * oneMinusSat);
+      blue += vec3(0, 0, saturation);
+      return mat4(
+        red, 0,
+        green, 0,
+        blue, 0,
+        0, 0, 0, 1
+      );
+    }
+
+    void main(void) {
+      vec4 color = texture(tDiffuse, vUv);
+      gl_FragColor = (
+        brightnessMatrix(brightness) *
+        contrastMatrix(contrast) *
+        saturationMatrix(saturation) *
+        color
+      );
+    }
+  `
+  ),
+  dithering: true
+});
+
+// src/rendering/post-effects/gauss-grain.ts
+import { ShaderMaterial as ShaderMaterial2, Uniform as Uniform2, Vector2 } from "three";
+var GaussGrainEffect = new ShaderMaterial2({
+  uniforms: {
+    tDiffuse: new Uniform2(null),
+    resolution: new Uniform2(new Vector2()),
+    time: new Uniform2(0),
+    amount: new Uniform2(0),
+    alpha: new Uniform2(0)
   },
   vertexShader,
   fragmentShader: (
@@ -1485,7 +2136,7 @@ var GaussGrainEffect = new ShaderMaterial({
     }
 
     vec3 gaussgrain() {
-      vec2 ps = vec2(1.01) / resolution.xy;
+      vec2 ps = vec2(1.0) / resolution.xy;
       vec2 uv = gl_FragCoord.xy * ps;
       float t = time;
       float seed = dot(uv, vec2(12.9898, 78.233));
@@ -1502,7 +2153,8 @@ var GaussGrainEffect = new ShaderMaterial({
       gl_FragColor = vec4(clamp(col, 0.0, 1.0), alpha);
     }
   `
-  )
+  ),
+  dithering: true
 });
 
 // src/rendering/composer.ts
@@ -1521,22 +2173,22 @@ var Composer = class {
     __publicField(this, "fxaaPass");
     __publicField(this, "bloomEffect");
     __publicField(this, "bloomPass");
+    __publicField(this, "toneMappingEffect");
+    __publicField(this, "smaaEffect");
     __publicField(this, "normalPass");
     __publicField(this, "normalTextureEffect");
     __publicField(this, "ssaoEffect");
     __publicField(this, "ssaoPass");
+    __publicField(this, "toneMappingPass");
+    __publicField(this, "smaaPass");
+    __publicField(this, "bcs", BrightnessContrastSaturation);
+    __publicField(this, "bcsPass");
     __publicField(this, "gaussGrainEffect", GaussGrainEffect);
     __publicField(this, "gaussGrainPass");
-    __publicField(this, "gui", new Pane());
-    __publicField(this, "guiVisible", false);
-    __publicField(this, "stats", this.gui.addFolder({ title: "stats", expanded: true }));
-    __publicField(this, "renderOptions", this.gui.addFolder({ title: "renderOptions", expanded: false }));
-    __publicField(this, "ssao", this.gui.addFolder({ title: "ambientOcclusion", expanded: false }));
-    __publicField(this, "post", this.gui.addFolder({ title: "post", expanded: false }));
-    __publicField(this, "export", this.gui.addFolder({ title: "import/export", expanded: false }));
+    __publicField(this, "tweakPane");
     this.scene = scene;
     this.camera = camera;
-    this.renderer = new WebGLRenderer2({
+    this.renderer = new WebGLRenderer3({
       powerPreference: "high-performance",
       antialias: false,
       stencil: false,
@@ -1547,185 +2199,102 @@ var Composer = class {
     this.renderer.shadowMap.enabled = true;
     this.renderer.shadowMap.type = composerValues.renderer.shadowMap;
     this.renderer.toneMapping = composerValues.renderer.toneMapping;
-    this.renderer.toneMappingExposure = 0.7;
+    this.renderer.toneMappingExposure = composerValues.renderer.exposure;
     document.body.appendChild(this.renderer.domElement);
-    this.composer = new EffectComposer(this.renderer);
+    this.composer = 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 NormalPass(this.scene, this.camera);
     this.normalTextureEffect = new TextureEffect({
-      blendFunction: BlendFunction2.SKIP,
+      blendFunction: BlendFunction3.SKIP,
       texture: this.normalPass.texture
     });
     this.fxaaEffect = new FXAAEffect();
-    this.bloomEffect = new BloomEffect({
+    this.bloomEffect = new BloomEffect2({
       intensity: composerValues.bloom
     });
-    this.ssaoEffect = new SSAOEffect(this.camera, this.normalPass.texture, {
-      ...composerValues.ssao
+    this.ssaoEffect = new SSAOEffect2(this.camera, this.normalPass.texture, {
+      blendFunction: composerValues.ssao.blendFunction,
+      distanceScaling: composerValues.ssao.distanceScaling,
+      depthAwareUpsampling: composerValues.ssao.depthAwareUpsampling,
+      samples: composerValues.ssao.samples,
+      rings: composerValues.ssao.rings,
+      luminanceInfluence: composerValues.ssao.luminanceInfluence,
+      radius: composerValues.ssao.radius,
+      intensity: composerValues.ssao.intensity,
+      bias: composerValues.ssao.bias,
+      fade: composerValues.ssao.fade,
+      resolutionScale: composerValues.ssao.resolutionScale,
+      color: new Color4().setRGB(composerValues.ssao.color.r, composerValues.ssao.color.g, composerValues.ssao.color.b),
+      worldDistanceThreshold: composerValues.ssao.worldDistanceThreshold,
+      worldDistanceFalloff: composerValues.ssao.worldDistanceFalloff,
+      worldProximityThreshold: composerValues.ssao.worldProximityThreshold,
+      worldProximityFalloff: composerValues.ssao.worldProximityFalloff
+    });
+    this.fxaaPass = new EffectPass2(this.camera, this.fxaaEffect);
+    this.bloomPass = new EffectPass2(this.camera, this.bloomEffect);
+    this.ssaoPass = new EffectPass2(this.camera, this.ssaoEffect, this.normalTextureEffect);
+    this.toneMappingEffect = new ToneMappingEffect2({
+      mode: composerValues.toneMapping.mode,
+      resolution: composerValues.toneMapping.resolution,
+      whitePoint: composerValues.toneMapping.whitePoint,
+      middleGrey: composerValues.toneMapping.middleGrey,
+      minLuminance: composerValues.toneMapping.minLuminance,
+      averageLuminance: composerValues.toneMapping.averageLuminance,
+      adaptationRate: composerValues.toneMapping.adaptationRate
+    });
+    this.smaaEffect = new SMAAEffect({
+      preset: SMAAPreset.ULTRA,
+      edgeDetectionMode: EdgeDetectionMode.COLOR,
+      predicationMode: PredicationMode.DEPTH
     });
-    this.fxaaPass = new EffectPass(this.camera, this.fxaaEffect);
-    this.bloomPass = new EffectPass(this.camera, this.bloomEffect);
-    this.ssaoPass = new EffectPass(this.camera, this.ssaoEffect, this.normalTextureEffect);
+    this.toneMappingPass = new EffectPass2(this.camera, this.toneMappingEffect);
+    this.toneMappingPass.enabled = composerValues.renderer.toneMapping === 5 || composerValues.renderer.toneMapping === 0 ? true : false;
+    this.bcsPass = new ShaderPass(this.bcs, "tDiffuse");
+    this.bcs.uniforms.brightness.value = composerValues.brightness;
+    this.bcs.uniforms.contrast.value = composerValues.contrast;
+    this.bcs.uniforms.saturation.value = composerValues.saturation;
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
+    this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
     this.composer.addPass(this.renderPass);
     this.composer.addPass(this.normalPass);
     this.composer.addPass(this.ssaoPass);
     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.tweakPane.setupRenderPane(
+      this.ssaoEffect,
+      this.toneMappingEffect,
+      this.toneMappingPass,
+      this.bcs,
+      this.bloomEffect,
+      this.gaussGrainEffect
+    );
     window.addEventListener("resize", () => this.updateProjection());
-    window.addEventListener("keydown", this.processKey.bind(this));
-    this.setupGUIListeners.bind(this)();
     this.updateProjection();
-    this.setupTweakPane();
-  }
-  setupGUIListeners() {
-    const gui = this.gui;
-    const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "unset" : "none";
-    this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
-    this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
-  }
-  setupTweakPane() {
-    this.stats.addMonitor(statsData, "triangles");
-    this.stats.addMonitor(statsData, "geometries");
-    this.stats.addMonitor(statsData, "textures");
-    this.stats.addMonitor(statsData, "shaders");
-    this.stats.addMonitor(statsData, "postPasses");
-    this.stats.addMonitor(statsData, "drawCalls");
-    this.stats.addMonitor(statsData, "FPS");
-    this.renderOptions.addInput(composerValues.renderer, "shadowMap", composerOptions.renderer.shadowMap);
-    this.renderOptions.addMonitor(rendererBlades, "shadowMapType");
-    this.renderOptions.addInput(composerValues.renderer, "toneMapping", composerOptions.renderer.toneMapping);
-    this.renderOptions.addMonitor(rendererBlades, "toneMappingType");
-    this.renderOptions.addInput(composerValues.renderer, "exposure", composerOptions.renderer.exposure);
-    this.renderOptions.addInput(composerValues.renderer, "bgIntensity", composerOptions.renderer.bgIntensity);
-    this.renderOptions.addInput(composerValues.renderer, "bgBlurriness", composerOptions.renderer.bgBlurriness);
-    this.renderOptions.on("change", (e) => {
-      const target = e.target;
-      switch (target.label) {
-        case "shadowMap":
-          this.renderer.shadowMap.type = e.value;
-          setShadowMapType(e.value);
-          break;
-        case "toneMapping":
-          this.renderer.toneMapping = e.value;
-          setToneMappingType(e.value);
-          break;
-        case "exposure":
-          this.renderer.toneMappingExposure = e.value;
-          break;
-        case "bgIntensity":
-          this.scene.backgroundIntensity = e.value;
-          break;
-        case "bgBlurriness":
-          this.scene.backgroundBlurriness = e.value;
-          break;
-        default:
-          break;
-      }
-    });
-    this.ssao.addInput({ showEffectOnly: false }, "showEffectOnly");
-    this.ssao.addInput(composerValues.ssao, "samples", composerOptions.ssao.samples);
-    this.ssao.addInput(composerValues.ssao, "rings", composerOptions.ssao.rings);
-    this.ssao.addInput(composerValues.ssao, "luminanceInfluence", composerOptions.ssao.luminanceInfluence);
-    this.ssao.addInput(composerValues.ssao, "radius", composerOptions.ssao.radius);
-    this.ssao.addInput(composerValues.ssao, "intensity", composerOptions.ssao.intensity);
-    this.ssao.addInput(composerValues.ssao, "bias", composerOptions.ssao.bias);
-    this.ssao.addInput(composerValues.ssao, "fade", composerOptions.ssao.fade);
-    this.ssao.addInput(composerValues.ssao, "resolutionScale", composerOptions.ssao.resolutionScale);
-    this.ssao.addInput(composerValues.ssao, "worldDistanceThreshold", composerOptions.ssao.worldDistanceThreshold);
-    this.ssao.addInput(composerValues.ssao, "worldDistanceFalloff", composerOptions.ssao.worldDistanceFalloff);
-    this.ssao.addInput(composerValues.ssao, "worldProximityThreshold", composerOptions.ssao.worldProximityThreshold);
-    this.ssao.addInput(composerValues.ssao, "worldProximityFalloff", composerOptions.ssao.worldProximityFalloff);
-    this.ssao.addInput(composerValues.ssao, "color");
-    this.ssao.on("change", (e) => {
-      if (!e.presetKey) {
-        return;
-      }
-      const preset = e.presetKey;
-      if (preset === "showEffectOnly") {
-        this.ssaoEffect.blendMode.blendFunction = e.value === true ? BlendFunction2.NORMAL : BlendFunction2.MULTIPLY;
-        return;
-      }
-      if (preset === "resolutionScale") {
-        this.ssaoEffect.resolution.scale = e.value;
-        return;
-      }
-      if (ssaoMaterialParams.includes(e.presetKey)) {
-        this.ssaoEffect.ssaoMaterial[preset] = e.value;
-        return;
-      }
-      if (e.presetKey === "color") {
-        this.ssaoEffect.color = new Color4().setRGB(
-          e.value.r / 255,
-          e.value.g / 255,
-          e.value.b / 255
-        );
-        return;
-      }
-      this.ssaoEffect[preset] = e.value;
-    });
-    this.post.addInput(composerValues, "bloom", composerOptions.bloom.amount);
-    this.post.addInput(composerValues, "grain", composerOptions.grain.amount);
-    this.post.on("change", (e) => {
-      const target = e.presetKey;
-      console.log(target);
-      switch (target) {
-        case "bloom":
-          this.bloomEffect.intensity = e.value;
-          break;
-        case "grain":
-          this.gaussGrainEffect.uniforms.amount.value = e.value;
-          break;
-        default:
-          break;
-      }
-    });
-    const button = this.export.addButton({ title: "export" });
-    button.on("click", () => {
-      console.log(this.gui.exportPreset());
-    });
-  }
-  toggleGUI() {
-    const gui = this.gui;
-    const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "none" : "unset";
-    this.guiVisible = !this.guiVisible;
-  }
-  processKey(e) {
-    if (e.key === "p")
-      this.toggleGUI();
   }
   updateProjection() {
     this.width = window.innerWidth;
     this.height = innerHeight;
     this.resolution = new Vector22(this.width, this.height);
-    if (this.composer)
-      this.composer.setSize(this.width, this.height);
-    if (this.fxaaPass)
-      this.fxaaPass.setSize(this.width, this.height);
-    if (this.renderPass)
-      this.renderPass.setSize(this.width, this.height);
-    if (this.bloomPass)
-      this.bloomPass.setSize(this.width, this.height);
-    if (this.ssaoPass)
-      this.ssaoPass.setSize(this.width, this.height);
-    if (this.normalPass)
-      this.normalPass.setSize(this.width, this.height);
+    this.composer.setSize(this.width, this.height);
+    this.renderPass.setSize(this.width, this.height);
+    this.normalPass.setSize(this.width, this.height);
+    this.ssaoPass.setSize(this.width, this.height);
+    this.fxaaPass.setSize(this.width, this.height);
+    this.smaaPass.setSize(this.width, this.height);
+    this.bloomPass.setSize(this.width, this.height);
+    this.toneMappingPass.setSize(this.width, this.height);
+    this.gaussGrainPass.setSize(this.width, this.height);
     this.renderer.setSize(this.width, this.height);
   }
-  updateStats(timeManager) {
-    const { geometries, textures } = this.renderer.info.memory;
-    const { triangles, calls } = this.renderer.info.render;
-    statsData.triangles = triangles.toString();
-    statsData.geometries = geometries.toString();
-    statsData.textures = textures.toString();
-    statsData.shaders = this.renderer.info.programs.length.toString();
-    statsData.postPasses = this.composer.passes.length.toString();
-    statsData.drawCalls = calls.toString();
-    statsData.FPS = Math.round(timeManager.averageFPS).toString();
+  isTweakPaneVisible() {
+    return this.tweakPane.guiVisible;
   }
   render(timeManager) {
     this.renderer.info.reset();
@@ -1734,7 +2303,9 @@ var Composer = class {
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
     this.gaussGrainEffect.uniforms.alpha.value = 1;
     this.composer.render();
-    this.updateStats(timeManager);
+    if (this.tweakPane.guiVisible) {
+      this.tweakPane.updateStats(timeManager);
+    }
   }
   useHDRI(url) {
     if (this.isEnvHDRI || !this.renderer)
@@ -1749,7 +2320,7 @@ var Composer = class {
           envMap.needsUpdate = true;
           this.scene.environment = envMap;
           this.scene.background = envMap;
-          this.scene.backgroundIntensity = 0.5;
+          this.scene.backgroundIntensity = composerValues.renderer.bgIntensity;
           this.isEnvHDRI = true;
           texture.dispose();
           pmremGenerator.dispose();
@@ -1770,10 +2341,8 @@ var TimeManager = class {
   constructor() {
     __publicField(this, "clock", new Clock());
     __publicField(this, "roundMagnitude", 2e5);
-    __publicField(this, "maxAverageFrames", 700);
+    __publicField(this, "maxAverageFrames", 150);
     __publicField(this, "deltaTimes", []);
-    __publicField(this, "fpsMaxSamples", 10);
-    __publicField(this, "fpsSamples", []);
     __publicField(this, "targetAverageDeltaTime", 0);
     __publicField(this, "lerpedAverageMagDelta", 0);
     __publicField(this, "fpsUpdateTime", 0);
@@ -1781,6 +2350,7 @@ var TimeManager = class {
     __publicField(this, "time", 0);
     __publicField(this, "deltaTime", 0);
     __publicField(this, "rawDeltaTime", 0);
+    __publicField(this, "smoothDeltaTime", 0);
     __publicField(this, "frame", 0);
     __publicField(this, "fps", 0);
     __publicField(this, "averageFPS", 0);
@@ -1800,16 +2370,11 @@ var TimeManager = class {
     );
     const revertMagnitude = this.lerpedAverageMagDelta / this.roundMagnitude;
     const smoothDT = Math.round(revertMagnitude * this.roundMagnitude) / this.roundMagnitude;
-    this.deltaTime = smoothDT > this.rawDeltaTime * 1.75 ? this.rawDeltaTime : smoothDT;
+    this.smoothDeltaTime = smoothDT > this.rawDeltaTime * 1.75 ? this.rawDeltaTime : smoothDT;
+    this.deltaTime = this.smoothDeltaTime;
     this.framesSinceLastFPSUpdate++;
     if (this.framesSinceLastFPSUpdate >= 60) {
       this.fps = Math.round(this.framesSinceLastFPSUpdate / (this.time - this.fpsUpdateTime) * 100) / 100;
-      this.fpsSamples.push(this.fps);
-      if (this.fpsSamples.length > this.fpsMaxSamples)
-        this.fpsSamples.shift();
-      this.averageFPS = this.fpsSamples.length === this.fpsMaxSamples ? Math.round(
-        this.fpsSamples.reduce((prev, curr) => prev + curr, 0) / this.fpsSamples.length
-      ) : this.fps;
       this.fpsUpdateTime = this.time;
       this.framesSinceLastFPSUpdate = 0;
     }
@@ -1823,9 +2388,9 @@ import {
 } from "mml-web";
 import {
   Color as Color5,
+  DoubleSide,
   Euler,
   FrontSide,
-  Group as Group3,
   Mesh as Mesh2,
   MeshStandardMaterial as MeshStandardMaterial2,
   Vector3 as Vector37
@@ -1840,23 +2405,20 @@ var CollisionsManager = class {
     __publicField(this, "tempVector2", new Vector37());
     __publicField(this, "collisionMeshState", /* @__PURE__ */ new Map());
     __publicField(this, "collisionTrigger");
-    __publicField(this, "colliders", new Group3());
-    __publicField(this, "collisionEnabledMeshes", {});
     this.scene = scene;
     this.collisionTrigger = MMLCollisionTrigger.init();
   }
-  safeAddColliders(child) {
-    if (!(child.uuid in this.collisionEnabledMeshes)) {
-      const clone = child.clone();
-      this.collisionEnabledMeshes[child.uuid] = clone;
-      this.colliders.add(clone);
-    }
-  }
-  removeFromColliders(child) {
-    if (child.uuid in this.collisionEnabledMeshes) {
-      this.colliders.remove(this.collisionEnabledMeshes[child.uuid]);
-      delete this.collisionEnabledMeshes[child.uuid];
+  raycastFirstDistance(ray) {
+    let minimumDistance = Infinity;
+    for (const [, value] of this.collisionMeshState) {
+      const hit = value.meshBVH.raycast(ray, DoubleSide);
+      if (hit.length > 0) {
+        if (hit[0].distance < minimumDistance) {
+          minimumDistance = hit[0].distance;
+        }
+      }
     }
+    return minimumDistance;
   }
   createCollisionMeshState(group) {
     const geometries = [];
@@ -1865,7 +2427,6 @@ var CollisionsManager = class {
         const mesh = child;
         mesh.localToWorld(new Vector37());
         mesh.updateMatrixWorld();
-        this.safeAddColliders(mesh);
         const clonedGeometry = mesh.geometry.clone();
         clonedGeometry.applyMatrix4(mesh.matrixWorld);
         for (const key in clonedGeometry.attributes) {
@@ -1926,13 +2487,6 @@ var CollisionsManager = class {
         this.scene.remove(meshState.visualizer);
       }
       this.collisionMeshState.delete(group);
-      if (group) {
-        group.traverse((child) => {
-          if (child.type === "Mesh") {
-            this.removeFromColliders(child);
-          }
-        });
-      }
     }
   }
   applyCollider(tempSegment, radius, boundingBox, meshState) {