EffectComposer: Use `HalfFloatType` as default. (#26099)

* EffectComposer: Use `HalfFloatType` as default.

* Examples: Update screenshots.

* Examples: Update screenshots.

examples/jsm/postprocessing/AdaptiveToneMappingPass.js

@@ -1,4 +1,5 @@
 import {
+	HalfFloatType,
 	LinearMipmapLinearFilter,
 	MeshBasicMaterial,
 	NoBlending,
@@ -206,17 +207,17 @@ class AdaptiveToneMappingPass extends Pass {
 		}
 
 
-		this.luminanceRT = new WebGLRenderTarget( this.resolution, this.resolution );
+		this.luminanceRT = new WebGLRenderTarget( this.resolution, this.resolution, { type: HalfFloatType } );
 		this.luminanceRT.texture.name = 'AdaptiveToneMappingPass.l';
 		this.luminanceRT.texture.generateMipmaps = false;
 
-		this.previousLuminanceRT = new WebGLRenderTarget( this.resolution, this.resolution );
+		this.previousLuminanceRT = new WebGLRenderTarget( this.resolution, this.resolution, { type: HalfFloatType } );
 		this.previousLuminanceRT.texture.name = 'AdaptiveToneMappingPass.pl';
 		this.previousLuminanceRT.texture.generateMipmaps = false;
 
 		// We only need mipmapping for the current luminosity because we want a down-sampled version to sample in our adaptive shader
 
-		const pars = { minFilter: LinearMipmapLinearFilter, generateMipmaps: true };
+		const pars = { minFilter: LinearMipmapLinearFilter, generateMipmaps: true, type: HalfFloatType };
 
 		this.currentLuminanceRT = new WebGLRenderTarget( this.resolution, this.resolution, pars );
 		this.currentLuminanceRT.texture.name = 'AdaptiveToneMappingPass.cl';

examples/jsm/postprocessing/AfterimagePass.js

@@ -1,4 +1,5 @@
 import {
+	HalfFloatType,
 	MeshBasicMaterial,
 	NearestFilter,
 	ShaderMaterial,
@@ -22,10 +23,12 @@ class AfterimagePass extends Pass {
 
 		this.textureComp = new WebGLRenderTarget( window.innerWidth, window.innerHeight, {
 			magFilter: NearestFilter,
+			type: HalfFloatType
 		} );
 
 		this.textureOld = new WebGLRenderTarget( window.innerWidth, window.innerHeight, {
 			magFilter: NearestFilter,
+			type: HalfFloatType
 		} );
 
 		this.compFsMaterial = new ShaderMaterial( {

examples/jsm/postprocessing/BloomPass.js

@@ -1,5 +1,6 @@
 import {
 	AdditiveBlending,
+	HalfFloatType,
 	ShaderMaterial,
 	UniformsUtils,
 	Vector2,
@@ -16,9 +17,9 @@ class BloomPass extends Pass {
 
 		// render targets
 
-		this.renderTargetX = new WebGLRenderTarget(); // will be resized later
+		this.renderTargetX = new WebGLRenderTarget( 1, 1, { type: HalfFloatType } ); // will be resized later
 		this.renderTargetX.texture.name = 'BloomPass.x';
-		this.renderTargetY = new WebGLRenderTarget(); // will be resized later
+		this.renderTargetY = new WebGLRenderTarget( 1, 1, { type: HalfFloatType } ); // will be resized later
 		this.renderTargetY.texture.name = 'BloomPass.y';
 
 		// combine material

examples/jsm/postprocessing/BokehPass.js

@@ -1,5 +1,6 @@
 import {
 	Color,
+	HalfFloatType,
 	MeshDepthMaterial,
 	NearestFilter,
 	NoBlending,
@@ -33,7 +34,8 @@ class BokehPass extends Pass {
 
 		this.renderTargetDepth = new WebGLRenderTarget( 1, 1, { // will be resized later
 			minFilter: NearestFilter,
-			magFilter: NearestFilter
+			magFilter: NearestFilter,
+			type: HalfFloatType
 		} );
 
 		this.renderTargetDepth.texture.name = 'BokehPass.depth';

examples/jsm/postprocessing/EffectComposer.js

@@ -1,5 +1,6 @@
 import {
 	Clock,
+	HalfFloatType,
 	Vector2,
 	WebGLRenderTarget
 } from 'three';
@@ -22,7 +23,7 @@ class EffectComposer {
 			this._width = size.width;
 			this._height = size.height;
 
-			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio );
+			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType } );
 			renderTarget.texture.name = 'EffectComposer.rt1';
 
 		} else {

examples/jsm/postprocessing/OutlinePass.js

@@ -2,6 +2,7 @@ import {
 	AdditiveBlending,
 	Color,
 	DoubleSide,
+	HalfFloatType,
 	Matrix4,
 	MeshDepthMaterial,
 	NoBlending,
@@ -54,26 +55,26 @@ class OutlinePass extends Pass {
 		this.prepareMaskMaterial.side = DoubleSide;
 		this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ( this.prepareMaskMaterial.fragmentShader, this.renderCamera );
 
-		this.renderTargetDepthBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y );
+		this.renderTargetDepthBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y, { type: HalfFloatType } );
 		this.renderTargetDepthBuffer.texture.name = 'OutlinePass.depth';
 		this.renderTargetDepthBuffer.texture.generateMipmaps = false;
 
-		this.renderTargetMaskDownSampleBuffer = new WebGLRenderTarget( resx, resy );
+		this.renderTargetMaskDownSampleBuffer = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 		this.renderTargetMaskDownSampleBuffer.texture.name = 'OutlinePass.depthDownSample';
 		this.renderTargetMaskDownSampleBuffer.texture.generateMipmaps = false;
 
-		this.renderTargetBlurBuffer1 = new WebGLRenderTarget( resx, resy );
+		this.renderTargetBlurBuffer1 = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 		this.renderTargetBlurBuffer1.texture.name = 'OutlinePass.blur1';
 		this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
-		this.renderTargetBlurBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
+		this.renderTargetBlurBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), { type: HalfFloatType } );
 		this.renderTargetBlurBuffer2.texture.name = 'OutlinePass.blur2';
 		this.renderTargetBlurBuffer2.texture.generateMipmaps = false;
 
 		this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
-		this.renderTargetEdgeBuffer1 = new WebGLRenderTarget( resx, resy );
+		this.renderTargetEdgeBuffer1 = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 		this.renderTargetEdgeBuffer1.texture.name = 'OutlinePass.edge1';
 		this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
-		this.renderTargetEdgeBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
+		this.renderTargetEdgeBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), { type: HalfFloatType } );
 		this.renderTargetEdgeBuffer2.texture.name = 'OutlinePass.edge2';
 		this.renderTargetEdgeBuffer2.texture.generateMipmaps = false;
 

examples/jsm/postprocessing/RenderPixelatedPass.js

@@ -5,7 +5,8 @@ import {
 	Vector2,
 	Vector4,
 	DepthTexture,
-	NearestFilter
+	NearestFilter,
+	HalfFloatType
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 
@@ -32,13 +33,13 @@ class RenderPixelatedPass extends Pass {
 		this.beautyRenderTarget = new WebGLRenderTarget();
 		this.beautyRenderTarget.texture.minFilter = NearestFilter;
 		this.beautyRenderTarget.texture.magFilter = NearestFilter;
+		this.beautyRenderTarget.texture.type = HalfFloatType;
 		this.beautyRenderTarget.depthTexture = new DepthTexture();
 
 		this.normalRenderTarget = new WebGLRenderTarget();
 		this.normalRenderTarget.texture.minFilter = NearestFilter;
 		this.normalRenderTarget.texture.magFilter = NearestFilter;
-
-
+		this.normalRenderTarget.texture.type = HalfFloatType;
 
 	}
 

examples/jsm/postprocessing/SAOPass.js

@@ -5,6 +5,7 @@ import {
 	DepthTexture,
 	DstAlphaFactor,
 	DstColorFactor,
+	HalfFloatType,
 	MeshDepthMaterial,
 	MeshNormalMaterial,
 	NearestFilter,
@@ -62,13 +63,14 @@ class SAOPass extends Pass {
 
 		this.resolution = new Vector2( resolution.x, resolution.y );
 
-		this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y );
+		this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, { type: HalfFloatType } );
 		this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
 		this.beautyRenderTarget = this.saoRenderTarget.clone();
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter
+			magFilter: NearestFilter,
+			type: HalfFloatType
 		} );
 		this.depthRenderTarget = this.normalRenderTarget.clone();
 

examples/jsm/postprocessing/SMAAPass.js

@@ -1,4 +1,5 @@
 import {
+	HalfFloatType,
 	LinearFilter,
 	NearestFilter,
 	ShaderMaterial,
@@ -20,12 +21,14 @@ class SMAAPass extends Pass {
 		// render targets
 
 		this.edgesRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false
+			depthBuffer: false,
+			type: HalfFloatType
 		} );
 		this.edgesRT.texture.name = 'SMAAPass.edges';
 
 		this.weightsRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false
+			depthBuffer: false,
+			type: HalfFloatType
 		} );
 		this.weightsRT.texture.name = 'SMAAPass.weights';
 

examples/jsm/postprocessing/SSAARenderPass.js

@@ -4,6 +4,7 @@ import {
 	AddEquation,
 	SrcAlphaFactor,
 	Color,
+	HalfFloatType,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -87,7 +88,7 @@ class SSAARenderPass extends Pass {
 
 		if ( ! this.sampleRenderTarget ) {
 
-			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height );
+			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType } );
 			this.sampleRenderTarget.texture.name = 'SSAARenderPass.sample';
 
 		}

