Examples: Visualize normal as color in inspector `webgpu_postprocessing_ao` (#32141)

* fix debug view: normal

* move inspector AO to `aoPass.r`

---------

Co-authored-by: sunag <sunagbrasil@gmail.com>

examples/webgpu_postprocessing_ao.html

@@ -36,7 +36,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { pass, mrt, output, normalView, velocity, vec3, vec4 } from 'three/tsl';
+			import { pass, mrt, output, normalView, velocity, vec3, vec4, directionToColor } from 'three/tsl';
 			import { ao } from 'three/addons/tsl/display/GTAONode.js';
 			import { traa } from 'three/addons/tsl/display/TRAANode.js';
 
@@ -114,15 +114,19 @@
 					return scenePass.getLinearDepthNode();
 
 				} );
-				const scenePassNormal = scenePass.getTextureNode( 'normal' ).toInspector( 'Normal' );
+				const scenePassNormal = scenePass.getTextureNode( 'normal' ).toInspector( 'Normal', () => {
+
+					return directionToColor( scenePassNormal.sample() );
+
+				} );
 				const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).toInspector( 'Velocity' );
 
 				// ao
 
-				aoPass = ao( scenePassDepth, scenePassNormal, camera ).toInspector( 'AO' );
+				aoPass = ao( scenePassDepth, scenePassNormal, camera );
 				aoPass.resolutionScale = 0.5; // running AO in half resolution is often sufficient
 				aoPass.useTemporalFiltering = true;
-				blendPassAO = vec4( scenePassColor.rgb.mul( aoPass.r ), scenePassColor.a ); // the AO is stored only in the red channel
+				blendPassAO = vec4( scenePassColor.rgb.mul( aoPass.r.toInspector( 'AO' ) ), scenePassColor.a ); // the AO is stored only in the red channel
 
 				// traa