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

package/build/index.js

@@ -1,10 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-
 // src/camera/CameraManager.ts
 import { PerspectiveCamera, Raycaster, Vector3 as Vector32 } from "three";
 
@@ -47,28 +40,26 @@ function getTweakpaneActive() {
 var CameraManager = class {
   constructor(collisionsManager) {
     this.collisionsManager = collisionsManager;
-    __publicField(this, "camera");
-    __publicField(this, "initialDistance", 3.3);
-    __publicField(this, "minDistance", 0.1);
-    __publicField(this, "maxDistance", 8);
-    __publicField(this, "initialFOV", 60);
-    __publicField(this, "fov", this.initialFOV);
-    __publicField(this, "minFOV", 50);
-    __publicField(this, "maxFOV", 70);
-    __publicField(this, "targetFOV", this.initialFOV);
-    __publicField(this, "minPolarAngle", Math.PI * 0.25);
-    __publicField(this, "maxPolarAngle", Math.PI * 0.95);
-    __publicField(this, "dampingFactor", 0.091);
-    __publicField(this, "targetDistance", this.initialDistance);
-    __publicField(this, "distance", this.initialDistance);
-    __publicField(this, "targetPhi", Math.PI / 2);
-    __publicField(this, "phi", Math.PI / 2);
-    __publicField(this, "targetTheta", -Math.PI / 2);
-    __publicField(this, "theta", -Math.PI / 2);
-    __publicField(this, "dragging", false);
-    __publicField(this, "target", new Vector32(0, 1.55, 0));
-    __publicField(this, "hadTarget", false);
-    __publicField(this, "rayCaster");
+    this.initialDistance = 3.3;
+    this.minDistance = 0.1;
+    this.maxDistance = 8;
+    this.initialFOV = 60;
+    this.fov = this.initialFOV;
+    this.minFOV = 50;
+    this.maxFOV = 70;
+    this.targetFOV = this.initialFOV;
+    this.minPolarAngle = Math.PI * 0.25;
+    this.maxPolarAngle = Math.PI * 0.95;
+    this.dampingFactor = 0.091;
+    this.targetDistance = this.initialDistance;
+    this.distance = this.initialDistance;
+    this.targetPhi = Math.PI / 2;
+    this.phi = Math.PI / 2;
+    this.targetTheta = -Math.PI / 2;
+    this.theta = -Math.PI / 2;
+    this.dragging = false;
+    this.target = new Vector32(0, 1.55, 0);
+    this.hadTarget = false;
     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();
@@ -272,38 +263,110 @@ ${before}
   );
 }
 
-// src/tweakpane/characterSettings.ts
+// src/tweakpane/blades/characterFolder.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
-  }
+  transmission: 0.01,
+  metalness: 0.8,
+  roughness: 0.05,
+  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,
+  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 }
+  transmission: { min: 0.01, max: 3, step: 0.01 },
+  metalness: { min: 0, max: 1, step: 0.01 },
+  roughness: { min: 0, max: 1, step: 0.01 },
+  ior: { min: 1, max: 5, step: 0.01 },
+  thickness: { min: 0, max: 1, step: 0.01 },
+  specularIntensity: { min: 0, max: 1, step: 0.01 },
+  emissiveIntensity: { min: 0, max: 1, step: 0.01 },
+  envMapIntensity: { min: 0, max: 1, step: 0.01 },
+  sheen: { min: 0, max: 1, step: 0.01 },
+  clearcoat: { min: 0, max: 1, step: 0.01 },
+  clearcoatRoughness: { min: 0, max: 1, step: 0.01 }
+};
+var CharacterFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({ title: "characterMaterial", expanded: expand });
+    this.folder.addBinding(characterValues, "transmission", characterOptions.transmission);
+    this.folder.addBinding(characterValues, "metalness", characterOptions.metalness);
+    this.folder.addBinding(characterValues, "roughness", characterOptions.roughness);
+    this.folder.addBinding(characterValues, "ior", characterOptions.ior);
+    this.folder.addBinding(characterValues, "thickness", characterOptions.thickness);
+    this.folder.addBinding(characterValues, "specularColor", {
+      color: { type: "float" }
+    });
+    this.folder.addBinding(
+      characterValues,
+      "specularIntensity",
+      characterOptions.specularIntensity
+    );
+    this.folder.addBinding(characterValues, "emissive", {
+      color: { type: "float" }
+    });
+    this.folder.addBinding(
+      characterValues,
+      "emissiveIntensity",
+      characterOptions.emissiveIntensity
+    );
+    this.folder.addBinding(characterValues, "envMapIntensity", characterOptions.envMapIntensity);
+    this.folder.addBinding(characterValues, "sheenColor", {
+      color: { type: "float" }
+    });
+    this.folder.addBinding(characterValues, "sheen", characterOptions.sheen);
+    this.folder.addBinding(characterValues, "clearcoat", characterOptions.clearcoat);
+    this.folder.addBinding(
+      characterValues,
+      "clearcoatRoughness",
+      characterOptions.clearcoatRoughness
+    );
+  }
+  setupChangeEvent() {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "specularColor": {
+          const value = e.value;
+          characterValues.specularColor = {
+            r: value.r,
+            g: value.g,
+            b: value.b
+          };
+          break;
+        }
+        case "emissive": {
+          const value = e.value;
+          characterValues.emissive = {
+            r: value.r,
+            g: value.g,
+            b: value.b
+          };
+          break;
+        }
+        case "sheenColor": {
+          const value = e.value;
+          characterValues.sheenColor = {
+            r: value.r,
+            g: value.g,
+            b: value.b
+          };
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    });
   }
 };
 
@@ -311,35 +374,35 @@ var characterOptions = {
 var CharacterMaterial = class extends MeshPhysicalMaterial {
   constructor() {
     super();
-    __publicField(this, "uniforms", {});
-    __publicField(this, "colorsCube216", []);
+    this.uniforms = {};
+    this.colorsCube216 = [];
     this.color = new Color(16777215);
-    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.transmission = characterValues.transmission;
+    this.metalness = characterValues.metalness;
+    this.roughness = characterValues.roughness;
+    this.ior = characterValues.ior;
+    this.thickness = characterValues.thickness;
     this.specularColor = new Color().setRGB(
-      characterValues.material.specularColor.r,
-      characterValues.material.specularColor.g,
-      characterValues.material.specularColor.b
+      characterValues.specularColor.r,
+      characterValues.specularColor.g,
+      characterValues.specularColor.b
     );
-    this.specularIntensity = characterValues.material.specularIntensity;
+    this.specularIntensity = characterValues.specularIntensity;
     this.emissive = new Color().setRGB(
-      characterValues.material.emissive.r,
-      characterValues.material.emissive.g,
-      characterValues.material.emissive.b
+      characterValues.emissive.r,
+      characterValues.emissive.g,
+      characterValues.emissive.b
     );
-    this.emissiveIntensity = characterValues.material.emissiveIntensity;
-    this.envMapIntensity = characterValues.material.envMapIntensity;
+    this.emissiveIntensity = characterValues.emissiveIntensity;
+    this.envMapIntensity = characterValues.envMapIntensity;
     this.sheenColor = new Color().setRGB(
-      characterValues.material.sheenColor.r,
-      characterValues.material.sheenColor.g,
-      characterValues.material.sheenColor.b
+      characterValues.sheenColor.r,
+      characterValues.sheenColor.g,
+      characterValues.sheenColor.b
     );
-    this.sheen = characterValues.material.sheen;
-    this.clearcoat = characterValues.material.clearcoat;
-    this.clearcoatRoughness = characterValues.material.clearcoatRoughness;
+    this.sheen = characterValues.sheen;
+    this.clearcoat = characterValues.clearcoat;
+    this.clearcoatRoughness = characterValues.clearcoatRoughness;
     this.onBeforeCompile = (shader) => {
       this.uniforms = UniformsUtils.clone(shader.uniforms);
       this.uniforms.nearClip = { value: 0.01 };
@@ -439,32 +502,32 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
     }
   }
   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.transmission = characterValues.transmission;
+    this.metalness = characterValues.metalness;
+    this.roughness = characterValues.roughness;
+    this.ior = characterValues.ior;
+    this.thickness = characterValues.thickness;
     this.specularColor = new Color().setRGB(
-      characterValues.material.specularColor.r,
-      characterValues.material.specularColor.g,
-      characterValues.material.specularColor.b
+      characterValues.specularColor.r,
+      characterValues.specularColor.g,
+      characterValues.specularColor.b
     );
-    this.specularIntensity = characterValues.material.specularIntensity;
+    this.specularIntensity = characterValues.specularIntensity;
     this.emissive = new Color().setRGB(
-      characterValues.material.emissive.r,
-      characterValues.material.emissive.g,
-      characterValues.material.emissive.b
+      characterValues.emissive.r,
+      characterValues.emissive.g,
+      characterValues.emissive.b
     );
-    this.emissiveIntensity = characterValues.material.emissiveIntensity;
-    this.envMapIntensity = characterValues.material.envMapIntensity;
+    this.emissiveIntensity = characterValues.emissiveIntensity;
+    this.envMapIntensity = characterValues.envMapIntensity;
     this.sheenColor = new Color().setRGB(
-      characterValues.material.sheenColor.r,
-      characterValues.material.sheenColor.g,
-      characterValues.material.sheenColor.b
+      characterValues.sheenColor.r,
+      characterValues.sheenColor.g,
+      characterValues.sheenColor.b
     );
-    this.sheen = characterValues.material.sheen;
-    this.clearcoat = characterValues.material.clearcoat;
-    this.clearcoatRoughness = characterValues.material.clearcoatRoughness;
+    this.sheen = characterValues.sheen;
+    this.clearcoat = characterValues.clearcoat;
+    this.clearcoatRoughness = characterValues.clearcoatRoughness;
   }
 };
 
