Add FXAAPass class (#31044)

* Added FXAAPass class

* Updated JSDocs and indentation

* Fixed typo in docs

* Update FXAAPass.js

* Update FXAAPass.js

Fix code style.

---------

Co-authored-by: Michael Herzog <[email protected]>

Author: neilrackett

examples/jsm/postprocessing/FXAAPass.js

@@ -0,0 +1,40 @@
+import { FXAAShader } from '../shaders/FXAAShader.js';
+import { ShaderPass } from './ShaderPass.js';
+
+/**
+ * A pass for applying FXAA.
+ *
+ * ```js
+ * const fxaaPass = new FXAAPass();
+ * composer.addPass( fxaaPass );
+ * ```
+ *
+ * @augments ShaderPass
+ * @three_import import { FXAAPass } from 'three/addons/postprocessing/FXAAPass.js';
+ */
+class FXAAPass extends ShaderPass {
+
+	/**
+	 * Constructs a new FXAA pass.
+	 */
+	constructor() {
+
+		super( FXAAShader );
+
+	}
+
+	/**
+	 * Sets the size of the pass.
+	 *
+	 * @param {number} width - The width to set.
+	 * @param {number} height - The height to set.
+	 */
+	setSize( width, height ) {
+
+		this.material.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
+
+	}
+
+}
+
+export { FXAAPass };

examples/webgl_postprocessing_fxaa.html

@@ -50,7 +50,7 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
+			import { FXAAPass } from 'three/addons/postprocessing/FXAAPass.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer, controls, container;
@@ -119,7 +119,7 @@
 
 				//
 
-				fxaaPass = new ShaderPass( FXAAShader );
+				fxaaPass = new FXAAPass();
 
 				const outputPass = new OutputPass();
 
@@ -129,11 +129,6 @@
 
 				//
 
-				const pixelRatio = renderer.getPixelRatio();
-
-				fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( container.offsetWidth * pixelRatio );
-				fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( container.offsetHeight * pixelRatio );
-
 				composer2 = new EffectComposer( renderer );
 				composer2.addPass( renderPass );
 				composer2.addPass( outputPass );
@@ -157,11 +152,6 @@
 				composer1.setSize( container.offsetWidth, container.offsetHeight );
 				composer2.setSize( container.offsetWidth, container.offsetHeight );
 
-				const pixelRatio = renderer.getPixelRatio();
-
-				fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( container.offsetWidth * pixelRatio );
-				fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( container.offsetHeight * pixelRatio );
-
 			}
 
 			function animate() {