Examples: Update from GammaCorrectionShader to OutputPass (#26129)

* GammaCorrectionShader: Deprecate in favor of OutputPass

* Update more examples, remove GammaCorrectionShader deprecation

* Examples: Revert OutputPass in failing examples.

examples/misc_controls_fly.html

@@ -50,8 +50,7 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			const radius = 6371;
 			const tilt = 0.41;
@@ -229,13 +228,13 @@
 
 				const renderModel = new RenderPass( scene, camera );
 				const effectFilm = new FilmPass( 0.35, 0.75, 2048, false );
-				const gammaCorrection = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 
 				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectFilm );
-				composer.addPass( gammaCorrection );
+				composer.addPass( outputPass );
 
 			}
 

examples/webgl2_multisampled_renderbuffers.html

@@ -52,8 +52,7 @@
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 			import WebGL from 'three/addons/capabilities/WebGL.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -142,7 +141,7 @@
 				const renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, { samples: 4 } );
 
 				const renderPass = new RenderPass( scene, camera );
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 
 				//
 

examples/webgl_materials_normalmap.html

@@ -39,7 +39,7 @@
 			import { BleachBypassShader } from 'three/addons/shaders/BleachBypassShader.js';
 			import { ColorCorrectionShader } from 'three/addons/shaders/ColorCorrectionShader.js';
 			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let container, stats, loader;
 
@@ -133,7 +133,7 @@
 
 				const effectBleach = new ShaderPass( BleachBypassShader );
 				const effectColor = new ShaderPass( ColorCorrectionShader );
-				const gammaCorrection = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				effectFXAA = new ShaderPass( FXAAShader );
 
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
@@ -150,7 +150,7 @@
 				composer.addPass( renderModel );
 				composer.addPass( effectBleach );
 				composer.addPass( effectColor );
-				composer.addPass( gammaCorrection );
+				composer.addPass( outputPass );
 				composer.addPass( effectFXAA );
 
 				// EVENTS

examples/webgl_materials_video.html

@@ -44,7 +44,7 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let container;
 
@@ -172,7 +172,7 @@
 
 				const renderPass = new RenderPass( scene, camera );
 				const bloomPass = new BloomPass( 1.3 );
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 
 				composer = new EffectComposer( renderer );
 

examples/webgl_points_dynamic.html

@@ -41,7 +41,7 @@
 			import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
 			import { FocusShader } from 'three/addons/shaders/FocusShader.js';
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, scene, renderer, mesh;
 
@@ -122,7 +122,7 @@
 				effectFocus.uniforms[ 'screenWidth' ].value = window.innerWidth * window.devicePixelRatio;
 				effectFocus.uniforms[ 'screenHeight' ].value = window.innerHeight * window.devicePixelRatio;
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 
 				composer = new EffectComposer( renderer );
 

examples/webgl_postprocessing.html

@@ -31,7 +31,7 @@
 
 			import { RGBShiftShader } from 'three/addons/shaders/RGBShiftShader.js';
 			import { DotScreenShader } from 'three/addons/shaders/DotScreenShader.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, renderer, composer;
 			let object;
@@ -90,7 +90,7 @@
 				effect2.uniforms[ 'amount' ].value = 0.0015;
 				composer.addPass( effect2 );
 
-				const effect3 = new ShaderPass( GammaCorrectionShader );
+				const effect3 = new OutputPass();
 				composer.addPass( effect3 );
 
 				//

examples/webgl_postprocessing_afterimage.html

@@ -30,8 +30,7 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, scene, renderer, composer;
 			let mesh;
@@ -74,7 +73,7 @@
 				afterimagePass = new AfterimagePass();
 				composer.addPass( afterimagePass );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_postprocessing_backgrounds.html

@@ -38,9 +38,8 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { TexturePass } from 'three/addons/postprocessing/TexturePass.js';
 			import { CubeTexturePass } from 'three/addons/postprocessing/CubeTexturePass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { ClearPass } from 'three/addons/postprocessing/ClearPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let scene, renderer, composer;
@@ -187,7 +186,7 @@
 				renderPass.clear = false;
 				composer.addPass( renderPass );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 				const controls = new OrbitControls( cameraP, renderer.domElement );

examples/webgl_postprocessing_dof.html

@@ -36,8 +36,7 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, scene, renderer, stats,
 				singleMaterial, zmaterial,
@@ -212,7 +211,7 @@
 					maxblur: 0.01
 				} );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 
 				const composer = new EffectComposer( renderer );
 

examples/webgl_postprocessing_glitch.html

@@ -40,8 +40,7 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, scene, renderer, composer;
 			let object, light;
@@ -113,7 +112,7 @@
 				glitchPass = new GlitchPass();
 				composer.addPass( glitchPass );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 

examples/webgl_postprocessing_masking.html

@@ -28,11 +28,10 @@
 			import * as THREE from 'three';
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { TexturePass } from 'three/addons/postprocessing/TexturePass.js';
 			import { ClearPass } from 'three/addons/postprocessing/ClearPass.js';
 			import { MaskPass, ClearMaskPass } from 'three/addons/postprocessing/MaskPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, composer, renderer;
 			let box, torus;
