@mml-io/3d-web-client-core 0.0.0-experimental-0b919eb-20230904 → 0.0.0-experimental-b293af2-20230904

package/build/index.js

@@ -263,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;
+        }
+      }
+    });
   }
 };
 
@@ -305,32 +377,32 @@ var CharacterMaterial = class extends MeshPhysicalMaterial {
     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 };
@@ -430,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;
   }
 };
 
@@ -1650,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,
@@ -1676,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: {
@@ -1699,6 +1772,144 @@ 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 {
@@ -1731,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) {
@@ -1781,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 }
   },
@@ -1863,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 }
   },
@@ -1871,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",
@@ -1884,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",
@@ -1916,69 +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) {
-    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);
 }
@@ -1990,19 +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;
 }
+
+.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) {
@@ -2013,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);
@@ -2143,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 == null ? void 0 : sun.setAzimuthalAngle(e.value * (Math.PI / 180));
-            break;
-          case "sunPolarAngle":
-            sun == null ? void 0 : sun.setPolarAngle(e.value * (Math.PI / 180));
-            break;
-          case "sunIntensity":
-            sun == null ? void 0 : sun.setIntensity(e.value);
-            break;
-          case "sunColor":
-            sunValues.sunColor = {
-              r: e.value.r,
-              g: e.value.g,
-              b: e.value.b
-            };
-            sun == null ? void 0 : 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();
@@ -2499,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_;
@@ -2681,7 +2894,7 @@ var Composer = class {
     this.scene = scene;
     this.camera = camera;
     this.spawnSun = spawnSun;
-    this.renderer = new WebGLRenderer3({
+    this.renderer = new WebGLRenderer2({
       powerPreference: "high-performance",
       antialias: false,
       stencil: false,
@@ -2690,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);
@@ -2701,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,
@@ -2746,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);
@@ -2767,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,
@@ -2788,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);
@@ -2824,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();