examples/jsm/postprocessing/SSAOPass.js

@@ -7,6 +7,7 @@ import {
 	DstAlphaFactor,
 	DstColorFactor,
 	FloatType,
+	HalfFloatType,
 	MathUtils,
 	MeshNormalMaterial,
 	NearestFilter,
@@ -65,19 +66,20 @@ class SSAOPass extends Pass {
 		depthTexture.format = DepthStencilFormat;
 		depthTexture.type = UnsignedInt248Type;
 
-		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height );
+		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, { type: HalfFloatType } );
 
 		// normal render target with depth buffer
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
+			type: HalfFloatType,
 			depthTexture: depthTexture
 		} );
 
 		// ssao render target
 
-		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height );
+		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height, { type: HalfFloatType } );
 
 		this.blurRenderTarget = this.ssaoRenderTarget.clone();
 

examples/jsm/postprocessing/SSRPass.js

@@ -162,6 +162,7 @@ class SSRPass extends Pass {
 		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
+			type: HalfFloatType,
 			depthTexture: depthTexture,
 			depthBuffer: true
 		} );
@@ -184,7 +185,8 @@ class SSRPass extends Pass {
 
 		this.metalnessRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter
+			magFilter: NearestFilter,
+			type: HalfFloatType,
 		} );
 
 

