Examples: Migrate postprocessing examples to renderer.setEffects().

Replaces EffectComposer-based pipelines with the new setEffects() API in
16 webgl_* examples. Tone mapping and colour-space conversion are handled
automatically, so RenderPass and OutputPass are dropped; scene rendering
uses renderer.render( scene, camera ) in the animation loop.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

examples/webgl_materials_alphahash.html

@@ -25,14 +25,11 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, scene, renderer, controls, stats, mesh, material;
 
-			let composer, renderPass, taaRenderPass, outputPass;
+			let taaRenderPass;
 
 			let needsUpdate = false;
 
@@ -96,7 +93,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -112,18 +109,9 @@
 
 				//
 
-				composer = new EffectComposer( renderer );
-
-				renderPass = new RenderPass( scene, camera );
-				renderPass.enabled = false;
-
 				taaRenderPass = new TAARenderPass( scene, camera );
 
-				outputPass = new OutputPass();
-
-				composer.addPass( renderPass );
-				composer.addPass( taaRenderPass );
-				composer.addPass( outputPass );
+				renderer.setEffects( [ taaRenderPass ] );
 
 				//
 
@@ -144,8 +132,7 @@
 
 				taaFolder.add( params, 'taa' ).name( 'enabled' ).onChange( () => {
 
-					renderPass.enabled = ! params.taa;
-					taaRenderPass.enabled = params.taa;
+					renderer.setEffects( params.taa ? [ taaRenderPass ] : null );
 
 					sampleLevelCtrl.enable( params.taa );
 
@@ -170,7 +157,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
 
 				needsUpdate = true;
 
@@ -212,7 +198,7 @@
 
 				}
 
-				composer.render();
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_video.html

@@ -36,10 +36,7 @@
 
 			import * as THREE from 'three';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let container;
 
@@ -47,8 +44,6 @@
 
 			let video, texture, material, mesh;
 
-			let composer;
-
 			let mouseX = 0;
 			let mouseY = 0;
 
@@ -87,7 +82,7 @@
 				light.position.set( 0.5, 1, 1 ).normalize();
 				scene.add( light );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -159,21 +154,12 @@
 
 				}
 
-				renderer.autoClear = false;
-
 				document.addEventListener( 'mousemove', onDocumentMouseMove );
 
 				// postprocessing
 
-				const renderPass = new RenderPass( scene, camera );
 				const bloomPass = new BloomPass( 1.3 );
-				const outputPass = new OutputPass();
-
-				composer = new EffectComposer( renderer );
-
-				composer.addPass( renderPass );
-				composer.addPass( bloomPass );
-				composer.addPass( outputPass );
+				renderer.setEffects( [ bloomPass ] );
 
 				//
 
@@ -190,7 +176,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -269,8 +254,7 @@
 
 				counter ++;
 
-				renderer.clear();
-				composer.render();
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_afterimage.html

@@ -22,12 +22,9 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, scene, renderer, composer;
+			let camera, scene, renderer;
 			let mesh;
 
 			let afterimagePass;
@@ -42,7 +39,7 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -61,14 +58,8 @@
 
 				// postprocessing
 
-				composer = new EffectComposer( renderer );
-				composer.addPass( new RenderPass( scene, camera ) );
-
 				afterimagePass = new AfterimagePass();
-				composer.addPass( afterimagePass );
-
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+				renderer.setEffects( [ afterimagePass ] );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -84,7 +75,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -95,8 +85,7 @@
 
 				afterimagePass.enabled = params.enable;
 
-				composer.render();
-
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_dof.html

@@ -29,10 +29,7 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, scene, renderer, stats,
 				singleMaterial, zmaterial,
@@ -48,7 +45,7 @@
 
 			const materials = [], objects = [];
 
-			const postprocessing = {};
+			let bokehPass;
 
 			init();
 
@@ -62,7 +59,7 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				renderer.setAnimationLoop( animate );
@@ -136,8 +133,6 @@
 
 				initPostprocessing();
 