@@ -79,7 +78,7 @@
 				const texturePass1 = new TexturePass( texture1 );
 				const texturePass2 = new TexturePass( texture2 );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 
 				const parameters = {
 					stencilBuffer: true

examples/webgl_postprocessing_outline.html

@@ -37,7 +37,7 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
 
 			let container, stats;
@@ -262,8 +262,8 @@
 
 				} );
 
-				const gammaPass = new ShaderPass( GammaCorrectionShader );
-				composer.addPass( gammaPass );
+				const outputPass = new OutputPass();
+				composer.addPass( outputPass );
 
 				effectFXAA = new ShaderPass( FXAAShader );
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );

examples/webgl_postprocessing_pixel.html

@@ -36,8 +36,7 @@
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 		import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 		let camera, scene, renderer, composer, crystalMesh, clock;
@@ -69,7 +68,7 @@
 			const renderPixelatedPass = new RenderPixelatedPass( 6, scene, camera );
 			composer.addPass( renderPixelatedPass );
 
-			const outputPass = new ShaderPass( GammaCorrectionShader );
+			const outputPass = new OutputPass();
 			composer.addPass( outputPass );
 
 			window.addEventListener( 'resize', onWindowResize );

examples/webgl_postprocessing_sao.html

@@ -35,8 +35,7 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let container, stats;
 			let camera, scene, renderer;
@@ -120,7 +119,7 @@
 				composer.addPass( renderPass );
 				saoPass = new SAOPass( scene, camera, false, true );
 				composer.addPass( saoPass );
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 				// Init gui

examples/webgl_postprocessing_smaa.html

@@ -35,8 +35,7 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 
 			let camera, scene, renderer, composer, stats;
@@ -88,7 +87,7 @@
 				const pass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
 				composer.addPass( pass );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_postprocessing_ssaa.html

@@ -36,9 +36,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let scene, renderer, composer;
 			let cameraP, ssaaRenderPassP;
@@ -172,7 +171,7 @@
 				composer.addPass( ssaaRenderPassP );
 				ssaaRenderPassO = new SSAARenderPass( scene, cameraO );
 				composer.addPass( ssaaRenderPassO );
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_postprocessing_ssao.html

@@ -38,8 +38,7 @@
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let container, stats;
 			let camera, scene, renderer;
@@ -103,7 +102,7 @@
 				ssaoPass.kernelRadius = 16;
 				composer.addPass( ssaoPass );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 				// Init gui

examples/webgl_postprocessing_ssr.html

@@ -40,8 +40,7 @@
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 		import { SSRPass } from 'three/addons/postprocessing/SSRPass.js';
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 		import { ReflectorForSSRPass } from 'three/addons/objects/ReflectorForSSRPass.js';
 
 		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
@@ -190,7 +189,7 @@
 			} );
 
 			composer.addPass( ssrPass );
-			composer.addPass( new ShaderPass( GammaCorrectionShader ) );
+			composer.addPass( new OutputPass() );
 
 			// GUI
 

examples/webgl_postprocessing_taa.html

@@ -38,9 +38,8 @@
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, scene, renderer, composer, taaRenderPass, renderPass;
 			let gui, stats;
@@ -145,7 +144,7 @@
 				renderPass.enabled = false;
 				composer.addPass( renderPass );
 
-				const outputPass = new ShaderPass( GammaCorrectionShader );
+				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
 				window.addEventListener( 'resize', onWindowResize );

manual/examples/postprocessing-3dlut-identity.html

@@ -39,7 +39,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
 import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
-import {GammaCorrectionShader} from 'three/addons/shaders/GammaCorrectionShader.js';
+import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
 import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
@@ -249,7 +249,7 @@ function main() {
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
-  const gammaPass = new ShaderPass(GammaCorrectionShader);
+  const outputPass = new OutputPass();
 
   const composer = new EffectComposer(renderer);
 
@@ -257,7 +257,7 @@ function main() {
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
-  composer.addPass(gammaPass);
+  composer.addPass(outputPass);
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-3dlut-w-loader.html

@@ -37,7 +37,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
 import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
-import {GammaCorrectionShader} from 'three/addons/shaders/GammaCorrectionShader.js';
+import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
 import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
@@ -313,7 +313,7 @@ function main() {
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
-  const gammaPass = new ShaderPass(GammaCorrectionShader);
+  const outputPass = new OutputPass();
 
   const composer = new EffectComposer(renderer);
 
@@ -321,7 +321,7 @@ function main() {
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
-  composer.addPass(gammaPass);
+  composer.addPass(outputPass);
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-3dlut.html

@@ -39,7 +39,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
 import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
-import {GammaCorrectionShader} from 'three/addons/shaders/GammaCorrectionShader.js';
+import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
 import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
@@ -315,7 +315,7 @@ function main() {
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
-  const gammaPass = new ShaderPass(GammaCorrectionShader);
+  const outputPass = new OutputPass();
 
   const composer = new EffectComposer(renderer);
 
@@ -323,7 +323,7 @@ function main() {
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
-  composer.addPass(gammaPass);
+  composer.addPass(outputPass);
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;