From 5f96927a33f6c8237ce8049477a5c807416d863c Mon Sep 17 00:00:00 2001
From: Michael Herzog <michael.herzog@human-interactive.org>
Date: Thu, 11 Jul 2024 22:07:17 +0200
Subject: [PATCH] Examples: Make AO demo more configurable. (#28852)

---
 examples/webgpu_postprocessing_ao.html | 30 +++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/examples/webgpu_postprocessing_ao.html b/examples/webgpu_postprocessing_ao.html
index 4d25758657d01a..2f6cf62e7f4a5f 100644
--- a/examples/webgpu_postprocessing_ao.html
+++ b/examples/webgpu_postprocessing_ao.html
@@ -32,8 +32,15 @@
 
 			let camera, scene, renderer, postProcessing, controls, clock, stats, mixer;
 
+			let aoPass;
+
 			const params = {
 				blendIntensity: 1,
+				distanceExponent: 1,
+				distanceFallOff: 1,
+				radius: 0.25,
+				scale: 1,
+				thickness: 1,
 				enabled: true
 			};
 
@@ -83,7 +90,7 @@
 				const scenePassNormal = scenePass.getTextureNode( 'normal' );
 				const scenePassDepth = scenePass.getTextureNode( 'depth' );
 
-				const aoPass = scenePassColor.ao( scenePassDepth, scenePassNormal, camera );
+				aoPass = scenePassColor.ao( scenePassDepth, scenePassNormal, camera );
 
 				postProcessing.outputNode = aoPass;
 
@@ -112,11 +119,13 @@
 
 				const gui = new GUI();
 				gui.title( 'AO settings' );
-				gui.add( params, 'blendIntensity' ).min( 0 ).max( 1 ).onChange( ( value ) => {
-
-					aoPass.blendIntensity.value = value;
+				gui.add( params, 'blendIntensity' ).min( 0 ).max( 1 ).onChange( updateParameters );
+				gui.add( params, 'distanceExponent' ).min( 1 ).max( 4 ).onChange( updateParameters );
+				gui.add( params, 'distanceFallOff' ).min( 0.01 ).max( 1 ).onChange( updateParameters );
+				gui.add( params, 'radius' ).min( 0.01 ).max( 1 ).onChange( updateParameters );
+				gui.add( params, 'scale' ).min( 0.01 ).max( 2 ).onChange( updateParameters );
+				gui.add( params, 'thickness' ).min( 0.01 ).max( 2 ).onChange( updateParameters );
 
-				} );
 				gui.add( params, 'enabled' ).onChange( ( value ) => {
 			
 					if ( value === true ) {
@@ -135,6 +144,17 @@
 
 			}
 
+			function updateParameters() {
+
+				aoPass.blendIntensity.value = params.blendIntensity;
+				aoPass.distanceExponent.value = params.distanceExponent;
+				aoPass.distanceFallOff.value = params.distanceFallOff;
+				aoPass.radius.value = params.radius;
+				aoPass.scale.value = params.scale;
+				aoPass.thickness.value = params.thickness;
+
+			}
+
 			function onWindowResize() {
 
 				const width = window.innerWidth;