-				renderer.autoClear = false;
-
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
@@ -156,9 +151,9 @@
 
 				const matChanger = function ( ) {
 
-					postprocessing.bokeh.uniforms[ 'focus' ].value = effectController.focus;
-					postprocessing.bokeh.uniforms[ 'aperture' ].value = effectController.aperture * 0.00001;
-					postprocessing.bokeh.uniforms[ 'maxblur' ].value = effectController.maxblur;
+					bokehPass.uniforms[ 'focus' ].value = effectController.focus;
+					bokehPass.uniforms[ 'aperture' ].value = effectController.aperture * 0.00001;
+					bokehPass.uniforms[ 'maxblur' ].value = effectController.maxblur;
 
 				};
 
@@ -193,30 +188,18 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				postprocessing.composer.setSize( width, height );
 
 			}
 
 			function initPostprocessing() {
 
-				const renderPass = new RenderPass( scene, camera );
-
-				const bokehPass = new BokehPass( scene, camera, {
+				bokehPass = new BokehPass( scene, camera, {
 					focus: 1.0,
 					aperture: 0.025,
 					maxblur: 0.01
 				} );
 
-				const outputPass = new OutputPass();
-
-				const composer = new EffectComposer( renderer );
-
-				composer.addPass( renderPass );
-				composer.addPass( bokehPass );
-				composer.addPass( outputPass );
-
-				postprocessing.composer = composer;
-				postprocessing.bokeh = bokehPass;
+				renderer.setEffects( [ bokehPass ] );
 
 			}
 
@@ -248,7 +231,7 @@
 
 				}
 
-				postprocessing.composer.render( 0.1 );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_glitch.html

@@ -33,12 +33,9 @@
 
 			import * as THREE from 'three';
 
-			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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, scene, renderer, composer;
+			let camera, scene, renderer;
 			let object, light;
 
 			let glitchPass;
@@ -62,7 +59,7 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -113,14 +110,8 @@
 
 				// postprocessing
 
-				composer = new EffectComposer( renderer );
-				composer.addPass( new RenderPass( scene, camera ) );
-
 				glitchPass = new GlitchPass();
-				composer.addPass( glitchPass );
-
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+				renderer.setEffects( [ glitchPass ] );
 
 
 				//
@@ -140,8 +131,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
-
 
 			}
 
@@ -150,7 +139,7 @@
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;
 
-				composer.render();
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_gtao.html

@@ -38,12 +38,9 @@
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { GTAOPass } from 'three/addons/postprocessing/GTAOPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, scene, renderer, composer, controls, timer, stats, mixer;
+			let camera, scene, renderer, controls, timer, stats, mixer;
 
 			init();
 
@@ -64,7 +61,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
@@ -87,17 +84,9 @@
 				const width = window.innerWidth;
 				const height = window.innerHeight;
 
-				composer = new EffectComposer( renderer );
-
-				const renderPass = new RenderPass( scene, camera );
-				composer.addPass( renderPass );
-
 				const gtaoPass = new GTAOPass( scene, camera, width, height );
 				gtaoPass.output = GTAOPass.OUTPUT.Denoise;
-				composer.addPass( gtaoPass );
-
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+				renderer.setEffects( [ gtaoPass ] );
 
 				//
 
@@ -181,7 +170,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				composer.setSize( width, height );
 
 			}
 
@@ -200,7 +188,7 @@
 				controls.update();
 
 				stats.begin();
-				composer.render();
+				renderer.render( scene, camera );
 				stats.end();
 
 			}

examples/webgl_postprocessing_pixel.html

@@ -30,12 +30,10 @@
 		import * as THREE from 'three';
 
 		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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-		let camera, scene, renderer, composer, crystalMesh, timer;
+		let camera, scene, renderer, crystalMesh, timer;
 		let gui, params;
 
 		init();
@@ -54,19 +52,15 @@
 			timer = new THREE.Timer();
 			timer.connect( document );
 
-			renderer = new THREE.WebGLRenderer();
+			renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 			renderer.shadowMap.enabled = true;
 			//renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setAnimationLoop( animate );
 			document.body.appendChild( renderer.domElement );
 
-			composer = new EffectComposer( renderer );
 			const renderPixelatedPass = new RenderPixelatedPass( 6, scene, camera );
-			composer.addPass( renderPixelatedPass );
-
-			const outputPass = new OutputPass();
-			composer.addPass( outputPass );
+			renderer.setEffects( [ renderPixelatedPass ] );
 
 			window.addEventListener( 'resize', onWindowResize );
 