@@ -485,7 +548,6 @@ import { GLTFLoader as ThreeGLTFLoader } from "three/examples/jsm/loaders/GLTFLo
 var CachedGLTFLoader = class extends ThreeGLTFLoader {
   constructor(manager) {
     super(manager);
-    __publicField(this, "blobCache");
     this.blobCache = /* @__PURE__ */ new Map();
   }
   setBlobUrl(originalUrl, blobUrl) {
@@ -506,8 +568,6 @@ var CachedGLTFLoader = class extends ThreeGLTFLoader {
 };
 var LRUCache = class {
   constructor(maxSize = 100) {
-    __publicField(this, "maxSize");
-    __publicField(this, "cache");
     this.maxSize = maxSize;
     this.cache = /* @__PURE__ */ new Map();
   }
@@ -527,12 +587,9 @@ var LRUCache = class {
     this.cache.set(key, value);
   }
 };
-var _ModelLoader = class {
+var _ModelLoader = class _ModelLoader {
   constructor(maxCacheSize = 100) {
-    __publicField(this, "loadingManager");
-    __publicField(this, "gltfLoader");
-    __publicField(this, "modelCache");
-    __publicField(this, "ongoingLoads", /* @__PURE__ */ new Map());
+    this.ongoingLoads = /* @__PURE__ */ new Map();
     this.loadingManager = new LoadingManager();
     this.gltfLoader = new CachedGLTFLoader(this.loadingManager);
     this.modelCache = new LRUCache(maxCacheSize);
@@ -594,8 +651,8 @@ var _ModelLoader = class {
     }
   }
 };
+_ModelLoader.instance = null;
 var ModelLoader = _ModelLoader;
-__publicField(ModelLoader, "instance", null);
 var MODEL_LOADER = ModelLoader.getInstance();
 var ModelLoader_default = MODEL_LOADER;
 
@@ -604,12 +661,12 @@ var CharacterModel = class {
   constructor(characterDescription) {
     this.characterDescription = characterDescription;
     /* TODO: pick between below eager instantiation or ModelLoader.getInstance() lazy one */
-    __publicField(this, "modelLoader", ModelLoader_default);
-    __publicField(this, "mesh", null);
-    __publicField(this, "material", new CharacterMaterial());
-    __publicField(this, "animations", {});
-    __publicField(this, "animationMixer", null);
-    __publicField(this, "currentAnimation", 0 /* idle */);
+    this.modelLoader = ModelLoader_default;
+    this.mesh = null;
+    this.material = new CharacterMaterial();
+    this.animations = {};
+    this.animationMixer = null;
+    this.currentAnimation = 0 /* idle */;
   }
   async init() {
     await this.loadMainMesh();
@@ -632,10 +689,11 @@ var CharacterModel = class {
     this.applyMaterialToAllSkinnedMeshes(this.material);
   }
   updateAnimation(targetAnimation, deltaTime) {
+    var _a;
     if (this.currentAnimation !== targetAnimation) {
       this.transitionToAnimation(targetAnimation);
     }
-    this.animationMixer?.update(deltaTime);
+    (_a = this.animationMixer) == null ? void 0 : _a.update(deltaTime);
   }
   hideMaterialByMeshName(meshName) {
     if (!this.mesh)
@@ -735,7 +793,7 @@ import {
 } from "three";
 
 // src/character/CanvasText.ts
-import * as THREE from "three";
+import { Texture, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
 function getTextAlignOffset(textAlign, width) {
   switch (textAlign) {
     case "center":
@@ -836,10 +894,10 @@ function CanvasText(message, options) {
 }
 function THREECanvasTextTexture(text, options) {
   const canvas = CanvasText(text, options);
-  const texture = new THREE.Texture(canvas);
-  texture.minFilter = THREE.LinearFilter;
-  texture.magFilter = THREE.LinearFilter;
-  texture.format = THREE.RGBAFormat;
+  const texture = new Texture(canvas);
+  texture.minFilter = LinearFilter;
+  texture.magFilter = LinearFilter;
+  texture.format = RGBAFormat;
   texture.needsUpdate = true;
   return { texture, width: canvas.width, height: canvas.height };
 }
@@ -856,14 +914,11 @@ var defaultLabelHeight = 0.125;
 var defaultLabelCastShadows = true;
 var CharacterTooltip = class {
   constructor(parentModel) {
-    __publicField(this, "geometry");
-    __publicField(this, "material");
-    __publicField(this, "mesh");
-    __publicField(this, "visibleOpacity", 0.85);
-    __publicField(this, "targetOpacity", 0);
-    __publicField(this, "fadingSpeed", 0.02);
-    __publicField(this, "secondsToFadeOut", 15);
-    __publicField(this, "props", {
+    this.visibleOpacity = 0.85;
+    this.targetOpacity = 0;
+    this.fadingSpeed = 0.02;
+    this.secondsToFadeOut = 15;
+    this.props = {
       content: "",
       alignment: defaultLabelAlignment,
       width: defaultLabelWidth,
@@ -873,7 +928,7 @@ var CharacterTooltip = class {
       color: defaultLabelColor,
       fontColor: defaultFontColor,
       castShadows: defaultLabelCastShadows
-    });
+    };
     this.setText = this.setText.bind(this);
     this.material = new MeshBasicMaterial2({
       map: null,
@@ -965,7 +1020,7 @@ var CharacterTooltip = class {
 };
 
 // src/character/LocalController.ts
-import { Box3, Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
+import { Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
 var LocalController = class {
   constructor(model, id, collisionsManager, keyInputManager, cameraManager, timeManager) {
     this.model = model;
@@ -974,45 +1029,35 @@ var LocalController = class {
     this.keyInputManager = keyInputManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
-    __publicField(this, "collisionDetectionSteps", 15);
-    __publicField(this, "capsuleInfo", {
+    this.collisionDetectionSteps = 15;
+    this.capsuleInfo = {
       radius: 0.4,
       segment: new Line3(new Vector33(), new Vector33(0, 1.05, 0))
-    });
-    __publicField(this, "maxWalkSpeed", 6);
-    __publicField(this, "maxRunSpeed", 8.5);
-    __publicField(this, "gravity", -42);
-    __publicField(this, "jumpForce", 16);
-    __publicField(this, "coyoteTimeThreshold", 70);
-    __publicField(this, "coyoteTime", false);
-    __publicField(this, "canJump", true);
-    __publicField(this, "characterOnGround", false);
-    __publicField(this, "characterWasOnGround", false);
-    __publicField(this, "characterAirborneSince", 0);
-    __publicField(this, "currentHeight", 0);
-    __publicField(this, "characterVelocity", new Vector33());
-    __publicField(this, "vectorUp", new Vector33(0, 1, 0));
-    __publicField(this, "vectorDown", new Vector33(0, -1, 0));
-    __publicField(this, "rotationOffset", 0);
-    __publicField(this, "azimuthalAngle", 0);
-    __publicField(this, "tempBox", new Box3());
-    __publicField(this, "tempMatrix", new Matrix4());
-    __publicField(this, "tempSegment", new Line3());
-    __publicField(this, "tempVector", new Vector33());
-    __publicField(this, "tempVector2", new Vector33());
-    __publicField(this, "rayCaster", new Raycaster2());
-    __publicField(this, "forward");
-    __publicField(this, "backward");
-    __publicField(this, "left");
-    __publicField(this, "right");
-    __publicField(this, "run");
-    __publicField(this, "jump");
-    __publicField(this, "anyDirection");
-    __publicField(this, "conflictingDirections");
-    __publicField(this, "thirdPersonCamera", null);
-    __publicField(this, "speed", 0);
-    __publicField(this, "targetSpeed", 0);
-    __publicField(this, "networkState");
+    };
+    this.maxWalkSpeed = 6;
+    this.maxRunSpeed = 8.5;
+    this.gravity = -42;
+    this.jumpForce = 16;
+    this.coyoteTimeThreshold = 70;
+    this.coyoteTime = false;
+    this.canJump = true;
+    this.characterOnGround = false;
+    this.characterWasOnGround = false;
+    this.characterAirborneSince = 0;
+    this.currentHeight = 0;
+    this.characterVelocity = new Vector33();
+    this.vectorUp = new Vector33(0, 1, 0);
+    this.vectorDown = new Vector33(0, -1, 0);
+    this.rotationOffset = 0;
+    this.azimuthalAngle = 0;
+    this.tempMatrix = new Matrix4();
+    this.tempSegment = new Line3();
+    this.tempVector = new Vector33();
+    this.tempVector2 = new Vector33();
+    this.rayCaster = new Raycaster2();
+    this.thirdPersonCamera = null;
+    this.speed = 0;
+    this.targetSpeed = 0;
     this.networkState = {
       id: this.id,
       position: { x: 0, y: 0, z: 0 },
@@ -1021,7 +1066,8 @@ var LocalController = class {
     };
   }
   update() {
-    if (!this.model?.mesh || !this.model?.animationMixer)
+    var _a, _b;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh) || !((_b = this.model) == null ? void 0 : _b.animationMixer))
       return;
     if (!this.thirdPersonCamera)
       this.thirdPersonCamera = this.cameraManager.camera;
@@ -1089,7 +1135,8 @@ var LocalController = class {
     }
   }
   updateAzimuthalAngle() {
-    if (!this.thirdPersonCamera || !this.model?.mesh)
+    var _a;
+    if (!this.thirdPersonCamera || !((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     const camToModelDistance = this.thirdPersonCamera.position.distanceTo(this.model.mesh.position);
     const isCameraFirstPerson = camToModelDistance < 2;
@@ -1104,12 +1151,14 @@ var LocalController = class {
     }
   }
   computeAngularDifference(rotationQuaternion) {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return 0;
     return 2 * Math.acos(Math.abs(this.model.mesh.quaternion.dot(rotationQuaternion)));
   }
   updateRotation() {
-    if (!this.thirdPersonCamera || !this.model?.mesh)
+    var _a;
+    if (!this.thirdPersonCamera || !((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     this.updateRotationOffset();
     this.updateAzimuthalAngle();
@@ -1122,12 +1171,14 @@ var LocalController = class {
     this.model.mesh.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
   addScaledVectorToCharacter(deltaTime) {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     this.model.mesh.position.addScaledVector(this.tempVector, this.speed * deltaTime);
   }
   updatePosition(deltaTime, _iter) {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     if (this.characterOnGround) {
       if (!this.jump)
@@ -1169,15 +1220,10 @@ var LocalController = class {
       this.addScaledVectorToCharacter(deltaTime);
     }
     this.model.mesh.updateMatrixWorld();
-    this.tempBox.makeEmpty();
     this.tempSegment.copy(this.capsuleInfo.segment);
     this.tempSegment.start.applyMatrix4(this.model.mesh.matrixWorld).applyMatrix4(this.tempMatrix);
     this.tempSegment.end.applyMatrix4(this.model.mesh.matrixWorld).applyMatrix4(this.tempMatrix);
-    this.tempBox.expandByPoint(this.tempSegment.start);
-    this.tempBox.expandByPoint(this.tempSegment.end);
-    this.tempBox.min.subScalar(this.capsuleInfo.radius);
-    this.tempBox.max.addScalar(this.capsuleInfo.radius);
-    this.collisionsManager.applyColliders(this.tempSegment, this.capsuleInfo.radius, this.tempBox);
+    this.collisionsManager.applyColliders(this.tempSegment, this.capsuleInfo.radius);
     const newPosition = this.tempVector;
     newPosition.copy(this.tempSegment.start);
     const deltaVector = this.tempVector2;
@@ -1199,7 +1245,8 @@ var LocalController = class {
     }
   }
   updateNetworkState() {
-    if (!this.model?.mesh) {
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh)) {
       this.networkState = {
         id: this.id,
         position: new Vector33(),
@@ -1222,7 +1269,8 @@ var LocalController = class {
     }
   }
   resetPosition() {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     this.characterVelocity.y = 0;
     this.model.mesh.position.y = 3;
@@ -1241,12 +1289,12 @@ var Character = class {
     this.keyInputManager = keyInputManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
-    __publicField(this, "controller", null);
-    __publicField(this, "name", null);
-    __publicField(this, "model", null);
-    __publicField(this, "color", new Color3());
-    __publicField(this, "position", new Vector34());
-    __publicField(this, "tooltip", null);
+    this.controller = null;
+    this.name = null;
+    this.model = null;
+    this.color = new Color3();
+    this.position = new Vector34();
+    this.tooltip = null;
     this.load();
   }
   async load() {
@@ -1297,12 +1345,11 @@ var RemoteController = class {
   constructor(character, id) {
     this.character = character;
     this.id = id;
-    __publicField(this, "modelLoader", ModelLoader_default);
-    __publicField(this, "characterModel", null);
-    __publicField(this, "animationMixer", new AnimationMixer2(new Object3D4()));
-    __publicField(this, "animations", /* @__PURE__ */ new Map());
-    __publicField(this, "currentAnimation", 0 /* idle */);
-    __publicField(this, "networkState");
+    this.modelLoader = ModelLoader_default;
+    this.characterModel = null;
+    this.animationMixer = new AnimationMixer2(new Object3D4());
+    this.animations = /* @__PURE__ */ new Map();
+    this.currentAnimation = 0 /* idle */;
     this.characterModel = this.character.model.mesh;
     this.characterModel.updateMatrixWorld();
     this.animationMixer = new AnimationMixer2(this.characterModel);
@@ -1386,15 +1433,14 @@ var CharacterManager = class {
       character was standing on a model and the page is reloaded the character falls into the model before it loads and 
       can be trapped).
     */
-    __publicField(this, "updateLocationHash", false);
-    __publicField(this, "loadingCharacters", /* @__PURE__ */ new Map());
-    __publicField(this, "remoteCharacters", /* @__PURE__ */ new Map());
-    __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.updateLocationHash = false;
+    this.loadingCharacters = /* @__PURE__ */ new Map();
+    this.remoteCharacters = /* @__PURE__ */ new Map();
+    this.remoteCharacterControllers = /* @__PURE__ */ new Map();
+    this.characterDescription = null;
+    this.character = null;
+    this.cameraOffsetTarget = 0;
+    this.cameraOffset = 0;
     this.group = new Group();
   }
   /* TODO: 
@@ -1411,6 +1457,7 @@ var CharacterManager = class {
         id,
         isLocal,
         () => {
+          var _a, _b, _c, _d, _e, _f, _g;
           if (window.location.hash && window.location.hash.length > 1) {
             decodeCharacterAndCamera(
               window.location.hash.substring(1),
@@ -1434,14 +1481,14 @@ var CharacterManager = class {
           }
           character.model.hideMaterialByMeshName("SK_Mannequin_2");
           if (!isLocal) {
-            character.model?.mesh?.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
-            character.model?.mesh?.updateMatrixWorld();
+            (_b = (_a = character.model) == null ? void 0 : _a.mesh) == null ? void 0 : _b.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+            (_d = (_c = character.model) == null ? void 0 : _c.mesh) == null ? void 0 : _d.updateMatrixWorld();
             character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
           }
           this.group.add(character.model.mesh);
           if (isLocal) {
             this.character = character;
-            this.character.tooltip?.setText(`${id}`);
+            (_e = this.character.tooltip) == null ? void 0 : _e.setText(`${id}`);
           } else {
             this.remoteCharacters.set(id, character);
             const remoteController = new RemoteController(character, id);
@@ -1461,13 +1508,13 @@ var CharacterManager = class {
               4 /* air */,
               characterDescription.airAnimationFileUrl
             );
-            remoteController.characterModel?.position.set(
+            (_f = remoteController.characterModel) == null ? void 0 : _f.position.set(
               spawnPosition.x,
               spawnPosition.y,
               spawnPosition.z
             );
             this.remoteCharacterControllers.set(id, remoteController);
-            character.tooltip?.setText(`${id}`);
+            (_g = character.tooltip) == null ? void 0 : _g.setText(`${id}`);
           }
           resolve(character);
         },
@@ -1505,9 +1552,10 @@ var CharacterManager = class {
     this.loadingCharacters.clear();
   }
   update() {
+    var _a;
     if (this.character) {
       this.character.update(this.timeManager.time);
-      if (this.character.model?.mesh) {
+      if ((_a = this.character.model) == null ? void 0 : _a.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);
@@ -1557,7 +1605,7 @@ var CharacterManager = class {
 // src/input/KeyInputManager.ts
 var KeyInputManager = class {
   constructor() {
-    __publicField(this, "keys", /* @__PURE__ */ new Map());
+    this.keys = /* @__PURE__ */ new Map();
     document.addEventListener("keydown", this.onKeyDown.bind(this));
     document.addEventListener("keyup", this.onKeyUp.bind(this));
     window.addEventListener("blur", this.handleUnfocus.bind(this));
@@ -1625,12 +1673,7 @@ var MMLCompositionScene = class {
     this.audioListener = audioListener;
     this.collisionsManager = collisionsManager;
     this.getUserPositionAndRotation = getUserPositionAndRotation;
-    __publicField(this, "group");
-    __publicField(this, "debug", false);
-    __publicField(this, "mmlScene");
-    __publicField(this, "promptManager");
-    __publicField(this, "interactionListener");
-    __publicField(this, "clickTrigger");
+    this.debug = false;
     this.group = new Group2();
     this.promptManager = PromptManager.init(document.body);
     const { interactionListener } = InteractionManager.init(document.body, this.camera, this.scene);
@@ -1679,22 +1722,23 @@ var MMLCompositionScene = class {
 };
 
 // src/rendering/composer.ts
+import { N8AOPostPass } from "n8ao";
 import {
   EffectComposer as EffectComposer2,
   RenderPass,
   EffectPass as EffectPass2,
   FXAAEffect,
   ShaderPass,
-  BloomEffect as BloomEffect2,
+  BloomEffect,
   SSAOEffect as SSAOEffect2,
-  BlendFunction as BlendFunction3,
+  BlendFunction as BlendFunction2,
   TextureEffect,
-  ToneMappingEffect as ToneMappingEffect2,
+  ToneMappingEffect,
   SMAAEffect,
   SMAAPreset,
   EdgeDetectionMode,
   PredicationMode,
-  NormalPass
+  NormalPass as NormalPass2
 } from "postprocessing";
 import {
   AmbientLight,
@@ -1705,21 +1749,21 @@ import {
   LoadingManager as LoadingManager2,
   PMREMGenerator,
   Vector2 as Vector22,
-  WebGLRenderer as WebGLRenderer3
+  WebGLRenderer as WebGLRenderer2
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
 // src/sun/Sun.ts
 import { CameraHelper, Color as Color4, DirectionalLight, Group as Group3, OrthographicCamera, Vector3 as Vector37 } from "three";
 
-// src/tweakpane/sunSettings.ts
+// src/tweakpane/blades/environmentFolder.ts
 var sunValues = {
   sunPosition: {
     sunAzimuthalAngle: 39,
     sunPolarAngle: 50
   },
   sunIntensity: 0.5,
-  sunColor: { r: 1, g: 1, b: 1 }
+  sunColor: { r: 1, g: 0.74, b: 0.5 }
 };
 var sunOptions = {
   sunPosition: {
@@ -1728,23 +1772,159 @@ var sunOptions = {
   },
   sunIntensity: { min: 0, max: 1, step: 0.05 }
 };
+var envValues = {
+  ambientLight: {
+    ambientLightIntensity: 0,
+    ambientLightColor: { r: 1, g: 1, b: 1 }
+  },
+  fog: {
+    fogNear: 30,
+    fogFar: 210,
+    fogColor: { r: 0.42, g: 0.48, b: 0.59 }
+  }
+};
+var envOptions = {
+  ambientLight: {
+    ambientLightIntensity: { min: 0, max: 1, step: 0.01 }
+  },
+  fog: {
+    fogNear: { min: 0, max: 80, step: 1 },
+    fogFar: { min: 81, max: 300, step: 1 }
+  }
+};
+var EnvironmentFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({ title: "environment", expanded: expand });
+    this.sun = this.folder.addFolder({ title: "sun", expanded: true });
+    this.ambient = this.folder.addFolder({ title: "ambient", expanded: true });
+    this.sun.addBinding(
+      sunValues.sunPosition,
+      "sunAzimuthalAngle",
+      sunOptions.sunPosition.sunAzimuthalAngle
+    );
+    this.sun.addBinding(
+      sunValues.sunPosition,
+      "sunPolarAngle",
+      sunOptions.sunPosition.sunPolarAngle
+    );
+    this.sun.addBinding(sunValues, "sunIntensity", sunOptions.sunIntensity);
+    this.sun.addBinding(sunValues, "sunColor", {
+      color: { type: "float" }
+    });
+    this.sunButton = this.sun.addButton({ title: "Set HDRI" });
+    this.ambient.addBinding(
+      envValues.ambientLight,
+      "ambientLightIntensity",
+      envOptions.ambientLight.ambientLightIntensity
+    );
+    this.ambient.addBinding(envValues.ambientLight, "ambientLightColor", {
+      color: { type: "float" }
+    });
+    this.ambient.addBinding(envValues.fog, "fogNear", envOptions.fog.fogNear);
+    this.ambient.addBinding(envValues.fog, "fogFar", envOptions.fog.fogFar);
+    this.ambient.addBinding(envValues.fog, "fogColor", {
+      color: { type: "float" }
+    });
+  }
+  setupChangeEvent(setHDR, setAmbientLight, setFog, sun) {
+    this.sun.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "sunAzimuthalAngle": {
+          const value = e.value;
+          sun == null ? void 0 : sun.setAzimuthalAngle(value * (Math.PI / 180));
+          break;
+        }
+        case "sunPolarAngle": {
+          const value = e.value;
+          sun == null ? void 0 : sun.setPolarAngle(value * (Math.PI / 180));
+          break;
+        }
+        case "sunIntensity": {
+          const value = e.value;
+          sun == null ? void 0 : sun.setIntensity(value);
+          break;
+        }
+        case "sunColor": {
+          const value = e.value;
+          sunValues.sunColor = {
+            r: value.r,
+            g: value.g,
+            b: value.b
+          };
+          sun == null ? void 0 : sun.setColor();
+          break;
+        }
+        default:
+          break;
+      }
+    });
+    this.sunButton.on("click", () => {
+      setHDR();
+    });
+    this.ambient.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "ambientLightIntensity": {
+          envValues.ambientLight.ambientLightIntensity = e.value;
+          setAmbientLight();
+          break;
+        }
+        case "ambientLightColor": {
+          const value = e.value;
+          envValues.ambientLight.ambientLightColor = {
+            r: value.r,
+            g: value.g,
+            b: value.b
+          };
+          setAmbientLight();
+          break;
+        }
+        case "fogNear": {
+          envValues.fog.fogNear = e.value;
+          setFog();
+          break;
+        }
+        case "fogFar": {
+          envValues.fog.fogFar = e.value;
+          setFog();
+          break;
+        }
+        case "fogColor": {
+          const value = e.value;
+          envValues.fog.fogColor = {
+            r: value.r,
+            g: value.g,
+            b: value.b
+          };
+          setFog();
+          break;
+        }
+        default:
+          break;
+      }
+    });
+  }
+};
 
 // src/sun/Sun.ts
 var Sun = class extends Group3 {
   constructor() {
     super();
-    __publicField(this, "debug", false);
-    __publicField(this, "sunOffset", new Vector37(
+    this.debug = false;
+    this.sunOffset = new Vector37(
       39 * (Math.PI / 180),
       50 * (Math.PI / 180),
       100
-    ));
-    __publicField(this, "shadowResolution", 8192);
-    __publicField(this, "shadowCamFrustum", 50);
-    __publicField(this, "camHelper", null);
-    __publicField(this, "shadowCamera");
-    __publicField(this, "directionalLight");
-    __publicField(this, "target", null);
+    );
+    this.shadowResolution = 8192;
+    this.shadowCamFrustum = 50;
+    this.camHelper = null;
+    this.target = null;
     this.shadowCamera = new OrthographicCamera(
       -this.shadowCamFrustum,
       this.shadowCamFrustum,
@@ -1762,6 +1942,7 @@ var Sun = class extends Group3 {
     this.directionalLight.shadow.camera = this.shadowCamera;
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
     this.directionalLight.castShadow = true;
+    this.setColor();
     this.updateCharacterPosition(new Vector37(0, 0, 0));
     this.add(this.directionalLight);
     if (this.debug === true && this.camHelper instanceof CameraHelper) {
@@ -1812,80 +1993,13 @@ var Sun = class extends Group3 {
   }
 };
 
-// src/tweakpane/composerSettings.ts
-import { BlendFunction } from "postprocessing";
-var composerValues = {
-  renderer: {
-    shadowMap: 2,
-    toneMapping: 5,
-    exposure: 1,
-    bgIntensity: 0.5,
-    bgBlurriness: 0
-  },
-  ssao: {
-    blendFunction: BlendFunction.MULTIPLY,
-    distanceScaling: true,
-    depthAwareUpsampling: true,
-    samples: 17,
-    rings: 7,
-    luminanceInfluence: 0.7,
-    radius: 0.03,
-    intensity: 2.5,
-    bias: 0.05,
-    fade: 0.03,
-    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
-  },
-  brightness: -0.03,
-  contrast: 1.21,
-  saturation: 0.91,
-  grain: 0.061,
-  bloom: 0.25
+// src/tweakpane/blades/bcsFolder.ts
+var bcsValues = {
+  brightness: 0,
+  contrast: 1.25,
+  saturation: 1
 };
-var composerOptions = {
-  renderer: {
-    shadowMap: { min: 0, max: 2, step: 1 },
-    toneMapping: { min: 0, max: 5, step: 1 },
-    exposure: { min: 0, max: 3, step: 0.01 },
-    bgIntensity: { min: 0, max: 1.3, step: 0.01 },
-    bgBlurriness: { min: 0, max: 0.1, step: 1e-3 }
-  },
-  ssao: {
-    samples: { min: 1, max: 50, step: 1 },
-    rings: { min: 1, max: 50, step: 1 },
-    luminanceInfluence: { min: 0, max: 1, step: 0.01 },
-    radius: { min: 0, max: 0.1, step: 1e-3 },
-    intensity: { min: 0, max: 5, step: 0.1 },
-    bias: { min: 0, max: 0.1, step: 1e-3 },
-    fade: { min: 0, max: 0.1, step: 1e-3 },
-    resolutionScale: { min: 0.25, max: 2, step: 0.25 },
-    worldDistanceThreshold: { min: 0, max: 200, step: 1 },
-    worldDistanceFalloff: { min: 0, max: 200, step: 1 },
-    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 }
-  },
+var bcsOptions = {
   brightness: {
     amount: { min: -1, max: 1, step: 0.01 }
   },
@@ -1894,7 +2008,44 @@ var composerOptions = {
   },
   saturation: {
     amount: { min: 0, max: 2, step: 0.01 }
-  },
+  }
+};
+var BrightnessContrastSaturationFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({
+      title: "brightness / contrast / sat",
+      expanded: expand
+    });
+    this.folder.addBinding(bcsValues, "brightness", bcsOptions.brightness.amount);
+    this.folder.addBinding(bcsValues, "contrast", bcsOptions.contrast.amount);
+    this.folder.addBinding(bcsValues, "saturation", bcsOptions.saturation.amount);
+  }
+  setupChangeEvent(brightnessContrastSaturation) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "brightness":
+          brightnessContrastSaturation.uniforms.brightness.value = e.value;
+          break;
+        case "contrast":
+          brightnessContrastSaturation.uniforms.contrast.value = e.value;
+          break;
+        case "saturation":
+          brightnessContrastSaturation.uniforms.saturation.value = e.value;
+          break;
+      }
+    });
+  }
+};
+
+// src/tweakpane/blades/postExtrasFolder.ts
+var extrasValues = {
+  grain: 0.055,
+  bloom: 0.25
+};
+var extrasOptions = {
   grain: {
     amount: { min: 0, max: 0.2, step: 2e-3 }
   },
@@ -1902,12 +2053,52 @@ var composerOptions = {
     amount: { min: 0, max: 2, step: 0.05 }
   }
 };
+var PostExtrasFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({ title: "bloom / grain", expanded: expand });
+    this.folder.addBinding(extrasValues, "bloom", extrasOptions.bloom.amount);
+    this.folder.addBinding(extrasValues, "grain", extrasOptions.grain.amount);
+  }
+  setupChangeEvent(bloomEffect, gaussGrainEffect) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "bloom":
+          bloomEffect.intensity = e.value;
+          break;
+        case "grain":
+          gaussGrainEffect.uniforms.amount.value = e.value;
+          break;
+        default:
+          break;
+      }
+    });
+  }
+};
+
+// src/tweakpane/blades/rendererFolder.ts
+var rendererValues = {
+  shadowMap: 2,
+  toneMapping: 5,
+  exposure: 1,
+  bgIntensity: 0.45,
+  bgBlurriness: 0
+};
+var rendererOptions = {
+  shadowMap: { min: 0, max: 2, step: 1 },
+  toneMapping: { min: 0, max: 5, step: 1 },
+  exposure: { min: 0, max: 3, step: 0.01 },
+  bgIntensity: { min: 0, max: 1.3, step: 0.01 },
+  bgBlurriness: { min: 0, max: 0.1, step: 1e-3 }
+};
 var shadowMapTypes = {
   0: "BasicShadowMap",
   1: "PCFShadowMap",
   2: "PCFSoftShadowMap"
 };
-var rendererToneMappingTypes = {
+var toneMappingTypes = {
   0: "NoToneMapping",
   1: "LinearToneMapping",
   2: "ReinhardToneMapping",
@@ -1915,28 +2106,120 @@ 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]
+var monitoredValues = {
+  shadowMapType: shadowMapTypes[rendererValues.shadowMap],
+  toneMappingType: toneMappingTypes[rendererValues.toneMapping]
 };
 var setShadowMapType = (value) => {
-  rendererBlades.shadowMapType = shadowMapTypes[value];
+  monitoredValues.shadowMapType = shadowMapTypes[value];
 };
 var setToneMappingType = (value) => {
-  rendererBlades.toneMappingType = rendererToneMappingTypes[value];
+  monitoredValues.toneMappingType = toneMappingTypes[value];
 };
-var customToneMappingBlade = {
-  customToneMappingType: customToneMappingTypes[composerValues.toneMapping.mode]
+var RendererFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({
+      title: "rendererOptions",
+      expanded: expand
+    });
+    this.folder.addBinding(rendererValues, "shadowMap", rendererOptions.shadowMap);
+    this.folder.addBinding(monitoredValues, "shadowMapType", { readonly: true });
+    this.folder.addBinding(rendererValues, "toneMapping", rendererOptions.toneMapping);
+    this.folder.addBinding(monitoredValues, "toneMappingType", { readonly: true });
+    this.folder.addBinding(rendererValues, "exposure", rendererOptions.exposure);
+    this.folder.addBinding(rendererValues, "bgIntensity", rendererOptions.bgIntensity);
+    this.folder.addBinding(rendererValues, "bgBlurriness", rendererOptions.bgBlurriness);
+  }
+  setupChangeEvent(scene, renderer, toneMappingFolder, toneMappingPass) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "shadowMap": {
+          const value = e.value;
+          renderer.shadowMap.type = value;
+          setShadowMapType(value);
+          break;
+        }
+        case "toneMapping":
+          renderer.toneMapping = e.value;
+          toneMappingFolder.hidden = e.value !== 5;
+          toneMappingPass.enabled = e.value === 5 ? true : false;
+          setToneMappingType(e.value);
+          break;
+        case "exposure":
+          renderer.toneMappingExposure = e.value;
+          break;
+        case "bgIntensity":
+          scene.backgroundIntensity = e.value;
+          break;
+        case "bgBlurriness":
+          scene.backgroundBlurriness = e.value;
+          break;
+        default:
+          break;
+      }
+    });
+  }
 };
-var setCustomToneMappingType = (value) => {
-  customToneMappingBlade.customToneMappingType = customToneMappingTypes[value];
+
+// src/tweakpane/blades/ssaoFolder.ts
+import { BlendFunction } from "postprocessing";
+import { Color as Color5 } from "three";
+var ppssaoValues = {
+  enabled: false,
+  blendFunction: BlendFunction.MULTIPLY,
+  distanceScaling: true,
+  depthAwareUpsampling: true,
+  samples: 30,
+  rings: 11,
+  luminanceInfluence: 0.7,
+  radius: 0.03,
+  intensity: 2.5,
+  bias: 0.05,
+  fade: 0.03,
+  resolutionScale: 0.5,
+  color: { r: 0, g: 0, b: 0 },
+  worldDistanceThreshold: 30,
+  worldDistanceFalloff: 7,
+  worldProximityThreshold: 0.5,
+  worldProximityFalloff: 0.3
+};
+var ppssaoOptions = {
+  samples: { min: 1, max: 50, step: 1 },
+  rings: { min: 1, max: 50, step: 1 },
+  luminanceInfluence: { min: 0, max: 1, step: 0.01 },
+  radius: { min: 0, max: 0.1, step: 1e-3 },
+  intensity: { min: 0, max: 5, step: 0.1 },
+  bias: { min: 0, max: 0.1, step: 1e-3 },
+  fade: { min: 0, max: 0.1, step: 1e-3 },
+  resolutionScale: { min: 0.25, max: 2, step: 0.25 },
+  worldDistanceThreshold: { min: 0, max: 200, step: 1 },
+  worldDistanceFalloff: { min: 0, max: 200, step: 1 },
+  worldProximityThreshold: { min: 0, max: 2, step: 0.01 },
+  worldProximityFalloff: { min: 0, max: 2, step: 0.01 }
+};
+var n8ssaoValues = {
+  enabled: true,
+  halfRes: false,
+  aoRadius: 5,
+  distanceFalloff: 3,
+  intensity: 1,
+  color: { r: 0, g: 0, b: 0 },
+  aoSamples: 16,
+  denoiseSamples: 4,
+  denoiseRadius: 12,
+  viewMode: "Combined"
+};
+var n8ssaoOptions = {
+  radius: { min: 0.1, max: 6, step: 0.1 },
+  distanceFalloff: { min: 1, max: 6, step: 0.1 },
+  intensity: { min: 0.1, max: 5, step: 0.1 },
+  aoSamples: [2, 4, 8, 16, 32, 64],
+  denoiseSamples: [2, 4, 8, 16, 32, 64],
+  denoiseRadius: [3, 6, 12],
+  viewMode: ["Combined", "AO", "Split", "No AO"]
 };
 var ssaoMaterialParams = [
   "fade",
@@ -1947,72 +2230,336 @@ var ssaoMaterialParams = [
   "worldProximityThreshold",
   "worldProximityFalloff"
 ];
-var statsData = {
-  triangles: "0",
-  geometries: "0",
-  textures: "0",
-  shaders: "0",
-  postPasses: "0",
-  drawCalls: "0",
-  rawDeltaTime: "0",
-  deltaTime: "0",
-  FPS: "0"
+var SSAOFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.postProcessingSSAOIndex = 1;
+    this.folder = parentFolder.addFolder({ title: "ambientOcclusion", expanded: expand });
+    this.n8ssao = this.folder.addFolder({
+      title: "N8 ambientOcclusion",
+      expanded: n8ssaoValues.enabled
+    });
+    this.ppssao = this.folder.addFolder({
+      title: "PP ambientOcclusion",
+      expanded: ppssaoValues.enabled
+    });
+    {
+      this.ppssao.addBinding({ enabled: ppssaoValues.enabled }, "enabled");
+      this.ppssao.addBinding({ showEffectOnly: false }, "showEffectOnly");
+      this.ppssao.addBinding(ppssaoValues, "samples", ppssaoOptions.samples);
+      this.ppssao.addBinding(ppssaoValues, "rings", ppssaoOptions.rings);
+      this.ppssao.addBinding(ppssaoValues, "luminanceInfluence", ppssaoOptions.luminanceInfluence);
+      this.ppssao.addBinding(ppssaoValues, "radius", ppssaoOptions.radius);
+      this.ppssao.addBinding(ppssaoValues, "intensity", ppssaoOptions.intensity);
+      this.ppssao.addBinding(ppssaoValues, "bias", ppssaoOptions.bias);
+      this.ppssao.addBinding(ppssaoValues, "fade", ppssaoOptions.fade);
+      this.ppssao.addBinding(ppssaoValues, "resolutionScale", ppssaoOptions.resolutionScale);
+      this.ppssao.addBinding(
+        ppssaoValues,
+        "worldDistanceThreshold",
+        ppssaoOptions.worldDistanceThreshold
+      );
+      this.ppssao.addBinding(
+        ppssaoValues,
+        "worldDistanceFalloff",
+        ppssaoOptions.worldDistanceFalloff
+      );
+      this.ppssao.addBinding(
+        ppssaoValues,
+        "worldProximityThreshold",
+        ppssaoOptions.worldProximityThreshold
+      );
+      this.ppssao.addBinding(
+        ppssaoValues,
+        "worldProximityFalloff",
+        ppssaoOptions.worldProximityFalloff
+      );
+      this.ppssao.addBinding(ppssaoValues, "color", { color: { alpha: false, type: "float" } });
+    }
+    {
+      this.n8ssao.addBinding({ enabled: n8ssaoValues.enabled }, "enabled");
+      this.n8ssao.addBinding({ halfRes: n8ssaoValues.halfRes }, "halfRes");
+      this.n8ssao.addBinding(n8ssaoValues, "aoRadius", n8ssaoOptions.radius);
+      this.n8ssao.addBinding(n8ssaoValues, "distanceFalloff", n8ssaoOptions.distanceFalloff);
+      this.n8ssao.addBinding(n8ssaoValues, "intensity", n8ssaoOptions.intensity);
+      this.n8ssao.addBinding(n8ssaoValues, "color", { color: { alpha: false, type: "float" } });
+      this.aoSamples = this.n8ssao.addBinding(n8ssaoValues, "aoSamples", {
+        view: "radiogrid",
+        groupName: "aoSamples",
+        size: [3, 2],
+        cells: (x, y) => ({
+          title: `${n8ssaoOptions.aoSamples[y * 3 + x]}`,
+          value: n8ssaoOptions.aoSamples[y * 3 + x]
+        }),
+        label: "aoSamples"
+      });
+      this.denoiseSamples = this.n8ssao.addBinding(n8ssaoValues, "denoiseSamples", {
+        view: "radiogrid",
+        groupName: "denoiseSamples",
+        size: [3, 2],
+        cells: (x, y) => ({
+          title: `${n8ssaoOptions.denoiseSamples[y * 3 + x]}`,
+          value: n8ssaoOptions.denoiseSamples[y * 3 + x]
+        }),
+        label: "denoiseSamples"
+      });
+      this.denoiseRadius = this.n8ssao.addBinding(n8ssaoValues, "denoiseRadius", {
+        view: "radiogrid",
+        groupName: "denoiseRadius",
+        size: [3, 1],
+        cells: (x, y) => ({
+          title: `${n8ssaoOptions.denoiseRadius[y * 3 + x]}`,
+          value: n8ssaoOptions.denoiseRadius[y * 3 + x]
+        }),
+        label: "denoiseRadius"
+      });
+      this.aoDisplay = this.n8ssao.addBinding(n8ssaoValues, "viewMode", {
+        view: "radiogrid",
+        groupName: "viewMode",
+        size: [2, 2],
+        cells: (x, y) => ({
+          title: `${n8ssaoOptions.viewMode[y * 2 + x]}`,
+          value: `${n8ssaoOptions.viewMode[y * 2 + x]}`
+        }),
+        label: "viewMode"
+      });
+    }
+    this.folder.addBlade({ view: "separator" });
+  }
+  setupChangeEvent(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass) {
+    this.ppssao.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "enabled": {
+          const value = e.value;
+          if (e.value === true) {
+            composer.addPass(normalPass, this.postProcessingSSAOIndex);
+            composer.addPass(ppssaoPass, this.postProcessingSSAOIndex + 1);
+          } else {
+            composer.removePass(ppssaoPass);
+            composer.removePass(normalPass);
+          }
+          ppssaoValues.enabled = value;
+          normalPass.enabled = value;
+          ppssaoPass.enabled = value;
+          break;
+        }
+        case "showEffectOnly": {
+          const value = e.value;
+          const blend = value === true ? BlendFunction.NORMAL : BlendFunction.MULTIPLY;
+          ppssaoEffect.blendMode.blendFunction = blend;
+          break;
+        }
+        case "resolutionScale": {
+          const value = e.value;
+          ppssaoEffect.resolution.scale = value;
+          break;
+        }
+        case "color": {
+          const value = e.value;
+          ppssaoEffect.color = new Color5().setRGB(value.r, value.g, value.b);
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+      if (ssaoMaterialParams.includes(target)) {
+        ppssaoEffect.ssaoMaterial[target] = e.value;
+        return;
+      }
+      ppssaoEffect[target] = e.value;
+    });
+    this.n8ssao.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "enabled":
+          if (e.value === true) {
+            composer.addPass(n8aopass, this.postProcessingSSAOIndex + 2);
+          } else {
+            composer.removePass(n8aopass);
+          }
+          n8aopass.enabled = e.value;
+          break;
+        case "halfRes":
+          n8aopass.configuration.halfRes = e.value;
+          break;
+        case "aoRadius":
+          n8aopass.configuration.aoRadius = e.value;
+          break;
+        case "distanceFalloff":
+          n8aopass.configuration.distanceFalloff = e.value;
+          break;
+        case "intensity":
+          n8aopass.configuration.intensity = e.value;
+          break;
+        case "color":
+          const value = e.value;
+          n8aopass.configuration.color = new Color5().setRGB(value.r, value.g, value.b);
+          break;
+        default:
+          break;
+      }
+    });
+    this.aoSamples.on("change", (e) => {
+      n8aopass.configuration.aoSamples = e.value;
+    });
+    this.denoiseSamples.on("change", (e) => {
+      n8aopass.configuration.denoiseSamples = e.value;
+    });
+    this.denoiseRadius.on("change", (e) => {
+      n8aopass.configuration.denoiseRadius = e.value;
+    });
+    this.aoDisplay.on("change", (e) => {
+      n8aopass.setDisplayMode(e.value);
+    });
+  }
 };
 
-// src/tweakpane/envSettings.ts
-var envValues = {
-  ambientLight: {
-    ambientLightIntensity: 0,
-    ambientLightColor: { r: 1, g: 1, b: 1 }
-  },
-  fog: {
-    fogNear: 30,
-    fogFar: 210,
-    fogColor: { r: 0.42, g: 0.48, b: 0.59 }
-  }
+// src/tweakpane/blades/toneMappingFolder.ts
+var toneMappingValues = {
+  mode: 2,
+  resolution: 512,
+  whitePoint: 32,
+  middleGrey: 21,
+  minLuminance: 0.01,
+  averageLuminance: 0.01,
+  adaptationRate: 2
 };
-var envOptions = {
-  ambientLight: {
-    ambientLightIntensity: { min: 0, max: 1, step: 0.01 }
-  },
-  fog: {
-    fogNear: { min: 0, max: 80, step: 1 },
-    fogFar: { min: 81, max: 300, step: 1 }
+var toneMappingOptions = {
+  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 }
+};
+var customToneMappingTypes = {
+  0: "REINHARD",
+  1: "REINHARD2",
+  2: "REINHARD2_ADAPTIVE",
+  3: "OPTIMIZED_CINEON",
+  4: "ACES_FILMIC"
+};
+var customToneMappingBlade = {
+  customToneMappingType: customToneMappingTypes[toneMappingValues.mode]
+};
+var setCustomToneMappingType = (value) => {
+  customToneMappingBlade.customToneMappingType = customToneMappingTypes[value];
+};
+var ToneMappingFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.folder = parentFolder.addFolder({
+      title: "customToneMapping",
+      expanded: expand
+    });
+    this.folder.addBinding(toneMappingValues, "mode", toneMappingOptions.mode);
+    this.folder.addBinding(customToneMappingBlade, "customToneMappingType", { readonly: true });
+    this.folder.addBinding(toneMappingValues, "whitePoint", toneMappingOptions.whitePoint);
+    this.folder.addBinding(toneMappingValues, "middleGrey", toneMappingOptions.middleGrey);
+    this.minLuminance = this.folder.addBinding(
+      toneMappingValues,
+      "minLuminance",
+      toneMappingOptions.minLuminance
+    );
+    this.minLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.avgLuminance = this.folder.addBinding(
+      toneMappingValues,
+      "averageLuminance",
+      toneMappingOptions.averageLuminance
+    );
+    this.avgLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.folder.addBinding(toneMappingValues, "adaptationRate", toneMappingOptions.adaptationRate);
+  }
+  setupChangeEvent(toneMappingEffect) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      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;
+      return;
+    });
   }
 };
 
 // src/tweakpane/TweakPane.ts
-import {
-  BlendFunction as BlendFunction2
-} from "postprocessing";
-import { Color as Color5 } from "three";
+import * as EssentialsPlugin from "@tweakpane/plugin-essentials";
 import { Pane } from "tweakpane";
-var TweakPane = class {
-  constructor(renderer, scene, composer) {
-    __publicField(this, "renderer");
-    __publicField(this, "scene");
-    __publicField(this, "composer");
-    __publicField(this, "guiStyle", `
+
+// src/tweakpane/blades/rendererStatsFolder.ts
+var RendererStatsFolder = class {
+  constructor(parentFolder, expanded = true) {
+    this.statsData = {
+      triangles: "0",
+      geometries: "0",
+      textures: "0",
+      shaders: "0",
+      postPasses: "0",
+      drawCalls: "0",
+      rawDeltaTime: "0",
+      deltaTime: "0",
+      FPS: "0"
+    };
+    this.folder = parentFolder.addFolder({ title: "renderStats", expanded });
+    this.performance = this.folder.addFolder({ title: "performance", expanded: true });
+    this.defails = this.folder.addFolder({ title: "pipeline details", expanded: false });
+    this.folder.addBlade({ view: "separator" });
+    this.performance.addBinding(this.statsData, "FPS", { readonly: true });
+    this.performance.addBinding(this.statsData, "deltaTime", { readonly: true });
+    this.performance.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
+    this.defails.addBinding(this.statsData, "triangles", { readonly: true });
+    this.defails.addBinding(this.statsData, "geometries", { readonly: true });
+    this.defails.addBinding(this.statsData, "textures", { readonly: true });
+    this.defails.addBinding(this.statsData, "shaders", { readonly: true });
+    this.defails.addBinding(this.statsData, "postPasses", { readonly: true });
+    this.defails.addBinding(this.statsData, "drawCalls", { readonly: true });
+  }
+  update(renderer, composer, timeManager) {
+    const { geometries, textures } = renderer.info.memory;
+    const { triangles, calls } = renderer.info.render;
+    this.statsData.triangles = triangles.toString();
+    this.statsData.geometries = geometries.toString();
+    this.statsData.textures = textures.toString();
+    this.statsData.shaders = renderer.info.programs.length.toString();
+    this.statsData.postPasses = composer.passes.length.toString();
+    this.statsData.drawCalls = calls.toString();
+    this.statsData.rawDeltaTime = (Math.round(timeManager.rawDeltaTime * 1e5) / 1e5).toString();
+    this.statsData.deltaTime = (Math.round(timeManager.deltaTime * 1e5) / 1e5).toString();
+    this.statsData.FPS = timeManager.fps.toString();
+  }
+};
+
+// src/tweakpane/tweakPaneStyle.ts
+var tweakPaneStyle = `
 :root {
-  --tp-base-background-color: hsla(0, 0%, 10%, 0.8);
+  --tp-base-background-color: rgba(0, 0, 0, 0.6);
   --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
   --tp-button-background-color: hsla(0, 0%, 80%, 1);
   --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
   --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);
   --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);
-  --tp-button-foreground-color: hsla(0, 0%, 0%, 0.8);
+  --tp-button-foreground-color: hsla(0, 0%, 0%, 0.7);
   --tp-container-background-color: hsla(0, 0%, 0%, 0.3);
   --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);
   --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);
   --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);
-  --tp-container-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-container-foreground-color: hsla(0, 0%, 90%, 0.6);
   --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);
-  --tp-input-background-color: hsla(0, 0%, 0%, 0.3);
+  --tp-input-background-color: hsla(0, 0%, 30%, 0.3);
   --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);
   --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);
   --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);
-  --tp-input-foreground-color: hsla(0, 0%, 100%, 0.5);
-  --tp-label-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-input-foreground-color: hsla(0, 0%, 100%, 0.6);
+  --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);
   --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
   --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
 }
@@ -2024,31 +2571,50 @@ var TweakPane = class {
 }
 
 .tp-dfwv {
-  width: 333px !important;
+  color: white;
+  backdrop-filter: blur(12px);
+  width: 360px !important;
   display: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.tp-fldv_t {
+  font-size: 11px;
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .tp-lblv_l {
-  font-size: 10px;
+  font-size: 11px;
   padding-left: 0px !important;
   padding-right: 0px !important;
 }
-`);
-    __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, "environment");
-    __publicField(this, "sun");
-    __publicField(this, "sunButton");
-    __publicField(this, "ambient");
-    __publicField(this, "saveVisibilityInLocalStorage", true);
-    __publicField(this, "guiVisible", false);
+
+.tp-lblv_v {
+  width: 180px;
+}
+
+.tp-sldtxtv_t {
+    max-width: 50px;
+}
+
+.tp-sglv_i {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+}
+`;
+
+// src/tweakpane/TweakPane.ts
+var TweakPane = class {
+  constructor(renderer, scene, composer) {
+    this.renderer = renderer;
+    this.scene = scene;
+    this.composer = composer;
+    this.gui = new Pane();
+    this.saveVisibilityInLocalStorage = true;
+    this.guiVisible = false;
+    this.gui.registerPlugin(EssentialsPlugin);
     if (this.saveVisibilityInLocalStorage) {
       const localStorageGuiVisible = localStorage.getItem("guiVisible");
       if (localStorageGuiVisible !== null) {
@@ -2059,120 +2625,20 @@ var TweakPane = class {
         }
       }
     }
-    this.renderer = renderer;
-    this.scene = scene;
-    this.composer = composer;
     const styleElement = document.createElement("style");
     styleElement.type = "text/css";
-    styleElement.appendChild(document.createTextNode(this.guiStyle));
+    styleElement.appendChild(document.createTextNode(tweakPaneStyle));
     document.head.appendChild(styleElement);
-    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.environment = this.gui.addFolder({ title: "environment", expanded: false });
-    this.sun = this.environment.addFolder({ title: "sun", expanded: true });
-    this.ambient = this.environment.addFolder({ title: "ambient", expanded: true });
-    this.export = this.gui.addFolder({ title: "import/export", expanded: false });
+    this.renderStatsFolder = new RendererStatsFolder(this.gui, true);
+    this.rendererFolder = new RendererFolder(this.gui, false);
+    this.toneMappingFolder = new ToneMappingFolder(this.gui, false);
+    this.ssaoFolder = new SSAOFolder(this.gui, false);
+    this.bcsFolder = new BrightnessContrastSaturationFolder(this.gui, false);
+    this.postExtrasFolder = new PostExtrasFolder(this.gui, false);
+    this.character = new CharacterFolder(this.gui, false);
+    this.environment = new EnvironmentFolder(this.gui, false);
+    this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
+    this.export = this.gui.addFolder({ title: "import / export", expanded: false });
     window.addEventListener("keydown", this.processKey.bind(this));
     this.setupGUIListeners.bind(this)();
     this.setupRenderPane = this.setupRenderPane.bind(this);
@@ -2189,319 +2655,33 @@ var TweakPane = class {
     this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
     this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
   }
-  setupRenderPane(ssaoEffect, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
-    {
-      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;
-            this.toneMapping.hidden = e.value !== 5;
-            toneMappingPass.enabled = e.value === 5 ? 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 Color5().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;
-        }
-      });
-    }
-    {
-      this.environment.hidden = hasLighting === false || sun === null;
-      this.sun.addInput(
-        sunValues.sunPosition,
-        "sunAzimuthalAngle",
-        sunOptions.sunPosition.sunAzimuthalAngle
-      );
-      this.sun.addInput(
-        sunValues.sunPosition,
-        "sunPolarAngle",
-        sunOptions.sunPosition.sunPolarAngle
-      );
-      this.sun.addInput(sunValues, "sunIntensity", sunOptions.sunIntensity);
-      this.sun.addInput(sunValues, "sunColor", {
-        color: { type: "float" }
-      });
-      this.sunButton = this.sun.addButton({ title: "Set HDRI" });
-      this.sunButton.on("click", () => {
-        setHDR();
-      });
-      this.sun.on("change", (e) => {
-        const target = e.presetKey;
-        switch (target) {
-          case "sunAzimuthalAngle":
-            sun?.setAzimuthalAngle(e.value * (Math.PI / 180));
-            break;
-          case "sunPolarAngle":
-            sun?.setPolarAngle(e.value * (Math.PI / 180));
-            break;
-          case "sunIntensity":
-            sun?.setIntensity(e.value);
-            break;
-          case "sunColor":
-            sunValues.sunColor = {
-              r: e.value.r,
-              g: e.value.g,
-              b: e.value.b
-            };
-            sun?.setColor();
-            break;
-          default:
-            break;
-        }
-      });
-      this.ambient.addInput(
-        envValues.ambientLight,
-        "ambientLightIntensity",
-        envOptions.ambientLight.ambientLightIntensity
-      );
-      this.ambient.addInput(envValues.ambientLight, "ambientLightColor", {
-        color: { type: "float" }
-      });
-      this.ambient.addInput(envValues.fog, "fogNear", envOptions.fog.fogNear);
-      this.ambient.addInput(envValues.fog, "fogFar", envOptions.fog.fogFar);
-      this.ambient.addInput(envValues.fog, "fogColor", {
-        color: { type: "float" }
-      });
-      this.ambient.on("change", (e) => {
-        const target = e.presetKey;
-        switch (target) {
-          case "ambientLightIntensity":
-            envValues.ambientLight.ambientLightIntensity = e.value;
-            setAmbientLight();
-            break;
-          case "ambientLightColor":
-            envValues.ambientLight.ambientLightColor = {
-              r: e.value.r,
-              g: e.value.g,
-              b: e.value.b
-            };
-            setAmbientLight();
-            break;
-          case "fogNear":
-            envValues.fog.fogNear = e.value;
-            setFog();
-            break;
-          case "fogFar":
-            envValues.fog.fogFar = e.value;
-            setFog();
-            break;
-          case "fogColor":
-            envValues.fog.fogColor = {
-              r: e.value.r,
-              g: e.value.g,
-              b: e.value.b
-            };
-            setFog();
-            break;
-          default:
-            break;
-        }
-      });
-    }
+  setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
+    this.rendererFolder.setupChangeEvent(
+      this.scene,
+      this.renderer,
+      this.toneMappingFolder.folder,
+      toneMappingPass
+    );
+    this.toneMappingFolder.setupChangeEvent(toneMappingEffect);
+    this.ssaoFolder.setupChangeEvent(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass);
+    this.bcsFolder.setupChangeEvent(brightnessContrastSaturation);
+    this.postExtrasFolder.setupChangeEvent(bloomEffect, gaussGrainEffect);
+    this.environment.setupChangeEvent(setHDR, setAmbientLight, setFog, sun);
+    this.environment.folder.hidden = hasLighting === false || sun === null;
     const exportButton = this.export.addButton({ title: "export" });
     exportButton.on("click", () => {
-      this.downloadSettingsAsJSON(this.gui.exportPreset());
+      this.downloadSettingsAsJSON(this.gui.exportState());
     });
     const importButton = this.export.addButton({ title: "import" });
     importButton.on("click", () => {
       this.importSettingsFromJSON((settings) => {
-        this.gui.importPreset(settings);
+        this.gui.importState(settings);
       });
     });
   }
+  updateStats(timeManager) {
+    this.renderStatsFolder.update(this.renderer, this.composer, timeManager);
+  }
   formatDateForFilename() {
     const date = /* @__PURE__ */ new Date();
     const year = date.getFullYear();
@@ -2527,12 +2707,14 @@ var TweakPane = class {
     input.type = "file";
     input.accept = ".json";
     input.addEventListener("change", (event) => {
-      const file = event.target.files?.[0];
+      var _a;
+      const file = (_a = event.target.files) == null ? void 0 : _a[0];
       if (file) {
         const reader = new FileReader();
         reader.onload = (loadEvent) => {
+          var _a2;
           try {
-            const settings = JSON.parse(loadEvent.target?.result);
+            const settings = JSON.parse((_a2 = loadEvent.target) == null ? void 0 : _a2.result);
             callback(settings);
           } catch (err) {
             console.error("Error parsing JSON:", err);
@@ -2543,19 +2725,6 @@ var TweakPane = class {
     });
     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_;
@@ -2714,39 +2883,18 @@ var GaussGrainEffect = new ShaderMaterial2({
 // src/rendering/composer.ts
 var Composer = class {
   constructor(scene, camera, spawnSun = false) {
-    __publicField(this, "width", window.innerWidth);
-    __publicField(this, "height", window.innerHeight);
-    __publicField(this, "resolution", new Vector22(this.width, this.height));
-    __publicField(this, "isEnvHDRI", false);
-    __publicField(this, "scene");
-    __publicField(this, "camera");
-    __publicField(this, "renderer");
-    __publicField(this, "composer");
-    __publicField(this, "renderPass");
-    __publicField(this, "fxaaEffect");
-    __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, "ambientLight", null);
-    __publicField(this, "sun", null);
-    __publicField(this, "spawnSun");
-    __publicField(this, "tweakPane");
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+    this.resolution = new Vector22(this.width, this.height);
+    this.isEnvHDRI = false;
+    this.bcs = BrightnessContrastSaturation;
+    this.gaussGrainEffect = GaussGrainEffect;
+    this.ambientLight = null;
+    this.sun = null;
     this.scene = scene;
     this.camera = camera;
     this.spawnSun = spawnSun;
-    this.renderer = new WebGLRenderer3({
+    this.renderer = new WebGLRenderer2({
       powerPreference: "high-performance",
       antialias: false,
       stencil: false,
@@ -2755,9 +2903,9 @@ var Composer = class {
     this.renderer.info.autoReset = false;
     this.renderer.setSize(this.width, this.height);
     this.renderer.shadowMap.enabled = true;
-    this.renderer.shadowMap.type = composerValues.renderer.shadowMap;
-    this.renderer.toneMapping = composerValues.renderer.toneMapping;
-    this.renderer.toneMappingExposure = composerValues.renderer.exposure;
+    this.renderer.shadowMap.type = rendererValues.shadowMap;
+    this.renderer.toneMapping = rendererValues.toneMapping;
+    this.renderer.toneMappingExposure = rendererValues.exposure;
     this.setAmbientLight();
     this.setFog();
     document.body.appendChild(this.renderer.domElement);
@@ -2766,44 +2914,59 @@ var Composer = class {
     });
     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.normalPass = new NormalPass2(this.scene, this.camera);
+    this.normalPass.enabled = ppssaoValues.enabled;
     this.normalTextureEffect = new TextureEffect({
-      blendFunction: BlendFunction3.SKIP,
+      blendFunction: BlendFunction2.SKIP,
       texture: this.normalPass.texture
     });
-    this.fxaaEffect = new FXAAEffect();
-    this.bloomEffect = new BloomEffect2({
-      intensity: composerValues.bloom
+    this.ppssaoEffect = new SSAOEffect2(this.camera, this.normalPass.texture, {
+      blendFunction: ppssaoValues.blendFunction,
+      distanceScaling: ppssaoValues.distanceScaling,
+      depthAwareUpsampling: ppssaoValues.depthAwareUpsampling,
+      samples: ppssaoValues.samples,
+      rings: ppssaoValues.rings,
+      luminanceInfluence: ppssaoValues.luminanceInfluence,
+      radius: ppssaoValues.radius,
+      intensity: ppssaoValues.intensity,
+      bias: ppssaoValues.bias,
+      fade: ppssaoValues.fade,
+      resolutionScale: ppssaoValues.resolutionScale,
+      color: new Color6().setRGB(ppssaoValues.color.r, ppssaoValues.color.g, ppssaoValues.color.b),
+      worldDistanceThreshold: ppssaoValues.worldDistanceThreshold,
+      worldDistanceFalloff: ppssaoValues.worldDistanceFalloff,
+      worldProximityThreshold: ppssaoValues.worldProximityThreshold,
+      worldProximityFalloff: ppssaoValues.worldProximityFalloff
     });
-    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 Color6().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.ppssaoPass = new EffectPass2(this.camera, this.ppssaoEffect, this.normalTextureEffect);
+    this.ppssaoPass.enabled = ppssaoValues.enabled;
+    this.fxaaEffect = new FXAAEffect();
+    this.bloomEffect = new BloomEffect({
+      intensity: extrasValues.bloom
     });
+    this.n8aopass = new N8AOPostPass(this.scene, this.camera, this.width, this.height);
+    this.n8aopass.configuration.aoRadius = n8ssaoValues.aoRadius;
+    this.n8aopass.configuration.distanceFalloff = n8ssaoValues.distanceFalloff;
+    this.n8aopass.configuration.intensity = n8ssaoValues.intensity;
+    this.n8aopass.configuration.color = new Color6().setRGB(
+      n8ssaoValues.color.r,
+      n8ssaoValues.color.g,
+      n8ssaoValues.color.b
+    );
+    this.n8aopass.configuration.aoSamples = n8ssaoValues.aoSamples;
+    this.n8aopass.configuration.denoiseSamples = n8ssaoValues.denoiseSamples;
+    this.n8aopass.configuration.denoiseRadius = n8ssaoValues.denoiseRadius;
+    this.n8aopass.enabled = n8ssaoValues.enabled;
     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.toneMappingEffect = new ToneMappingEffect({
+      mode: toneMappingValues.mode,
+      resolution: toneMappingValues.resolution,
+      whitePoint: toneMappingValues.whitePoint,
+      middleGrey: toneMappingValues.middleGrey,
+      minLuminance: toneMappingValues.minLuminance,
+      averageLuminance: toneMappingValues.averageLuminance,
+      adaptationRate: toneMappingValues.adaptationRate
     });
     this.smaaEffect = new SMAAEffect({
       preset: SMAAPreset.ULTRA,
@@ -2811,16 +2974,21 @@ var Composer = class {
       predicationMode: PredicationMode.DEPTH
     });
     this.toneMappingPass = new EffectPass2(this.camera, this.toneMappingEffect);
-    this.toneMappingPass.enabled = composerValues.renderer.toneMapping === 5 || composerValues.renderer.toneMapping === 0 ? true : false;
+    this.toneMappingPass.enabled = rendererValues.toneMapping === 5 || rendererValues.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.bcs.uniforms.brightness.value = bcsValues.brightness;
+    this.bcs.uniforms.contrast.value = bcsValues.contrast;
+    this.bcs.uniforms.saturation.value = bcsValues.saturation;
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
     this.smaaPass = new EffectPass2(this.camera, this.smaaEffect);
     this.composer.addPass(this.renderPass);
-    this.composer.addPass(this.normalPass);
-    this.composer.addPass(this.ssaoPass);
+    if (ppssaoValues.enabled) {
+      this.composer.addPass(this.normalPass);
+      this.composer.addPass(this.ppssaoPass);
+    }
+    if (n8ssaoValues.enabled) {
+      this.composer.addPass(this.n8aopass);
+    }
     this.composer.addPass(this.fxaaPass);
     this.composer.addPass(this.smaaPass);
     this.composer.addPass(this.bloomPass);
@@ -2832,7 +3000,11 @@ var Composer = class {
       this.scene.add(this.sun);
     }
     this.tweakPane.setupRenderPane(
-      this.ssaoEffect,
+      this.composer,
+      this.normalPass,
+      this.ppssaoEffect,
+      this.ppssaoPass,
+      this.n8aopass,
       this.toneMappingEffect,
       this.toneMappingPass,
       this.bcs,
@@ -2853,8 +3025,14 @@ var Composer = class {
     this.resolution = new Vector22(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);
+    if (ppssaoValues.enabled) {
+      this.normalPass.setSize(this.width, this.height);
+      this.normalTextureEffect.setSize(this.width, this.height);
+      this.ppssaoPass.setSize(this.width, this.height);
+    }
+    if (n8ssaoValues.enabled) {
+      this.n8aopass.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);
@@ -2889,7 +3067,7 @@ var Composer = class {
           envMap.needsUpdate = true;
           this.scene.environment = envMap;
           this.scene.background = envMap;
-          this.scene.backgroundIntensity = composerValues.renderer.bgIntensity;
+          this.scene.backgroundIntensity = rendererValues.bgIntensity;
           this.isEnvHDRI = true;
           texture.dispose();
           pmremGenerator.dispose();
@@ -2909,7 +3087,8 @@ var Composer = class {
     fileInput.type = "file";
     fileInput.accept = ".hdr";
     fileInput.addEventListener("change", () => {
-      const file = fileInput.files?.[0];
+      var _a;
+      const file = (_a = fileInput.files) == null ? void 0 : _a[0];
       if (!file) {
         console.log("no file");
         return;
@@ -2954,21 +3133,21 @@ var Composer = class {
 import { Clock } from "three";
 var TimeManager = class {
   constructor() {
-    __publicField(this, "clock", new Clock());
-    __publicField(this, "roundMagnitude", 2e5);
-    __publicField(this, "maxAverageFrames", 150);
-    __publicField(this, "deltaTimes", []);
-    __publicField(this, "targetAverageDeltaTime", 0);
-    __publicField(this, "lerpedAverageMagDelta", 0);
-    __publicField(this, "fpsUpdateTime", 0);
-    __publicField(this, "framesSinceLastFPSUpdate", 0);
-    __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);
+    this.clock = new Clock();
+    this.roundMagnitude = 2e5;
+    this.maxAverageFrames = 150;
+    this.deltaTimes = [];
+    this.targetAverageDeltaTime = 0;
+    this.lerpedAverageMagDelta = 0;
+    this.fpsUpdateTime = 0;
+    this.framesSinceLastFPSUpdate = 0;
+    this.time = 0;
+    this.deltaTime = 0;
+    this.rawDeltaTime = 0;
+    this.smoothDeltaTime = 0;
+    this.frame = 0;
+    this.fps = 0;
+    this.averageFPS = 0;
   }
   update() {
     this.rawDeltaTime = this.clock.getDelta();
@@ -2998,52 +3177,73 @@ var TimeManager = class {
 
 // src/collisions/CollisionsManager.ts
 import {
-  MMLCollisionTrigger,
-  getRelativePositionAndRotationRelativeToObject
+  getRelativePositionAndRotationRelativeToObject,
+  MMLCollisionTrigger
 } from "mml-web";
 import {
+  Box3 as Box32,
   Color as Color7,
   DoubleSide,
   Euler,
-  FrontSide as FrontSide2,
+  Group as Group4,
+  Line3 as Line32,
+  Matrix4 as Matrix42,
   Mesh as Mesh3,
-  MeshStandardMaterial as MeshStandardMaterial2,
+  MeshBasicMaterial as MeshBasicMaterial3,
+  Ray,
   Vector3 as Vector38
 } 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";
 var CollisionsManager = class {
   constructor(scene) {
-    __publicField(this, "debug", false);
-    __publicField(this, "scene");
-    __publicField(this, "tempVector", new Vector38());
-    __publicField(this, "tempVector2", new Vector38());
-    __publicField(this, "collisionMeshState", /* @__PURE__ */ new Map());
-    __publicField(this, "collisionTrigger");
+    this.debug = false;
+    this.tempVector = new Vector38();
+    this.tempVector2 = new Vector38();
+    this.tempVector3 = new Vector38();
+    this.tempRay = new Ray();
+    this.tempMatrix = new Matrix42();
+    this.tempMatrix2 = new Matrix42();
+    this.tempBox = new Box32();
+    this.tempEuler = new Euler();
+    this.tempSegment = new Line32();
+    this.tempSegment2 = new Line32();
+    this.collisionMeshState = /* @__PURE__ */ new Map();
     this.scene = scene;
     this.collisionTrigger = MMLCollisionTrigger.init();
   }
   raycastFirstDistance(ray) {
     let minimumDistance = null;
     for (const [, value] of this.collisionMeshState) {
-      const hit = value.meshBVH.raycastFirst(ray, DoubleSide);
+      this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(value.matrix).invert());
+      const hit = value.meshBVH.raycastFirst(this.tempRay, DoubleSide);
       if (hit) {
-        if (minimumDistance === null || hit.distance < minimumDistance) {
-          minimumDistance = hit.distance;
+        this.tempSegment.start.copy(this.tempRay.origin);
+        this.tempSegment.end.copy(hit.point);
+        this.tempSegment.applyMatrix4(value.matrix);
+        const dist = this.tempSegment.distance();
+        if (minimumDistance === null || dist < minimumDistance) {
+          minimumDistance = dist;
         }
       }
     }
     return minimumDistance;
   }
-  createCollisionMeshState(group) {
+  createCollisionMeshState(group, trackCollisions) {
     const geometries = [];
+    group.updateWorldMatrix(true, false);
+    const invertedRootMatrix = this.tempMatrix.copy(group.matrixWorld).invert();
     group.traverse((child) => {
       if (child.type === "Mesh") {
         const mesh = child;
-        mesh.localToWorld(new Vector38());
-        mesh.updateMatrixWorld();
         const clonedGeometry = mesh.geometry.clone();
-        clonedGeometry.applyMatrix4(mesh.matrixWorld);
+        if (child !== group) {
+          mesh.updateWorldMatrix(true, false);
+          clonedGeometry.applyMatrix4(
+            this.tempMatrix2.multiplyMatrices(invertedRootMatrix, mesh.matrixWorld)
+          );
+        }
         for (const key in clonedGeometry.attributes) {
           if (key !== "position") {
             clonedGeometry.deleteAttribute(key);
@@ -3056,85 +3256,134 @@ var CollisionsManager = class {
         }
       }
     });
-    const newBufferGeometry = BufferGeometryUtils.mergeGeometries(geometries);
+    const newBufferGeometry = BufferGeometryUtils.mergeGeometries(geometries, false);
+    newBufferGeometry.computeVertexNormals();
     const meshBVH = new MeshBVH(newBufferGeometry);
-    if (!this.debug) {
-      return { source: group, visualizer: null, meshBVH };
-    }
-    const mergedMesh = new Mesh3(
-      newBufferGeometry,
-      new MeshStandardMaterial2({ color: 16711680, side: FrontSide2, wireframe: true })
-    );
-    mergedMesh.geometry.boundsTree = meshBVH;
-    const visualizer = new MeshBVHVisualizer(mergedMesh, 3);
-    visualizer.edgeMaterial.color = new Color7(255);
-    visualizer.update();
-    return { source: group, visualizer, meshBVH };
+    const meshState = {
+      source: group,
+      meshBVH,
+      matrix: group.matrixWorld.clone(),
+      trackCollisions
+    };
+    if (this.debug) {
+      newBufferGeometry.boundsTree = meshBVH;
+      const wireframeMesh = new Mesh3(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
+      const normalsHelper = new VertexNormalsHelper(wireframeMesh, 0.25, 65280);
+      const visualizer = new MeshBVHVisualizer(wireframeMesh, 4);
+      visualizer.edgeMaterial.color = new Color7("blue");
+      const debugGroup = new Group4();
+      debugGroup.add(wireframeMesh, normalsHelper, visualizer);
+      group.matrixWorld.decompose(debugGroup.position, debugGroup.quaternion, debugGroup.scale);
+      visualizer.update();
+      meshState.debugGroup = debugGroup;
+    }
+    return meshState;
   }
   addMeshesGroup(group, mElement) {
     if (mElement) {
       this.collisionTrigger.addCollider(group, mElement);
     }
-    const meshState = this.createCollisionMeshState(group);
-    if (meshState.visualizer) {
-      this.scene.add(meshState.visualizer);
+    const meshState = this.createCollisionMeshState(group, mElement !== void 0);
+    if (meshState.debugGroup) {
+      this.scene.add(meshState.debugGroup);
     }
     this.collisionMeshState.set(group, meshState);
   }
   updateMeshesGroup(group) {
     const meshState = this.collisionMeshState.get(group);
     if (meshState) {
-      const newMeshState = this.createCollisionMeshState(group);
-      if (meshState.visualizer) {
-        this.scene.remove(meshState.visualizer);
-      }
-      if (newMeshState.visualizer) {
-        this.scene.add(newMeshState.visualizer);
+      group.updateWorldMatrix(true, false);
+      meshState.matrix.copy(group.matrixWorld);
+      if (meshState.debugGroup) {
+        group.matrixWorld.decompose(
+          meshState.debugGroup.position,
+          meshState.debugGroup.quaternion,
+          meshState.debugGroup.scale
+        );
       }
-      this.collisionMeshState.set(group, newMeshState);
     }
   }
   removeMeshesGroup(group) {
     this.collisionTrigger.removeCollider(group);
     const meshState = this.collisionMeshState.get(group);
     if (meshState) {
-      if (meshState.visualizer) {
-        this.scene.remove(meshState.visualizer);
+      if (meshState.debugGroup) {
+        this.scene.remove(meshState.debugGroup);
       }
       this.collisionMeshState.delete(group);
     }
   }
-  applyCollider(tempSegment, radius, boundingBox, meshState) {
+  applyCollider(worldBasedCapsuleSegment, capsuleRadius, meshState) {
+    const meshMatrix = this.tempMatrix.copy(meshState.matrix).invert();
+    const meshRelativeCapsuleBoundingBox = this.tempBox;
+    meshRelativeCapsuleBoundingBox.makeEmpty();
+    meshRelativeCapsuleBoundingBox.expandByPoint(worldBasedCapsuleSegment.start);
+    meshRelativeCapsuleBoundingBox.expandByPoint(worldBasedCapsuleSegment.end);
+    meshRelativeCapsuleBoundingBox.min.subScalar(capsuleRadius);
+    meshRelativeCapsuleBoundingBox.max.addScalar(capsuleRadius);
+    meshRelativeCapsuleBoundingBox.applyMatrix4(meshMatrix);
+    const meshRelativeCapsuleSegment = this.tempSegment;
+    meshRelativeCapsuleSegment.start.copy(worldBasedCapsuleSegment.start);
+    meshRelativeCapsuleSegment.end.copy(worldBasedCapsuleSegment.end);
+    meshRelativeCapsuleSegment.applyMatrix4(meshMatrix);
+    const initialMeshRelativeCapsuleSegmentStart = this.tempVector3.copy(
+      meshRelativeCapsuleSegment.start
+    );
     let collisionPosition = null;
     meshState.meshBVH.shapecast({
-      intersectsBounds: (box) => box.intersectsBox(boundingBox),
-      intersectsTriangle: (tri) => {
-        const triPoint = this.tempVector;
-        const capsulePoint = this.tempVector2;
-        const distance = tri.closestPointToSegment(tempSegment, triPoint, capsulePoint);
-        if (distance < radius) {
-          const depth = radius - distance;
-          collisionPosition = new Vector38().copy(capsulePoint);
-          const direction = capsulePoint.sub(triPoint).normalize();
-          tempSegment.start.addScaledVector(direction, depth);
-          tempSegment.end.addScaledVector(direction, depth);
+      intersectsBounds: (meshBox) => {
+        return meshBox.intersectsBox(meshRelativeCapsuleBoundingBox);
+      },
+      intersectsTriangle: (meshTriangle) => {
+        const closestPointOnTriangle = this.tempVector;
+        const closestPointOnSegment = this.tempVector2;
+        meshTriangle.closestPointToSegment(
+          meshRelativeCapsuleSegment,
+          closestPointOnTriangle,
+          closestPointOnSegment
+        );
+        const intersectionSegment = this.tempSegment2;
+        intersectionSegment.start.copy(closestPointOnTriangle);
+        intersectionSegment.end.copy(closestPointOnSegment);
+        const modelReferenceDistance = intersectionSegment.distance();
+        intersectionSegment.applyMatrix4(meshState.matrix);
+        const realDistance = intersectionSegment.distance();
+        if (realDistance < capsuleRadius) {
+          if (!collisionPosition) {
+            collisionPosition = new Vector38().copy(closestPointOnSegment);
+          }
+          const ratio = realDistance / modelReferenceDistance;
+          const realDepth = capsuleRadius - realDistance;
+          const modelDepth = realDepth / ratio;
+          const direction = closestPointOnSegment.sub(closestPointOnTriangle).normalize();
+          meshRelativeCapsuleSegment.start.addScaledVector(direction, modelDepth);
+          meshRelativeCapsuleSegment.end.addScaledVector(direction, modelDepth);
         }
       }
     });
+    if (collisionPosition) {
+      const delta = this.tempVector.copy(meshRelativeCapsuleSegment.start).sub(initialMeshRelativeCapsuleSegmentStart);
+      this.tempMatrix.copy(meshState.matrix).setPosition(0, 0, 0);
+      delta.applyMatrix4(this.tempMatrix);
+      if (!(isNaN(delta.x) && isNaN(delta.y) && isNaN(delta.z))) {
+        worldBasedCapsuleSegment.start.add(delta);
+        worldBasedCapsuleSegment.end.add(delta);
+      }
+    }
     return collisionPosition;
   }
-  applyColliders(tempSegment, radius, boundingBox) {
+  applyColliders(tempSegment, radius) {
     let collidedElements = null;
     for (const meshState of this.collisionMeshState.values()) {
-      const collisionPosition = this.applyCollider(tempSegment, radius, boundingBox, meshState);
-      if (collisionPosition) {
+      const collisionPosition = this.applyCollider(tempSegment, radius, meshState);
+      if (collisionPosition && meshState.trackCollisions) {
         if (collidedElements === null) {
           collidedElements = /* @__PURE__ */ new Map();
         }
         const relativePosition = getRelativePositionAndRotationRelativeToObject(
           {
             position: collisionPosition,
-            rotation: new Euler()
+            rotation: this.tempEuler.set(0, 0, 0)
           },
           meshState.source
         );