Examples: Improve AA approach in WebGPU water demo. (#31354)

Author: Mugen87

examples/webgpu_water.html

@@ -30,8 +30,9 @@
 
 			import * as THREE from 'three';
 
-			import { pass, mrt, output, emissive, color, screenUV } from 'three/tsl';
+			import { pass, mrt, output, emissive, renderOutput } from 'three/tsl';
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
+			import { fxaa } from 'three/addons/tsl/display/FXAANode.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -59,7 +60,7 @@
 
 				const loader = new UltraHDRLoader();
 				loader.setDataType( THREE.HalfFloatType );
-				loader.load( `textures/equirectangular/moonless_golf_2k.hdr.jpg`, function ( texture ) {
+				loader.load( 'textures/equirectangular/moonless_golf_2k.hdr.jpg', function ( texture ) {
 
 					texture.mapping = THREE.EquirectangularReflectionMapping;
 					texture.needsUpdate = true;
@@ -163,7 +164,7 @@
 
 				// renderer
 
-				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setAnimationLoop( animate );
@@ -181,12 +182,15 @@
 					emissive
 				} ) );
 
-				const outputPass = scenePass.getTextureNode();
+				const beautyPass = scenePass.getTextureNode();
 				const emissivePass = scenePass.getTextureNode( 'emissive' );
 
 				const bloomPass = bloom( emissivePass, 2 );
 
-				postProcessing.outputNode = outputPass.add( bloomPass );
+				const outputPass = renderOutput( beautyPass.add( bloomPass ) );
+
+				const fxaaPass = fxaa( outputPass );
+				postProcessing.outputNode = fxaaPass;
 
 				// gui
 
@@ -222,7 +226,7 @@
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
-				controls.target.set( 0, 0, -5 );
+				controls.target.set( 0, 0, - 5 );
 				controls.update();
 
 				//