@@ -167,7 +161,6 @@
 			camera.updateProjectionMatrix();
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			composer.setSize( window.innerWidth, window.innerHeight );
 
 		}
 
@@ -199,7 +192,7 @@
 
 			}
 
-			composer.render();
+			renderer.render( scene, camera );
 
 		}
 

examples/webgl_postprocessing_rgb_halftone.html

@@ -29,21 +29,19 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
 
-			let renderer, timer, camera, stats;
+			let renderer, timer, camera, scene, stats;
 
 			const rotationSpeed = Math.PI / 64;
 
-			let composer, group;
+			let group;
 
 			init();
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -66,7 +64,7 @@
 
 				// scene
 
-				const scene = new THREE.Scene();
+				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x444444 );
 
 				group = new THREE.Group();
@@ -119,8 +117,6 @@
 
 				// post-processing
 
-				composer = new EffectComposer( renderer );
-				const renderPass = new RenderPass( scene, camera );
 				const params = {
 					shape: 1,
 					radius: 4,
@@ -134,14 +130,11 @@
 					disable: false
 				};
 				const halftonePass = new HalftonePass( params );
-				composer.addPass( renderPass );
-				composer.addPass( halftonePass );
+				renderer.setEffects( [ halftonePass ] );
 
 				window.onresize = function () {
 
-					// resize composer
 					renderer.setSize( window.innerWidth, window.innerHeight );
-					composer.setSize( window.innerWidth, window.innerHeight );
 					camera.aspect = window.innerWidth / window.innerHeight;
 					camera.updateProjectionMatrix();
 
@@ -199,7 +192,7 @@
 				const delta = timer.getDelta();
 				stats.update();
 				group.rotation.y += delta * rotationSpeed;
-				composer.render( delta );
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_sao.html

@@ -28,14 +28,11 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let container, stats;
 			let camera, scene, renderer;
-			let composer, renderPass, saoPass;
+			let saoPass;
 			let group;
 
 			init();
@@ -48,7 +45,7 @@
 				const width = window.innerWidth;
 				const height = window.innerHeight;
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				renderer.setAnimationLoop( animate );
@@ -117,13 +114,8 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				composer = new EffectComposer( renderer );
-				renderPass = new RenderPass( scene, camera );
-				composer.addPass( renderPass );
 				saoPass = new SAOPass( scene, camera );
-				composer.addPass( saoPass );
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+				renderer.setEffects( [ saoPass ] );
 
 				// Init gui
 				const gui = new GUI();
@@ -160,9 +152,6 @@
 				camera.updateProjectionMatrix();
 				renderer.setSize( width, height );
 
-				composer.setSize( width, height );
-
-
 			}
 
 			function animate() {
@@ -179,7 +168,7 @@
 				group.rotation.x = timer * 0.0002;
 				group.rotation.y = timer * 0.0001;
 
-				composer.render();
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_smaa.html

@@ -29,12 +29,9 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, scene, renderer, composer, stats, smaaPass;
+			let camera, scene, renderer, stats, smaaPass;
 
 			const params = {
 				enabled: true,
@@ -48,7 +45,7 @@
 
 				const container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -83,14 +80,8 @@
 
 				// postprocessing
 
-				composer = new EffectComposer( renderer );
-				composer.addPass( new RenderPass( scene, camera ) );
-
 				smaaPass = new SMAAPass();
-				composer.addPass( smaaPass );
-
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+				renderer.setEffects( [ smaaPass ] );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -113,7 +104,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				composer.setSize( width, height );
 
 			}
 
@@ -136,7 +126,7 @@
 
 				smaaPass.enabled = params.enabled;
 
-				composer.render();
+				renderer.render( scene, camera );
 
 				stats.end();
 

examples/webgl_postprocessing_sobel.html

@@ -30,16 +30,14 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.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 { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
 			import { SobelOperatorShader } from 'three/addons/shaders/SobelOperatorShader.js';
 
-			let camera, scene, renderer, composer;
+			let camera, scene, renderer;
 
-			let effectSobel;
+			let effectGrayScale, effectSobel;
 
 			const params = {
 				enable: true
@@ -76,7 +74,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -84,14 +82,9 @@
 
 				// postprocessing
 
-				composer = new EffectComposer( renderer );
-				const renderPass = new RenderPass( scene, camera );
-				composer.addPass( renderPass );
-
 				// color to grayscale conversion
 
-				const effectGrayScale = new ShaderPass( LuminosityShader );
-				composer.addPass( effectGrayScale );
+				effectGrayScale = new ShaderPass( LuminosityShader );
 
 				// you might want to use a gaussian blur filter before
 				// the next pass to improve the result of the Sobel operator
@@ -101,7 +94,8 @@
 				effectSobel = new ShaderPass( SobelOperatorShader );
 				effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
 				effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
-				composer.addPass( effectSobel );
+
+				renderer.setEffects( [ effectGrayScale, effectSobel ] );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
@@ -110,7 +104,11 @@
 
 				const gui = new GUI();
 
-				gui.add( params, 'enable' );
+				gui.add( params, 'enable' ).onChange( ( value ) => {
+
+					renderer.setEffects( value ? [ effectGrayScale, effectSobel ] : null );
+
+				} );
 				gui.open();
 
 				//
@@ -125,7 +123,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
 
 				effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
 				effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
@@ -134,15 +131,7 @@
 
 			function animate() {
 
-				if ( params.enable === true ) {
-
-					composer.render();
-
-				} else {
-
-					renderer.render( scene, camera );
-
-				}
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_ssaa.html

@@ -31,13 +31,12 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let scene, renderer, composer;
+			let scene, renderer;
 			let cameraP, ssaaRenderPassP;
 			let cameraO, ssaaRenderPassO;
+			let activePass;
 			let gui, stats;
 
 			const params = {
@@ -89,7 +88,7 @@
 				const aspect = width / height;
 				const devicePixelRatio = window.devicePixelRatio || 1;
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( devicePixelRatio );
 				renderer.setSize( width, height );
 				renderer.setAnimationLoop( animate );
@@ -169,14 +168,11 @@
 
 				// postprocessing
 
-				composer = new EffectComposer( renderer );
-				composer.setPixelRatio( 1 ); // ensure pixel ratio is always 1 for performance reasons
 				ssaaRenderPassP = new SSAARenderPass( scene, cameraP );
-				composer.addPass( ssaaRenderPassP );
 				ssaaRenderPassO = new SSAARenderPass( scene, cameraO );
-				composer.addPass( ssaaRenderPassO );
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+
+				activePass = ssaaRenderPassP;
+				renderer.setEffects( [ activePass ] );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -199,7 +195,6 @@
 				cameraO.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				composer.setSize( width, height );
 
 			}
 
@@ -238,12 +233,19 @@
 				ssaaRenderPassP.sampleLevel = ssaaRenderPassO.sampleLevel = params.sampleLevel;
 				ssaaRenderPassP.unbiased = ssaaRenderPassO.unbiased = params.unbiased;
 
-				ssaaRenderPassP.enabled = ( params.camera === 'perspective' );
-				ssaaRenderPassO.enabled = ( params.camera === 'orthographic' );
+				const nextPass = params.camera === 'perspective' ? ssaaRenderPassP : ssaaRenderPassO;
+				const activeCamera = params.camera === 'perspective' ? cameraP : cameraO;
+
+				if ( nextPass !== activePass ) {
+
+					activePass = nextPass;
+					renderer.setEffects( [ activePass ] );
+
+				}
 
 				cameraP.view.offsetX = params.viewOffsetX;
 
-				composer.render();
+				renderer.render( scene, activeCamera );
 
 				stats.end();
 

examples/webgl_postprocessing_ssao.html

@@ -32,14 +32,10 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let container, stats;
 			let camera, scene, renderer;
-			let composer;
 			let group;
 
 			init();
@@ -49,7 +45,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
@@ -100,16 +96,8 @@
 				const width = window.innerWidth;
 				const height = window.innerHeight;
 
-				composer = new EffectComposer( renderer );
-
-				const renderPass = new RenderPass( scene, camera );
-				composer.addPass( renderPass );
-
 				const ssaoPass = new SSAOPass( scene, camera, width, height );
-				composer.addPass( ssaoPass );
-
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+				renderer.setEffects( [ ssaoPass ] );
 
 				// Init gui
 				const gui = new GUI();
@@ -143,7 +131,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				composer.setSize( width, height );
 
 			}
 
@@ -161,7 +148,7 @@
 				group.rotation.x = timer * 0.0002;
 				group.rotation.y = timer * 0.0001;
 
-				composer.render();
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_postprocessing_taa.html

@@ -32,12 +32,9 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, scene, renderer, composer, taaRenderPass, renderPass;
+			let camera, scene, renderer, taaRenderPass;
 			let gui, stats;
 			let index = 0;
 
@@ -60,8 +57,7 @@
 
 					if ( taaRenderPass ) {
 
-						taaRenderPass.enabled = ( param.TAAEnabled === '1' );
-						renderPass.enabled = ( param.TAAEnabled !== '1' );
+						renderer.setEffects( param.TAAEnabled === '1' ? [ taaRenderPass ] : null );
 
 					}
 
@@ -92,7 +88,7 @@
 
 				const container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -130,18 +126,10 @@
 
 				// postprocessing
 
-				composer = new EffectComposer( renderer );
-
 				taaRenderPass = new TAARenderPass( scene, camera );
 				taaRenderPass.unbiased = false;
-				composer.addPass( taaRenderPass );
-
-				renderPass = new RenderPass( scene, camera );
-				renderPass.enabled = false;
-				composer.addPass( renderPass );
 
-				const outputPass = new OutputPass();
-				composer.addPass( outputPass );
+				renderer.setEffects( [ taaRenderPass ] );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -156,7 +144,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				composer.setSize( width, height );
 
 			}
 
@@ -183,7 +170,7 @@
 
 				}
 
-				composer.render();
+				renderer.render( scene, camera );
 
 				stats.update();
 

examples/webgl_postprocessing_unreal_bloom.html

@@ -42,13 +42,10 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			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 { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, stats;
-			let composer, renderer, mixer, timer;
+			let camera, scene, stats;
+			let renderer, mixer, timer;
 
 			const params = {
 				threshold: 0,
@@ -66,7 +63,7 @@
 				timer = new THREE.Timer();
 				timer.connect( document );
 
-				const scene = new THREE.Scene();
+				scene = new THREE.Scene();
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( - 5, 2.5, - 3.5 );
@@ -89,7 +86,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -98,19 +95,12 @@
 
 				//
 
-				const renderScene = new RenderPass( scene, camera );
-
 				const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
 				bloomPass.threshold = params.threshold;
 				bloomPass.strength = params.strength;
 				bloomPass.radius = params.radius;
 
-				const outputPass = new OutputPass();
-
-				composer = new EffectComposer( renderer );
-				composer.addPass( renderScene );
-				composer.addPass( bloomPass );
-				composer.addPass( outputPass );
+				renderer.setEffects( [ bloomPass ] );
 
 				//
 
@@ -169,7 +159,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				composer.setSize( width, height );
 
 			}
 
@@ -183,7 +172,7 @@
 
 				stats.update();
 
-				composer.render();
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_shader_lava.html

@@ -87,12 +87,9 @@
 
 			import * as THREE from 'three';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, renderer, composer, timer;
+			let camera, scene, renderer, timer;
 
 			let uniforms, mesh;
 
@@ -105,7 +102,7 @@
 				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 4;
 
-				const scene = new THREE.Scene();
+				scene = new THREE.Scene();
 
 				timer = new THREE.Timer();
 				timer.connect( document );
@@ -147,24 +144,16 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
-				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
 				//
 
-				const renderModel = new RenderPass( scene, camera );
 				const effectBloom = new BloomPass( 1.25 );
-				const outputPass = new OutputPass();
-
-				composer = new EffectComposer( renderer );
-
-				composer.addPass( renderModel );
-				composer.addPass( effectBloom );
-				composer.addPass( outputPass );
+				renderer.setEffects( [ effectBloom ] );
 
 				//
 
@@ -178,7 +167,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -195,8 +183,7 @@
 				mesh.rotation.y += 0.0125 * delta;
 				mesh.rotation.x += 0.05 * delta;
 
-				renderer.clear();
-				composer.render( 0.01 );
+				renderer.render( scene, camera );
 
 			}