examples/jsm/postprocessing/SavePass.js

@@ -1,4 +1,5 @@
 import {
+	HalfFloatType,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -30,7 +31,7 @@ class SavePass extends Pass {
 
 		if ( this.renderTarget === undefined ) {
 
-			this.renderTarget = new WebGLRenderTarget(); // will be resized later
+			this.renderTarget = new WebGLRenderTarget( 1, 1, { type: HalfFloatType } ); // will be resized later
 			this.renderTarget.texture.name = 'SavePass.rt';
 
 		}

examples/jsm/postprocessing/TAARenderPass.js

@@ -1,4 +1,5 @@
 import {
+	HalfFloatType,
 	WebGLRenderTarget
 } from 'three';
 import { SSAARenderPass } from './SSAARenderPass.js';
@@ -41,14 +42,14 @@ class TAARenderPass extends SSAARenderPass {
 
 		if ( this.sampleRenderTarget === undefined ) {
 
-			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
+			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType } );
 			this.sampleRenderTarget.texture.name = 'TAARenderPass.sample';
 
 		}
 
 		if ( this.holdRenderTarget === undefined ) {
 
-			this.holdRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
+			this.holdRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType } );
 			this.holdRenderTarget.texture.name = 'TAARenderPass.hold';
 
 		}

