Examples: Use new gpuType field in GPU Picking, fix bugs (#26001)

* Fix attribute merging

* Use new int attribute type

* Fix firefox gpu picking

Author: gkjohnson

examples/jsm/utils/BufferGeometryUtils.js

@@ -304,6 +304,7 @@ function mergeAttributes( attributes ) {
 	let TypedArray;
 	let itemSize;
 	let normalized;
+	let gpuType = - 1;
 	let arrayLength = 0;
 
 	for ( let i = 0; i < attributes.length; ++ i ) {
@@ -341,6 +342,14 @@ function mergeAttributes( attributes ) {
 
 		}
 
+		if ( gpuType === - 1 ) gpuType = attribute.gpuType;
+		if ( gpuType !== attribute.gpuType ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.gpuType must be consistent across matching attributes.' );
+			return null;
+
+		}
+
 		arrayLength += attribute.array.length;
 
 	}
@@ -356,7 +365,14 @@ function mergeAttributes( attributes ) {
 
 	}
 
-	return new BufferAttribute( array, itemSize, normalized );
+	const result = new BufferAttribute( array, itemSize, normalized );
+	if ( gpuType !== undefined ) {
+
+		result.gpuType = gpuType;
+
+	}
+
+	return result;
 
 }
 

examples/webgl_interactive_cubes_gpu.html

@@ -87,8 +87,8 @@
 				pickingTexture = new THREE.WebGLRenderTarget( 1, 1, {
 
 					type: THREE.IntType,
-					format: THREE.RedIntegerFormat,
-					internalFormat: 'R32I',
+					format: THREE.RGBAIntegerFormat,
+					internalFormat: 'RGBA32I',
 
 				} );
 				const pickingMaterial = new THREE.ShaderMaterial( {
@@ -122,10 +122,11 @@
 				function applyId( geometry, id ) {
 
 					const position = geometry.attributes.position;
-					const array = new Int32Array( position.count );
+					const array = new Int16Array( position.count );
 					array.fill( id );
 
-					const bufferAttribute = new THREE.BufferAttribute( array, 1, false );
+					const bufferAttribute = new THREE.Int16BufferAttribute( array, 1, false );
+					bufferAttribute.gpuType = THREE.IntType;
 					geometry.setAttribute( 'id', bufferAttribute );
 
 				}
@@ -263,7 +264,7 @@
 				camera.clearViewOffset();
 
 				// create buffer for reading single pixel
-				const pixelBuffer = new Int32Array( 1 );
+				const pixelBuffer = new Int32Array( 4 );
 
 				// read the pixel
 				renderer.readRenderTargetPixels( pickingTexture, 0, 0, 1, 1, pixelBuffer );