Examples: Remove more RGBFormat usage. (#23211)

examples/jsm/cameras/CinematicCamera.js

@@ -1,10 +1,8 @@
 import {
-	LinearFilter,
 	Mesh,
 	OrthographicCamera,
 	PerspectiveCamera,
 	PlaneGeometry,
-	RGBFormat,
 	Scene,
 	ShaderMaterial,
 	UniformsUtils,
@@ -125,9 +123,8 @@ class CinematicCamera extends PerspectiveCamera {
 
 			this.postprocessing.scene.add( this.postprocessing.camera );
 
-			const pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat };
-			this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
-			this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+			this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
+			this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
 
 			const bokeh_shader = BokehShader;
 

examples/jsm/modifiers/CurveModifier.js

@@ -1,11 +1,11 @@
 // Original src: https://github.com/zz85/threejs-path-flow
-const BITS = 3;
+const CHANNELS = 4;
 const TEXTURE_WIDTH = 1024;
 const TEXTURE_HEIGHT = 4;
 
 import {
 	DataTexture,
-	RGBFormat,
+	RGBAFormat,
 	FloatType,
 	RepeatWrapping,
 	Mesh,
@@ -22,12 +22,12 @@ import {
  */
 export function initSplineTexture( numberOfCurves = 1 ) {
 
-	const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * BITS );
+	const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
 	const dataTexture = new DataTexture(
 		dataArray,
 		TEXTURE_WIDTH,
 		TEXTURE_HEIGHT * numberOfCurves,
-		RGBFormat,
+		RGBAFormat,
 		FloatType
 	);
 
@@ -80,10 +80,11 @@ function setTextureValue( texture, index, x, y, z, o ) {
 
 	const image = texture.image;
 	const { data } = image;
-	const i = BITS * TEXTURE_WIDTH * o; // Row Offset
-	data[ index * BITS + i + 0 ] = x;
-	data[ index * BITS + i + 1 ] = y;
-	data[ index * BITS + i + 2 ] = z;
+	const i = CHANNELS * TEXTURE_WIDTH * o; // Row Offset
+	data[ index * CHANNELS + i + 0 ] = x;
+	data[ index * CHANNELS + i + 1 ] = y;
+	data[ index * CHANNELS + i + 2 ] = z;
+	data[ index * CHANNELS + i + 3 ] = 1;
 
 }
 

examples/jsm/objects/ReflectorForSSRPass.js

@@ -1,11 +1,8 @@
 import {
 	Color,
-	LinearFilter,
-	MathUtils,
 	Matrix4,
 	Mesh,
 	PerspectiveCamera,
-	RGBFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	Vector2,
@@ -104,20 +101,11 @@ class ReflectorForSSRPass extends Mesh {
 		}
 
 		const parameters = {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
-			format: RGBFormat,
 			depthTexture: useDepthTexture ? depthTexture : null,
 		};
 
 		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, parameters );
 
-		if ( ! MathUtils.isPowerOfTwo( textureWidth ) || ! MathUtils.isPowerOfTwo( textureHeight ) ) {
-
-			renderTarget.texture.generateMipmaps = false;
-
-		}
-
 		const material = new ShaderMaterial( {
 			transparent: useDepthTexture,
 			defines: Object.assign( {}, ReflectorForSSRPass.ReflectorShader.defines, {

examples/jsm/postprocessing/SMAAPass.js

@@ -1,8 +1,6 @@
 import {
 	LinearFilter,
 	NearestFilter,
-	RGBAFormat,
-	RGBFormat,
 	ShaderMaterial,
 	Texture,
 	UniformsUtils,
@@ -22,18 +20,12 @@ class SMAAPass extends Pass {
 		// render targets
 
 		this.edgesRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false,
-			generateMipmaps: false,
-			minFilter: LinearFilter,
-			format: RGBFormat
+			depthBuffer: false
 		} );
 		this.edgesRT.texture.name = 'SMAAPass.edges';
 
 		this.weightsRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false,
-			generateMipmaps: false,
-			minFilter: LinearFilter,
-			format: RGBAFormat
+			depthBuffer: false
 		} );
 		this.weightsRT.texture.name = 'SMAAPass.weights';
 
@@ -52,7 +44,6 @@ class SMAAPass extends Pass {
 		this.areaTexture = new Texture();
 		this.areaTexture.name = 'SMAAPass.area';
 		this.areaTexture.image = areaTextureImage;
-		this.areaTexture.format = RGBFormat;
 		this.areaTexture.minFilter = LinearFilter;
 		this.areaTexture.generateMipmaps = false;
 		this.areaTexture.flipY = false;

examples/jsm/postprocessing/SavePass.js

@@ -1,6 +1,4 @@
 import {
-	LinearFilter,
-	RGBFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -34,7 +32,7 @@ class SavePass extends Pass {
 
 		if ( this.renderTarget === undefined ) {
 
-			this.renderTarget = new WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat } );
+			this.renderTarget = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
 			this.renderTarget.texture.name = 'SavePass.rt';
 
 		}

examples/misc_exporter_gltf.html

@@ -146,19 +146,25 @@
 				document.body.appendChild( container );
 
 				// Make linear gradient texture
-				const data = new Uint8ClampedArray( 100 * 100 * 3 );
+
+				const data = new Uint8ClampedArray( 100 * 100 * 4 );
+
 				for ( let y = 0; y < 100; y ++ ) {
 
 					for ( let x = 0; x < 100; x ++ ) {
 
-						data[ 3 * ( 100 * y + x ) ] = Math.round( 255 * y / 99 );
-						data[ 3 * ( 100 * y + x ) + 1 ] = Math.round( 255 - 255 * y / 99 );
+						const stride = 4 * ( 100 * y + x );
+
+						data[ stride ] = Math.round( 255 * y / 99 );
+						data[ stride + 1 ] = Math.round( 255 - 255 * y / 99 );
+						data[ stride + 2 ] = 0;
+						data[ stride + 3 ] = 1;
 
 					}
 
 				}
 
-				const gradientTexture = new THREE.DataTexture( data, 100, 100, THREE.RGBFormat );
+				const gradientTexture = new THREE.DataTexture( data, 100, 100, THREE.RGBAFormat );
 				gradientTexture.minFilter = THREE.LinearFilter;
 				gradientTexture.magFilter = THREE.LinearFilter;
 				gradientTexture.needsUpdate = true;

examples/webgl2_multisampled_renderbuffers.html

@@ -114,12 +114,8 @@
 
 				//
 
-				const parameters = {
-					format: THREE.RGBFormat
-				};
-
 				const size = renderer.getDrawingBufferSize( new THREE.Vector2() );
-				const renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
+				const renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height );
 
 				const renderPass = new RenderPass( scene, camera );
 				const copyPass = new ShaderPass( CopyShader );

examples/webgl_depth_texture.html

@@ -143,12 +143,9 @@
 				const type = parseFloat( params.type );
 
 				target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
-				target.texture.format = THREE.RGBFormat;
 				target.texture.minFilter = THREE.NearestFilter;
 				target.texture.magFilter = THREE.NearestFilter;
-				target.texture.generateMipmaps = false;
 				target.stencilBuffer = ( format === THREE.DepthStencilFormat ) ? true : false;
-				target.depthBuffer = true;
 				target.depthTexture = new THREE.DepthTexture();
 				target.depthTexture.format = format;
 				target.depthTexture.type = type;

examples/webgl_framebuffer_texture.html

@@ -95,7 +95,7 @@
 
 				//
 
-				texture = new THREE.FramebufferTexture( textureSize, textureSize, THREE.RGBFormat );
+				texture = new THREE.FramebufferTexture( textureSize, textureSize, THREE.RGBAFormat );
 				texture.minFilter = THREE.NearestFilter;
 				texture.magFilter = THREE.NearestFilter;
 
@@ -110,7 +110,8 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
+				renderer.setClearAlpha( 1 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;

examples/webgl_gpgpu_birds_gltf.html

@@ -249,13 +249,13 @@
 				const tHeight = nextPowerOf2( durationAnimation );
 				const tWidth = nextPowerOf2( birdGeo.getAttribute( 'position' ).count );
 				vertexPerBird = birdGeo.getAttribute( 'position' ).count;
-				const tData = new Float32Array( 3 * tWidth * tHeight );
+				const tData = new Float32Array( 4 * tWidth * tHeight );
 
 				for ( let i = 0; i < tWidth; i ++ ) {
 
 					for ( let j = 0; j < tHeight; j ++ ) {
 
-						const offset = j * tWidth * 3;
+						const offset = j * tWidth * 4;
 
 						const curMorph = Math.floor( j / durationAnimation * morphAttributes.length );
 						const nextMorph = ( Math.floor( j / durationAnimation * morphAttributes.length ) + 1 ) % morphAttributes.length;
@@ -268,17 +268,19 @@
 							d0 = morphAttributes[ curMorph ].array[ i * 3 ];
 							d1 = morphAttributes[ nextMorph ].array[ i * 3 ];
 
-							if ( d0 !== undefined && d1 !== undefined ) tData[ offset + i * 3 ] = Math.lerp( d0, d1, lerpAmount );
+							if ( d0 !== undefined && d1 !== undefined ) tData[ offset + i * 4 ] = Math.lerp( d0, d1, lerpAmount );
 
 							d0 = morphAttributes[ curMorph ].array[ i * 3 + 1 ];
 							d1 = morphAttributes[ nextMorph ].array[ i * 3 + 1 ];
 
-							if ( d0 !== undefined && d1 !== undefined ) tData[ offset + i * 3 + 1 ] = Math.lerp( d0, d1, lerpAmount );
+							if ( d0 !== undefined && d1 !== undefined ) tData[ offset + i * 4 + 1 ] = Math.lerp( d0, d1, lerpAmount );
 
 							d0 = morphAttributes[ curMorph ].array[ i * 3 + 2 ];
 							d1 = morphAttributes[ nextMorph ].array[ i * 3 + 2 ];
 
-							if ( d0 !== undefined && d1 !== undefined ) tData[ offset + i * 3 + 2 ] = Math.lerp( d0, d1, lerpAmount );
+							if ( d0 !== undefined && d1 !== undefined ) tData[ offset + i * 4 + 2 ] = Math.lerp( d0, d1, lerpAmount );
+
+							tData[ offset + i * 4 + 3 ] = 1;
 
 						}
 
@@ -286,7 +288,7 @@
 
 				}
 
-				textureAnimation = new THREE.DataTexture( tData, tWidth, tHeight, THREE.RGBFormat, THREE.FloatType );
+				textureAnimation = new THREE.DataTexture( tData, tWidth, tHeight, THREE.RGBAFormat, THREE.FloatType );
 				textureAnimation.needsUpdate = true;
 
 				const vertices = [], color = [], reference = [], seeds = [], indices = [];

examples/webgl_materials_nodes.html

@@ -3139,7 +3139,7 @@
 
 						// RTT ( get back distance )
 
-						rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+						rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 
 						library[ rtTexture.texture.uuid ] = rtTexture.texture;
 

examples/webgl_portal.html

@@ -88,22 +88,14 @@
 				topLeftCorner = new THREE.Vector3();
 				reflectedPosition = new THREE.Vector3();
 
-				leftPortalTexture = new THREE.WebGLRenderTarget( 256, 256, {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat
-				} );
+				leftPortalTexture = new THREE.WebGLRenderTarget( 256, 256 );
 				leftPortal = new THREE.Mesh( planeGeo, new THREE.MeshBasicMaterial( { map: leftPortalTexture.texture } ) );
 				leftPortal.position.x = - 30;
 				leftPortal.position.y = 20;
 				leftPortal.scale.set( 0.35, 0.35, 0.35 );
 				scene.add( leftPortal );
 
-				rightPortalTexture = new THREE.WebGLRenderTarget( 256, 256, {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat
-				} );
+				rightPortalTexture = new THREE.WebGLRenderTarget( 256, 256 );
 				rightPortal = new THREE.Mesh( planeGeo, new THREE.MeshBasicMaterial( { map: rightPortalTexture.texture } ) );
 				rightPortal.position.x = 30;
 				rightPortal.position.y = 20;

examples/webgl_postprocessing_advanced.html

@@ -171,9 +171,6 @@
 				//
 
 				const rtParameters = {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat,
 					stencilBuffer: true
 				};
 

examples/webgl_postprocessing_crossfade.html

@@ -173,8 +173,7 @@
 				const mesh = generateInstancedMesh( geometry, material, 500 );
 				scene.add( mesh );
 
-				const renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-				this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
+				this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 
 				this.render = function ( delta, rtt ) {
 

examples/webgl_postprocessing_dof2.html

@@ -317,9 +317,8 @@
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				const pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
-				postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
+				postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 
 				const bokeh_shader = BokehShader;
 

examples/webgl_postprocessing_godrays.html

@@ -141,8 +141,7 @@
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				const pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
+				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight );
 
 				// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
 				// investigate further for now.
@@ -151,15 +150,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, pars );
-				postprocessing.rtTextureDepthMask = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
+				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight );
+				postprocessing.rtTextureDepthMask = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight );
 
 				// 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, pars );
-				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight, pars );
+				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight );
+				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight );
 
 				// god-ray shaders
 

examples/webgl_postprocessing_masking.html

@@ -67,9 +67,6 @@
 				const outputPass = new ShaderPass( CopyShader );
 
 				const parameters = {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat,
 					stencilBuffer: true
 				};
 

examples/webgl_rtt.html

@@ -101,7 +101,7 @@
 				light.position.set( 0, 0, - 1 ).normalize();
 				sceneRTT.add( light );
 
-				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 
 				material = new THREE.ShaderMaterial( {