integrates denoise filter to post-processing pipeline

packages/3d-web-client-core/src/rendering/composer.ts

@@ -41,6 +41,7 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 import { Sun } from "../sun/Sun";
 import { TimeManager } from "../time/TimeManager";
 import { bcsValues } from "../tweakpane/blades/bcsFolder";
+import { denoiseValues } from "../tweakpane/blades/denoiseFolder";
 import { envValues, sunValues } from "../tweakpane/blades/environmentFolder";
 import { extrasValues } from "../tweakpane/blades/postExtrasFolder";
 import { rendererValues } from "../tweakpane/blades/rendererFolder";
@@ -263,7 +264,10 @@ export class Composer {
     this.gaussGrainEffect.uniforms.alpha.value = 1.0;
 
     this.denoisePass = new ShaderPass(this.denoiseEffect, "tDiffuse");
-    this.denoiseEffect.uniforms.amount.value = 0.3;
+    this.denoiseEffect.uniforms.distBias.value = denoiseValues.distBias;
+    this.denoiseEffect.uniforms.tolerance.value = denoiseValues.tolerance;
+    this.denoiseEffect.uniforms.multiplier.value = denoiseValues.multiplier;
+    this.denoiseEffect.uniforms.amount.value = denoiseValues.amount;
     this.denoiseEffect.uniforms.alpha.value = 1.0;
 
     this.smaaPass = new EffectPass(this.camera, this.smaaEffect);
@@ -334,6 +338,7 @@ export class Composer {
       this.bcs,
       this.bloomEffect,
       this.gaussGrainEffect,
+      this.denoiseEffect,
       this.spawnSun,
       this.sun,
       this.setHDRIFromFile.bind(this),

packages/3d-web-client-core/src/rendering/post-effects/denoiose.ts

@@ -7,6 +7,9 @@ export const DenoiseEffect = new ShaderMaterial({
     tDiffuse: new Uniform(null),
     resolution: new Uniform(new Vector2()),
     time: new Uniform(0.0),
+    distBias: new Uniform(0.6),
+    tolerance: new Uniform(20.0),
+    multiplier: new Uniform(1.5),
     amount: new Uniform(0.0),
     alpha: new Uniform(0.0),
   },
@@ -18,15 +21,15 @@ export const DenoiseEffect = new ShaderMaterial({
     uniform sampler2D tDiffuse;
     uniform vec2 resolution;
     uniform float time;
+    uniform float distBias;
+    uniform float tolerance;
+    uniform float multiplier;
     uniform float amount;
     uniform float alpha;
 
     const float PI = acos(-1.0);
     const float goldenAngle = 3.0 * PI - sqrt(5.0) * PI;
-    const float pixelMultiplier = 1.5;
-    const float inverseHUETolerance = 20.0;
-    const int samples = 32;
-    const float distBias = 0.6;
+    const int samples = 64;
 
     #define pow(a,b) pow(max(a,0.0), b)
 
@@ -51,13 +54,13 @@ export const DenoiseEffect = new ShaderMaterial({
 
       for (float x = 0.0; x <= float(samples); x++) {
         pixelRotated *= rotate;
-        vec2 offset = pixelMultiplier * pixelRotated * sqrt(x) * 0.5;
+        vec2 offset = multiplier * pixelRotated * sqrt(x) * 0.5;
         float influence = 1.0 - sampleTrueRadius * pow(dot(offset, offset), distBias);
         offset *= samplePixel;
         vec3 denoisedCol = texture(tex, uv + offset).rgb;
         influence *= influence * influence;
         influence *= (
-          pow(0.5 + 0.5 * dot(sampleCenterNorm, normalize(denoisedCol)), inverseHUETolerance) *
+          pow(0.5 + 0.5 * dot(sampleCenterNorm, normalize(denoisedCol)), tolerance) *
           pow(1.0 - abs(length(denoisedCol) - length(sampleCenterSat)), 8.0)
         );
         influenceSum += influence;

packages/3d-web-client-core/src/tweakpane/TweakPane.ts

@@ -14,6 +14,7 @@ import { CameraManager } from "../camera/CameraManager";
 import { LocalController } from "../character/LocalController";
 import { EventHandlerCollection } from "../input/EventHandlerCollection";
 import { BrightnessContrastSaturation } from "../rendering/post-effects/bright-contrast-sat";
+import { DenoiseEffect } from "../rendering/post-effects/denoiose";
 import { GaussGrainEffect } from "../rendering/post-effects/gauss-grain";
 import { Sun } from "../sun/Sun";
 import { TimeManager } from "../time/TimeManager";
@@ -22,6 +23,7 @@ import { BrightnessContrastSaturationFolder } from "./blades/bcsFolder";
 import { CameraFolder } from "./blades/cameraFolder";
 import { CharacterControlsFolder } from "./blades/characterControlsFolder";
 import { CharacterFolder } from "./blades/characterFolder";
+import { DenoiseFolder } from "./blades/denoiseFolder";
 import { EnvironmentFolder } from "./blades/environmentFolder";
 import { PostExtrasFolder } from "./blades/postExtrasFolder";
 import { RendererFolder, rendererValues } from "./blades/rendererFolder";
@@ -40,6 +42,7 @@ export class TweakPane {
   private ssaoFolder: SSAOFolder;
   private bcsFolder: BrightnessContrastSaturationFolder;
   private postExtrasFolder: PostExtrasFolder;
+  private denoiseFolder: DenoiseFolder;
   // @ts-ignore
   private character: CharacterFolder;
   private environment: EnvironmentFolder;
@@ -98,6 +101,7 @@ export class TweakPane {
     this.ssaoFolder = new SSAOFolder(this.gui, false);
     this.bcsFolder = new BrightnessContrastSaturationFolder(this.gui, false);
     this.postExtrasFolder = new PostExtrasFolder(this.gui, false);
+    this.denoiseFolder = new DenoiseFolder(this.gui, false);
     this.character = new CharacterFolder(this.gui, false);
     this.environment = new EnvironmentFolder(this.gui, false);
     this.camera = new CameraFolder(this.gui, false);
@@ -141,6 +145,7 @@ export class TweakPane {
     brightnessContrastSaturation: typeof BrightnessContrastSaturation,
     bloomEffect: BloomEffect,
     gaussGrainEffect: typeof GaussGrainEffect,
+    denoiseEffect: typeof DenoiseEffect,
     hasLighting: boolean,
     sun: Sun | null,
     setHDR: () => void,
@@ -160,6 +165,7 @@ export class TweakPane {
     this.ssaoFolder.setupChangeEvent(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass);
     this.bcsFolder.setupChangeEvent(brightnessContrastSaturation);
     this.postExtrasFolder.setupChangeEvent(bloomEffect, gaussGrainEffect);
+    this.denoiseFolder.setupChangeEvent(denoiseEffect);
     this.environment.setupChangeEvent(
       this.scene,
       setHDR,

packages/3d-web-client-core/src/tweakpane/blades/denoiseFolder.ts

@@ -0,0 +1,52 @@
+import { BladeController, View } from "@tweakpane/core";
+import { BladeApi, FolderApi, TpChangeEvent } from "tweakpane";
+
+import { DenoiseEffect } from "../../rendering/post-effects/denoiose";
+
+export const denoiseValues = {
+  distBias: 0.6,
+  tolerance: 20.0,
+  multiplier: 1.5,
+  amount: 0.42,
+};
+
+const denoiseOptions = {
+  distBias: { min: 0.01, max: 0.85, step: 0.01 },
+  tolerance: { min: 0.01, max: 20, step: 0.01 },
+  multiplier: { min: 0.01, max: 5, step: 0.1 },
+  amount: { min: 0, max: 1, step: 0.01 },
+};
+
+export class DenoiseFolder {
+  private folder: FolderApi;
+  constructor(parentFolder: FolderApi, expand: boolean = false) {
+    this.folder = parentFolder.addFolder({ title: "denoise", expanded: expand });
+    this.folder.addBinding(denoiseValues, "distBias", denoiseOptions.distBias);
+    this.folder.addBinding(denoiseValues, "tolerance", denoiseOptions.tolerance);
+    this.folder.addBinding(denoiseValues, "multiplier", denoiseOptions.multiplier);
+    this.folder.addBinding(denoiseValues, "amount", denoiseOptions.amount);
+  }
+
+  public setupChangeEvent(denoiseEffect: typeof DenoiseEffect): void {
+    this.folder.on("change", (e: TpChangeEvent<unknown, BladeApi<BladeController<View>>>) => {
+      const target = (e.target as any).key;
+      if (!target) return;
+      switch (target) {
+        case "distBias":
+          denoiseEffect.uniforms.distBias.value = e.value as number;
+          break;
+        case "tolerance":
+          denoiseEffect.uniforms.tolerance.value = e.value as number;
+          break;
+        case "multiplier":
+          denoiseEffect.uniforms.multiplier.value = e.value as number;
+          break;
+        case "amount":
+          denoiseEffect.uniforms.amount.value = e.value as number;
+          break;
+        default:
+          break;
+      }
+    });
+  }
+}

packages/3d-web-client-core/src/tweakpane/blades/postExtrasFolder.ts

@@ -5,8 +5,8 @@ import { BladeApi, FolderApi, TpChangeEvent } from "tweakpane";
 import { GaussGrainEffect } from "../../rendering/post-effects/gauss-grain";
 
 export const extrasValues = {
-  grain: 0.045,
-  bloom: 0.17,
+  grain: 0.05,
+  bloom: 0.21,
 };
 
 const extrasOptions = {