Merge pull request #249 from gkjohnson/denoise

Add denoiser round 2

Author: gkjohnson

README.md

@@ -566,6 +566,29 @@ _extends MaterialBase_
 }
 ```
 
+## DenoiseMaterial
+
+_extends MaterialBase_
+
+Denoise material based on [BrutPitt/glslSmartDeNoise](https://github.com/BrutPitt/glslSmartDeNoise) intended to be the final pass to the screen. Includes tonemapping and color space conversions.
+
+**Uniforms**
+
+```js
+{
+
+	// sigma - sigma Standard Deviation
+	// kSigma - sigma coefficient
+	// kSigma * sigma = radius of the circular kernel
+	sigma = 5.0 : Number,
+	kSigma = 1.0 : Number,
+
+	// edge sharpening threshold
+	threshold = 0.03 : Number,
+
+}
+```
+
 ## RenderTarget2DArray
 
 _extends WebGLArrayRenderTarget_

example/materialBall.js

@@ -2,13 +2,13 @@ import * as THREE from 'three';
 import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import { PathTracingRenderer, PhysicalPathTracingMaterial, PhysicalCamera, BlurredEnvMapGenerator, EquirectCamera } from '../src/index.js';
+import { PathTracingRenderer, PhysicalPathTracingMaterial, PhysicalCamera, BlurredEnvMapGenerator, EquirectCamera, DenoiseMaterial } from '../src/index.js';
 import { PathTracingSceneWorker } from '../src/workers/PathTracingSceneWorker.js';
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 
-let renderer, controls, sceneInfo, ptRenderer, activeCamera, fsQuad, materials;
+let renderer, controls, sceneInfo, ptRenderer, activeCamera, blitQuad, denoiseQuad, materials;
 let perspectiveCamera, orthoCamera, equirectCamera;
 let envMap, envMapGenerator, scene;
 let samplesEl;
@@ -78,6 +78,10 @@ const params = {
 
 	multipleImportanceSampling: true,
 	stableNoise: false,
+	denoiseEnabled: true,
+	denoiseSigma: 2.5,
+	denoiseThreshold: 0.1,
+	denoiseKSigma: 1.0,
 	environmentIntensity: 1,
 	environmentRotation: 0,
 	environmentBlur: 0.0,
@@ -144,11 +148,13 @@ async function init() {
 	ptRenderer.material.setDefine( 'FEATURE_MIS', Number( params.multipleImportanceSampling ) );
 	ptRenderer.tiles.set( params.tiles, params.tiles );
 
-	fsQuad = new FullScreenQuad( new THREE.MeshBasicMaterial( {
+	blitQuad = new FullScreenQuad( new THREE.MeshBasicMaterial( {
 		map: ptRenderer.target.texture,
 		blending: THREE.CustomBlending,
 	} ) );
 
+	denoiseQuad = new FullScreenQuad( new DenoiseMaterial() );
+
 	controls = new OrbitControls( perspectiveCamera, renderer.domElement );
 	controls.addEventListener( 'change', () => {
 
@@ -273,7 +279,7 @@ async function init() {
 	ptFolder.add( params, 'acesToneMapping' ).onChange( value => {
 
 		renderer.toneMapping = value ? THREE.ACESFilmicToneMapping : THREE.NoToneMapping;
-		fsQuad.material.needsUpdate = true;
+		blitQuad.material.needsUpdate = true;
 
 	} );
 	ptFolder.add( params, 'stableNoise' ).onChange( value => {
@@ -315,6 +321,24 @@ async function init() {
 
 	} );
 
+	const denoiseFolder = gui.addFolder( 'Denoising' );
+	denoiseFolder.add( params, 'denoiseEnabled' );
+	denoiseFolder.add( params, 'denoiseSigma', 0.01, 12.0 ).onChange( value => {
+
+		denoiseQuad.material.sigma = value;
+
+	} );
+	denoiseFolder.add( params, 'denoiseThreshold', 0.01, 1.0 ).onChange( value => {
+
+		denoiseQuad.material.threshold = value;
+
+	} );
+	denoiseFolder.add( params, 'denoiseKSigma', 0.0, 12.0 ).onChange( value => {
+
+		denoiseQuad.material.kSigma = value;
+
+	} );
+
 	const envFolder = gui.addFolder( 'Environment' );
 	envFolder.add( params, 'environmentIntensity', 0, 10 ).onChange( () => {
 
@@ -624,9 +648,11 @@ function animate() {
 
 	}
 
+	const quad = params.denoiseEnabled ? denoiseQuad : blitQuad;
+
 	renderer.autoClear = false;
-	fsQuad.material.map = ptRenderer.target.texture;
-	fsQuad.render( renderer );
+	quad.material.map = ptRenderer.target.texture;
+	quad.render( renderer );
 	renderer.autoClear = true;
 
 	samplesEl.innerText = `Samples: ${ Math.floor( ptRenderer.samples ) }`;

src/index.js

@@ -24,6 +24,7 @@ export * from './utils/BlurredEnvMapGenerator.js';
 export * from './utils/IESLoader.js';
 
 // materials
+export * from './materials/DenoiseMaterial';
 export * from './materials/MaterialBase.js';
 export * from './materials/PhysicalPathTracingMaterial.js';
 

src/materials/DenoiseMaterial.js

@@ -0,0 +1,141 @@
+import { NoBlending } from 'three';
+import { MaterialBase } from './MaterialBase.js';
+
+export class DenoiseMaterial extends MaterialBase {
+
+	constructor( parameters ) {
+
+		super( {
+
+			blending: NoBlending,
+
+			transparent: false,
+
+			depthWrite: false,
+
+			depthTest: false,
+
+			defines: {
+
+				USE_SLIDER: 0,
+
+			},
+
+			uniforms: {
+
+				sigma: { value: 5.0 },
+				threshold: { value: 0.03 },
+				kSigma: { value: 1.0 },
+
+				map: { value: null },
+
+			},
+
+			vertexShader: /* glsl */`
+
+				varying vec2 vUv;
+
+				void main() {
+
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+				}
+
+			`,
+
+			fragmentShader: /* glsl */`
+
+				//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+				//  Copyright (c) 2018-2019 Michele Morrone
+				//  All rights reserved.
+				//
+				//  https://michelemorrone.eu - https://BrutPitt.com
+				//
+				//  [email protected] - [email protected]
+				//  twitter: @BrutPitt - github: BrutPitt
+				//
+				//  https://github.com/BrutPitt/glslSmartDeNoise/
+				//
+				//  This software is distributed under the terms of the BSD 2-Clause license
+				//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+				uniform sampler2D map;
+
+				uniform float sigma;
+				uniform float threshold;
+				uniform float kSigma;
+
+				varying vec2 vUv;
+
+				#define INV_SQRT_OF_2PI 0.39894228040143267793994605993439
+				#define INV_PI 0.31830988618379067153776752674503
+
+				// Parameters:
+				//	 sampler2D tex	 - sampler image / texture
+				//	 vec2 uv		   - actual fragment coord
+				//	 float sigma  >  0 - sigma Standard Deviation
+				//	 float kSigma >= 0 - sigma coefficient
+				//		 kSigma * sigma  -->  radius of the circular kernel
+				//	 float threshold   - edge sharpening threshold
+				vec4 smartDeNoise( sampler2D tex, vec2 uv, float sigma, float kSigma, float threshold ) {
+
+					float radius = round( kSigma * sigma );
+					float radQ = radius * radius;
+
+					float invSigmaQx2 = 0.5 / ( sigma * sigma );
+					float invSigmaQx2PI = INV_PI * invSigmaQx2;
+
+					float invThresholdSqx2 = 0.5 / ( threshold * threshold );
+					float invThresholdSqrt2PI = INV_SQRT_OF_2PI / threshold;
+
+					vec4 centrPx = texture2D( tex, uv );
+					centrPx.rgb *= centrPx.a;
+
+					float zBuff = 0.0;
+					vec4 aBuff = vec4( 0.0 );
+					vec2 size = vec2( textureSize( tex, 0 ) );
+
+					vec2 d;
+					for ( d.x = - radius; d.x <= radius; d.x ++ ) {
+
+						float pt = sqrt( radQ - d.x * d.x );
+
+						for ( d.y = - pt; d.y <= pt; d.y ++ ) {
+
+							float blurFactor = exp( - dot( d, d ) * invSigmaQx2 ) * invSigmaQx2PI;
+
+							vec4 walkPx = texture2D( tex, uv + d / size );
+							walkPx.rgb *= walkPx.a;
+
+							vec4 dC = walkPx - centrPx;
+							float deltaFactor = exp( - dot( dC.rgba, dC.rgba ) * invThresholdSqx2 ) * invThresholdSqrt2PI * blurFactor;
+
+							zBuff += deltaFactor;
+							aBuff += deltaFactor * walkPx;
+
+						}
+
+					}
+
+					return aBuff / zBuff;
+
+				}
+
+				void main() {
+
+					gl_FragColor = smartDeNoise( map, vec2( vUv.x, vUv.y ), sigma, kSigma, threshold );
+					#include <tonemapping_fragment>
+					#include <encodings_fragment>
+
+				}
+
+			`
+
+		} );
+
+		this.setValues( parameters );
+
+	}
+
+}