Examples: Clean up. (#31887)

* Examples: Clean up.

* Update E2E screenshot.

examples/webgpu_postprocessing_ssgi.html

@@ -28,7 +28,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { pass, mrt, output, normalView, diffuseColor, velocity, add, vec3, vec4 } from 'three/tsl';
+			import { pass, mrt, output, normalView, diffuseColor, velocity, add, vec3, vec4, directionToColor, colorToDirection, sample } from 'three/tsl';
 			import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
 			import { traa } from 'three/addons/tsl/display/TRAANode.js';
 
@@ -79,7 +79,7 @@
 				scenePass.setMRT( mrt( {
 					output: output,
 					diffuseColor: diffuseColor,
-					normal: normalView,
+					normal: directionToColor( normalView ),
 					velocity: velocity
 				} ) );
 
@@ -89,9 +89,23 @@
 				const scenePassNormal = scenePass.getTextureNode( 'normal' );
 				const scenePassVelocity = scenePass.getTextureNode( 'velocity' );
 
+				// bandwidth optimization
+
+				const diffuseTexture = scenePass.getTexture( 'diffuseColor' );
+				diffuseTexture.type = THREE.UnsignedByteType;
+
+				const normalTexture = scenePass.getTexture( 'normal' );
+				normalTexture.type = THREE.UnsignedByteType;
+
+				const sceneNormal = sample( ( uv ) => {
+
+					return colorToDirection( scenePassNormal.sample( uv ) );
+
+				} );
+
 				// gi
 
-				const giPass = ssgi( scenePassColor, scenePassDepth, scenePassNormal, camera );
+				const giPass = ssgi( scenePassColor, scenePassDepth, sceneNormal, camera );
 				giPass.sliceCount.value = 2;
 				giPass.stepCount.value = 8;
 
@@ -100,7 +114,7 @@
 				const gi = giPass.rgb;
 				const ao = giPass.a;
 
-				const compositePass = vec4( add ( scenePassColor.rgb.mul( ao ), ( scenePassDiffuse.rgb.mul( gi ) ) ), scenePassColor.a );
+				const compositePass = vec4( add( scenePassColor.rgb.mul( ao ), ( scenePassDiffuse.rgb.mul( gi ) ) ), scenePassColor.a );
 			
 				// traa
 
@@ -133,9 +147,21 @@
 
 				const gui = new GUI();
 				gui.title( 'SSGI settings' );
-				let outputDropdown = gui.add( params, 'output', types );
-				outputDropdown.onChange( value => {
-			
+				gui.add( params, 'output', types ).onChange( updatePostprocessing );
+				gui.add( giPass.sliceCount, 'value', 1, 4 ).step( 1 ).name( 'slice count' );
+				gui.add( giPass.stepCount, 'value', 1, 32 ).step( 1 ).name( 'step count' );
+				gui.add( giPass.radius, 'value', 1, 25 ).name( 'radius' );
+				gui.add( giPass.expFactor, 'value', 1, 3 ).name( 'exp factor' );
+				gui.add( giPass.thickness, 'value', 0.01, 10 ).name( 'thickness' );
+				gui.add( giPass.backfaceLighting, 'value', 0, 1 ).name( 'backface lighting' );
+				gui.add( giPass.aoIntensity, 'value', 0, 4 ).name( 'AO intenstiy' );
+				gui.add( giPass.giIntensity, 'value', 0, 100 ).name( 'GI intenstiy' );
+				gui.add( giPass.useLinearThickness, 'value' ).name( 'use linear thickness' );
+				gui.add( giPass.useScreenSpaceSampling, 'value' ).name( 'screen-space sampling' );
+				gui.add( giPass, 'useTemporalFiltering' ).name( 'temporal filtering' ).onChange( updatePostprocessing );
+
+				function updatePostprocessing( value ) {
+
 					if ( value === 1 ) {
 
 						postProcessing.outputNode = vec4( vec3( ao ), 1 );
@@ -156,18 +182,10 @@
 
 					postProcessing.needsUpdate = true;
 
-				} );
-				gui.add( giPass.sliceCount, 'value', 1, 4 ).step( 1 ).name( 'slice count' );
-				gui.add( giPass.stepCount, 'value', 1, 32 ).step( 1 ).name( 'step count' );
-				gui.add( giPass.radius, 'value', 1, 25 ).name( 'radius' );
-				gui.add( giPass.expFactor, 'value', 1, 3 ).name( 'exp factor' );
-				gui.add( giPass.thickness, 'value', 0.01, 10 ).name( 'thickness' );
-				gui.add( giPass.backfaceLighting, 'value', 0, 1 ).name( 'backface lighting' );
-				gui.add( giPass.aoIntensity, 'value', 0, 4 ).name( 'AO intenstiy' );
-				gui.add( giPass.giIntensity, 'value', 0, 100 ).name( 'GI intenstiy' );
-				gui.add( giPass.useLinearThickness, 'value' ).name( 'use linear thickness' );
-				gui.add( giPass.useScreenSpaceSampling, 'value' ).name( 'screen-space sampling' );
-				gui.add( giPass, 'useTemporalFiltering' ).name( 'temporal filtering' ).onChange( outputDropdown._onChange );
+
+				}
+
+
 			}
 
 			function onWindowResize() {