WebGLTextures: Use gl.texStorage2D() for data textures. (#22947)

docs/api/en/textures/DataTexture.html

@@ -60,6 +60,7 @@
 		// used the buffer to create a [name]
 
 		const texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
+		texture.needsUpdate = true;
 		</code>
 
 		<h2>Properties</h2>

docs/api/en/textures/DataTexture2DArray.html

@@ -67,7 +67,7 @@
 
 		const texture = new THREE.DataTexture2DArray( data, width, height, depth );
 		texture.format = THREE.RGBFormat;
-		texture.type = THREE.UnsignedByteType;
+		texture.needsUpdate = true;
 		</code>
 
 		<h2>Examples</h2>

docs/api/zh/textures/DataTexture.html

@@ -60,6 +60,7 @@
 		// used the buffer to create a [name]
 
 		const texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
+		texture.needsUpdate = true;
 		</code>
 
 		<h2>属性</h2>

docs/api/zh/textures/DataTexture2DArray.html

@@ -67,7 +67,7 @@
 
 		const texture = new THREE.DataTexture2DArray( data, width, height, depth );
 		texture.format = THREE.RGBFormat;
-		texture.type = THREE.UnsignedByteType;
+		texture.needsUpdate = true;
 		</code>
 
 		<p>

examples/jsm/lights/RectAreaLightUniformsLib.js

@@ -46,6 +46,9 @@ class RectAreaLightUniformsLib {
 		UniformsLib.LTC_FLOAT_1 = new DataTexture( ltc_float_1, 64, 64, RGBAFormat, FloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 		UniformsLib.LTC_FLOAT_2 = new DataTexture( ltc_float_2, 64, 64, RGBAFormat, FloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 
+		UniformsLib.LTC_FLOAT_1.needsUpdate = true;
+		UniformsLib.LTC_FLOAT_2.needsUpdate = true;
+
 		const ltc_half_1 = new Uint16Array( LTC_MAT_1.length );
 
 		LTC_MAT_1.forEach( function ( x, index ) {
@@ -65,6 +68,10 @@ class RectAreaLightUniformsLib {
 		UniformsLib.LTC_HALF_1 = new DataTexture( ltc_half_1, 64, 64, RGBAFormat, HalfFloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 		UniformsLib.LTC_HALF_2 = new DataTexture( ltc_half_2, 64, 64, RGBAFormat, HalfFloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 
+		UniformsLib.LTC_HALF_1.needsUpdate = true;
+		UniformsLib.LTC_HALF_2.needsUpdate = true;
+
+
 	}
 
 }

examples/jsm/loaders/LUT3dlLoader.js

@@ -118,6 +118,7 @@ export class LUT3dlLoader extends Loader {
 		texture.wrapS = ClampToEdgeWrapping;
 		texture.wrapT = ClampToEdgeWrapping;
 		texture.generateMipmaps = false;
+		texture.needsUpdate = true;
 
 		const texture3D = new DataTexture3D();
 		texture3D.image.data = data;
@@ -132,6 +133,7 @@ export class LUT3dlLoader extends Loader {
 		texture3D.wrapT = ClampToEdgeWrapping;
 		texture3D.wrapR = ClampToEdgeWrapping;
 		texture3D.generateMipmaps = false;
+		texture3D.needsUpdate = true;
 
 		return {
 			size,

examples/jsm/loaders/LUTCubeLoader.js

@@ -124,6 +124,7 @@ export class LUTCubeLoader extends Loader {
 		texture.wrapS = ClampToEdgeWrapping;
 		texture.wrapT = ClampToEdgeWrapping;
 		texture.generateMipmaps = false;
+		texture.needsUpdate = true;
 
 		const texture3D = new DataTexture3D();
 		texture3D.image.data = data;
@@ -138,6 +139,7 @@ export class LUTCubeLoader extends Loader {
 		texture3D.wrapT = ClampToEdgeWrapping;
 		texture3D.wrapR = ClampToEdgeWrapping;
 		texture3D.generateMipmaps = false;
+		texture3D.needsUpdate = true;
 
 		return {
 			title,

examples/jsm/loaders/VOXLoader.js

@@ -296,6 +296,7 @@ class VOXDataTexture3D extends DataTexture3D {
 		this.minFilter = NearestFilter;
 		this.magFilter = LinearFilter;
 		this.unpackAlignment = 1;
+		this.needsUpdate = true;
 
 	}
 

examples/jsm/loaders/VRMLLoader.js

@@ -1382,6 +1382,7 @@ class VRMLLoader extends Loader {
 						}
 
 						texture = new DataTexture( data, width, height, ( useAlpha === true ) ? RGBAFormat : RGBFormat );
+						texture.needsUpdate = true;
 						texture.__type = textureType; // needed for material modifications
 						break;
 

examples/jsm/misc/GPUComputationRenderer.js

@@ -345,7 +345,9 @@ class GPUComputationRenderer {
 		this.createTexture = function () {
 
 			const data = new Float32Array( sizeX * sizeY * 4 );
-			return new DataTexture( data, sizeX, sizeY, RGBAFormat, FloatType );
+			const texture = new DataTexture( data, sizeX, sizeY, RGBAFormat, FloatType );
+			texture.needsUpdate = true;
+			return texture;
 
 		};
 

examples/jsm/postprocessing/GlitchPass.js

@@ -106,7 +106,9 @@ class GlitchPass extends Pass {
 
 		}
 
-		return new DataTexture( data_arr, dt_size, dt_size, RGBFormat, FloatType );
+		const texture = new DataTexture( data_arr, dt_size, dt_size, RGBFormat, FloatType );
+		texture.needsUpdate = true;
+		return texture;
 
 	}
 

examples/jsm/postprocessing/SSAOPass.js

@@ -413,6 +413,7 @@ class SSAOPass extends Pass {
 		this.noiseTexture = new DataTexture( data, width, height, RGBAFormat, FloatType );
 		this.noiseTexture.wrapS = RepeatWrapping;
 		this.noiseTexture.wrapT = RepeatWrapping;
+		this.noiseTexture.needsUpdate = true;
 
 	}
 

examples/misc_exporter_gltf.html

@@ -161,6 +161,7 @@
 				const gradientTexture = new THREE.DataTexture( data, 100, 100, THREE.RGBFormat );
 				gradientTexture.minFilter = THREE.LinearFilter;
 				gradientTexture.magFilter = THREE.LinearFilter;
+				gradientTexture.needsUpdate = true;
 
 				scene1 = new THREE.Scene();
 				scene1.name = 'Scene1';

examples/webgl2_materials_texture2darray.html

@@ -97,7 +97,7 @@
 
 						const texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
 						texture.format = THREE.RedFormat;
-						texture.type = THREE.UnsignedByteType;
+						texture.needsUpdate = true;
 
 						const material = new THREE.ShaderMaterial( {
 							uniforms: {

examples/webgl2_materials_texture3d.html

@@ -90,6 +90,7 @@
 				texture.type = THREE.FloatType;
 				texture.minFilter = texture.magFilter = THREE.LinearFilter;
 				texture.unpackAlignment = 1;
+				texture.needsUpdate = true;
 
 				// Colormap textures
 				cmtextures = {

examples/webgl2_materials_texture3d_partialupdate.html

@@ -113,6 +113,7 @@
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;
 				texture.unpackAlignment = 1;
+				texture.needsUpdate = true;
 
 				cloudTexture = texture;
 

examples/webgl2_rendertarget_texture2darray.html

@@ -197,7 +197,7 @@
 
 						const texture = new THREE.DataTexture2DArray( array, DIMENSIONS.width, DIMENSIONS.height, DIMENSIONS.depth );
 						texture.format = THREE.RedFormat;
-						texture.type = THREE.UnsignedByteType;
+						texture.needsUpdate = true;
 
 						var material = new THREE.ShaderMaterial( {
 							uniforms: {

examples/webgl2_volume_cloud.html

@@ -97,6 +97,7 @@
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;
 				texture.unpackAlignment = 1;
+				texture.needsUpdate = true;
 
 				// Material
 

examples/webgl2_volume_perlin.html

@@ -78,6 +78,7 @@
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;
 				texture.unpackAlignment = 1;
+				texture.needsUpdate = true;
 
 				// Material
 

examples/webgl_materials_variations_toon.html

@@ -77,6 +77,7 @@
 					}
 
 					const gradientMap = new THREE.DataTexture( colors, colors.length, 1, format );
+					gradientMap.needsUpdate = true;
 
 					for ( let beta = 0; beta <= 1.0; beta += stepSize ) {
 

examples/webgpu_sandbox.html

@@ -227,7 +227,9 @@
 
 				}
 
-				return new THREE.DataTexture( data, width, height, THREE.RGBAFormat );
+				const texture = THREE.DataTexture( data, width, height, THREE.RGBAFormat );
+				texture.needsUpdate = true;
+				return texture;
 
 			}
 

src/objects/Skeleton.js

@@ -178,6 +178,7 @@ class Skeleton {
 		boneMatrices.set( this.boneMatrices ); // copy current values
 
 		const boneTexture = new DataTexture( boneMatrices, size, size, RGBAFormat, FloatType );
+		boneTexture.needsUpdate = true;
 
 		this.boneMatrices = boneMatrices;
 		this.boneTexture = boneTexture;

src/renderers/webgl/WebGLMorphtargets.js

@@ -84,6 +84,7 @@ function WebGLMorphtargets( gl, capabilities, textures ) {
 				const texture = new DataTexture2DArray( buffer, width, height, numberOfMorphTargets );
 				texture.format = RGBAFormat; // using RGBA since RGB might be emulated (and is thus slower)
 				texture.type = FloatType;
+				texture.needsUpdate = true;
 
 				// fill buffer
 

src/renderers/webgl/WebGLState.js

@@ -878,6 +878,20 @@ function WebGLState( gl, extensions, capabilities ) {
 
 	}
 
+	function texSubImage3D() {
+
+		try {
+
+			gl.texSubImage3D.apply( gl, arguments );
+
+		} catch ( error ) {
+
+			console.error( 'THREE.WebGLState:', error );
+
+		}
+
+	}
+
 	function compressedTexSubImage2D() {
 
 		try {
@@ -906,6 +920,20 @@ function WebGLState( gl, extensions, capabilities ) {
 
 	}
 
+	function texStorage3D() {
+
+		try {
+
+			gl.texStorage3D.apply( gl, arguments );
+
+		} catch ( error ) {
+
+			console.error( 'THREE.WebGLState:', error );
+
+		}
+
+	}
+
 	function texImage2D() {
 
 		try {
@@ -1083,7 +1111,9 @@ function WebGLState( gl, extensions, capabilities ) {
 		texImage3D: texImage3D,
 
 		texStorage2D: texStorage2D,
+		texStorage3D: texStorage3D,
 		texSubImage2D: texSubImage2D,
+		texSubImage3D: texSubImage3D,
 		compressedTexSubImage2D: compressedTexSubImage2D,
 
 		scissor: scissor,

src/renderers/webgl/WebGLTextures.js

@@ -661,10 +661,25 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 			if ( mipmaps.length > 0 && supportsMips ) {
 
+				if ( useTexStorage && allocateMemory ) {
+
+					state.texStorage2D( _gl.TEXTURE_2D, levels, glInternalFormat, mipmaps[ 0 ].width, mipmaps[ 0 ].height );
+
+				}
+
 				for ( let i = 0, il = mipmaps.length; i < il; i ++ ) {
 
 					mipmap = mipmaps[ i ];
-					state.texImage2D( _gl.TEXTURE_2D, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
+
+					if ( useTexStorage ) {
+
+						state.texSubImage2D( _gl.TEXTURE_2D, 0, 0, 0, mipmap.width, mipmap.height, glFormat, glType, mipmap.data );
+
+					} else {
+
+						state.texImage2D( _gl.TEXTURE_2D, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
+
+					}
 
 				}
 
@@ -672,7 +687,21 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 			} else {
 
-				state.texImage2D( _gl.TEXTURE_2D, 0, glInternalFormat, image.width, image.height, 0, glFormat, glType, image.data );
+				if ( useTexStorage ) {
+
+					if ( allocateMemory ) {
+
+						state.texStorage2D( _gl.TEXTURE_2D, levels, glInternalFormat, image.width, image.height );
+
+					}
+
+					state.texSubImage2D( _gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, glFormat, glType, image.data );
+
+				} else {
+
+					state.texImage2D( _gl.TEXTURE_2D, 0, glInternalFormat, image.width, image.height, 0, glFormat, glType, image.data );
+
+				}
 
 			}
 
@@ -726,11 +755,39 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 		} else if ( texture.isDataTexture2DArray ) {
 
-			state.texImage3D( _gl.TEXTURE_2D_ARRAY, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
+			if ( useTexStorage ) {
+
+				if ( allocateMemory ) {
+
+					state.texStorage3D( _gl.TEXTURE_2D_ARRAY, levels, glInternalFormat, image.width, image.height, image.depth );
+
+				}
+
+				state.texSubImage3D( _gl.TEXTURE_2D_ARRAY, 0, 0, 0, 0, image.width, image.height, image.depth, glFormat, glType, image.data );
+
+			} else {
+
+				state.texImage3D( _gl.TEXTURE_2D_ARRAY, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
+
+			}
 
 		} else if ( texture.isDataTexture3D ) {
 
-			state.texImage3D( _gl.TEXTURE_3D, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
+			if ( useTexStorage ) {
+
+				if ( allocateMemory ) {
+
+					state.texStorage3D( _gl.TEXTURE_3D, levels, glInternalFormat, image.width, image.height, image.depth );
+
+				}
+
+				state.texSubImage3D( _gl.TEXTURE_3D, 0, 0, 0, 0, image.width, image.height, image.depth, glFormat, glType, image.data );
+
+			} else {
+
+				state.texImage3D( _gl.TEXTURE_3D, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
+
+			}
 
 		} else if ( texture.isFramebufferTexture ) {
 

src/textures/DataTexture.js

@@ -16,8 +16,6 @@ class DataTexture extends Texture {
 		this.flipY = false;
 		this.unpackAlignment = 1;
 
-		this.needsUpdate = true;
-
 	}
 
 }

src/textures/DataTexture2DArray.js

@@ -18,8 +18,6 @@ class DataTexture2DArray extends Texture {
 		this.flipY = false;
 		this.unpackAlignment = 1;
 
-		this.needsUpdate = true;
-
 	}
 
 }

src/textures/DataTexture3D.js

@@ -26,8 +26,6 @@ class DataTexture3D extends Texture {
 		this.flipY = false;
 		this.unpackAlignment = 1;
 
-		this.needsUpdate = true;
-
 	}
 
 }