WebGLRenderer: Add outputBufferType and setEffects() (#32461)

Author: mrdoob

examples/jsm/postprocessing/OutputPass.js

@@ -39,6 +39,15 @@ class OutputPass extends Pass {
 
 		super();
 
+		/**
+		 * This flag indicates that this is an output pass.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isOutputPass = true;
+
 		/**
 		 * The pass uniforms.
 		 *

examples/jsm/postprocessing/RenderPass.js

@@ -93,6 +93,16 @@ class RenderPass extends Pass {
 		 * @default false
 		 */
 		this.needsSwap = false;
+
+		/**
+		 * This flag indicates that this pass renders the scene itself.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isRenderPass = true;
+
 		this._oldClearColor = new Color();
 
 	}

examples/screenshots/webgl_loader_ldraw.jpg

@@ -81,7 +81,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 );

examples/screenshots/webxr_xr_controls_transform.jpg

@@ -35,12 +35,10 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 			import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
 
-			let composer, camera, scene, renderer;
+			let camera, scene, renderer;
 			let gui, dirLight, pointLight, controls, bloomPass, taaPass;
 			let ready = false;
 
@@ -53,7 +51,7 @@
 				metalness: 1.0,
 				opacity: 0.4,
 				threshold: 0,
-				strength: 0.08,
+				strength: 0.007,
 				radius: 0.0,
 				postProcess: false
 			};
@@ -69,7 +67,7 @@
 
 				scene = new THREE.Scene();
 
-				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 );
@@ -79,6 +77,14 @@
 				renderer.shadowMap.type = THREE.VSMShadowMap;
 				container.appendChild( renderer.domElement );
 
+				taaPass = new TAARenderPass( scene, camera );
+				taaPass.sampleLevel = 2;
+
+				bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
+				bloomPass.threshold = setting.threshold;
+				bloomPass.strength = setting.strength;
+				bloomPass.radius = setting.radius;
+
 				new HDRLoader()
 					.setPath( 'textures/equirectangular/' )
 					.load( 'lobe.hdr', function ( texture ) {
@@ -213,32 +219,11 @@
 
 				if ( b ) {
 
-					if ( composer ) return;
-
-					bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
-					bloomPass.threshold = setting.threshold;
-					bloomPass.strength = setting.strength;
-					bloomPass.radius = setting.radius;
-
-					taaPass = new TAARenderPass( scene, camera );
-					taaPass.sampleLevel = 2;
-					taaPass.unbiased = false;
-
-					composer = new EffectComposer( renderer );
-					composer.setPixelRatio( window.devicePixelRatio );
-					composer.setSize( window.innerWidth, window.innerHeight );
-
-					composer.addPass( taaPass );
-					composer.addPass( bloomPass );
-					composer.addPass( new OutputPass() );
+					renderer.setEffects( [ taaPass, bloomPass ] );
 
 				} else {
 
-					if ( ! composer ) return;
-					composer.dispose();
-					composer = null;
-					bloomPass = null;
-					taaPass = null;
+					renderer.setEffects( null );
 
 				}
 
@@ -255,7 +240,7 @@
 
 				gui.add( setting, 'postProcess' ).onChange( postProcess );
 				gui.add( setting, 'threshold', 0, 1, 0.01 ).onChange( upBloom );
-				gui.add( setting, 'strength', 0, 3, 0.01 ).onChange( upBloom );
+				gui.add( setting, 'strength', 0, 0.1, 0.001 ).onChange( upBloom );
 				gui.add( setting, 'radius', 0, 1, 0.01 ).onChange( upBloom );
 
 			}
@@ -306,11 +291,6 @@
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
 				renderer.setSize( width, height );
-				if ( composer ) {
-
-					composer.setSize( width, height );
-
-				}
 
 			}
 
@@ -322,8 +302,7 @@
 
 				TWEEN.update();
 
-				if ( composer ) composer.render();
-				else renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 				if ( ready ) getTime();
 

examples/webgl_loader_ldraw.html

@@ -27,9 +27,11 @@
 			import { TransformControls } from 'three/addons/controls/TransformControls.js';
 			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
+			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
 
 			let container;
 			let camera, scene, renderer;
+			let bloomPass;
 			let controller1, controller2, line;
 			let controllerGrip1, controllerGrip2;
 
@@ -110,14 +112,20 @@
 
 				//
 
-				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 );
 				renderer.shadowMap.enabled = true;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
+				// post-processing
+
+				bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
+				renderer.setEffects( [ bloomPass ] );
+
 				document.body.appendChild( XRButton.createButton( renderer ) );
 
 				// controllers