examples/jsm/postprocessing/UnrealBloomPass.js

@@ -1,6 +1,7 @@
 import {
 	AdditiveBlending,
 	Color,
+	HalfFloatType,
 	MeshBasicMaterial,
 	ShaderMaterial,
 	UniformsUtils,
@@ -42,20 +43,20 @@ class UnrealBloomPass extends Pass {
 		let resx = Math.round( this.resolution.x / 2 );
 		let resy = Math.round( this.resolution.y / 2 );
 
-		this.renderTargetBright = new WebGLRenderTarget( resx, resy );
+		this.renderTargetBright = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 		this.renderTargetBright.texture.name = 'UnrealBloomPass.bright';
 		this.renderTargetBright.texture.generateMipmaps = false;
 
 		for ( let i = 0; i < this.nMips; i ++ ) {
 
-			const renderTargetHorizonal = new WebGLRenderTarget( resx, resy );
+			const renderTargetHorizonal = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 
 			renderTargetHorizonal.texture.name = 'UnrealBloomPass.h' + i;
 			renderTargetHorizonal.texture.generateMipmaps = false;
 
 			this.renderTargetsHorizontal.push( renderTargetHorizonal );
 
-			const renderTargetVertical = new WebGLRenderTarget( resx, resy );
+			const renderTargetVertical = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 
 			renderTargetVertical.texture.name = 'UnrealBloomPass.v' + i;
 			renderTargetVertical.texture.generateMipmaps = false;

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 { CopyShader } from 'three/addons/shaders/CopyShader.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let container;
 
@@ -107,6 +107,7 @@
 				} );
 
 				texture = new THREE.VideoTexture( video );
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				//
 
@@ -169,15 +170,15 @@
 
 				// postprocessing
 
-				const renderModel = new RenderPass( scene, camera );
-				const effectBloom = new BloomPass( 1.3 );
-				const effectCopy = new ShaderPass( CopyShader );
+				const renderPass = new RenderPass( scene, camera );
+				const bloomPass = new BloomPass( 1.3 );
+				const outputPass = new ShaderPass( GammaCorrectionShader );
 
 				composer = new EffectComposer( renderer );
 
-				composer.addPass( renderModel );
-				composer.addPass( effectBloom );
-				composer.addPass( effectCopy );
+				composer.addPass( renderPass );
+				composer.addPass( bloomPass );
+				composer.addPass( outputPass );
 
 				//
 

examples/webgl_postprocessing_crossfade.html

@@ -186,7 +186,7 @@
 				const mesh = generateInstancedMesh( geometry, material, 500 );
 				scene.add( mesh );
 
-				this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
+				this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { type: THREE.HalfFloatType } );
 
 				this.render = function ( delta, rtt ) {
 

examples/webgl_postprocessing_dof2.html

@@ -332,8 +332,8 @@
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
-				postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
+				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { type: THREE.HalfFloatType } );
+				postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { type: THREE.HalfFloatType } );
 
 				const bokeh_shader = BokehShader;
 

examples/webgl_postprocessing_godrays.html

@@ -154,7 +154,7 @@
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight );
+				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, { type: THREE.HalfFloatType } );
 
 				// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
 				// investigate further for now.
@@ -163,15 +163,15 @@
 				// I would have this quarter size and use it as one of the ping-pong render
 				// targets but the aliasing causes some temporal flickering
 
-				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight );
-				postprocessing.rtTextureDepthMask = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight );
+				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, { type: THREE.HalfFloatType } );
+				postprocessing.rtTextureDepthMask = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, { type: THREE.HalfFloatType } );
 
 				// The ping-pong render targets can use an adjusted resolution to minimize cost
 
 				const adjustedWidth = renderTargetWidth * godrayRenderTargetResolutionMultiplier;
 				const adjustedHeight = renderTargetHeight * godrayRenderTargetResolutionMultiplier;
-				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight );
-				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight );
+				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight, { type: THREE.HalfFloatType } );
+				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight, { type: THREE.HalfFloatType } );
 
 				// god-ray shaders