WebGLBackend: Fix type conversion in transform feedback (#29554)

examples/webgpu_compute_geometry.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { vec3, vec4, storage, Fn, If, uniform, instanceIndex, objectWorldMatrix, color, screenUV, attribute } from 'three/tsl';
+			import { vec4, storage, Fn, If, uniform, instanceIndex, objectWorldMatrix, color, screenUV, attribute } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -51,25 +51,24 @@
 
 				const count = geometry.attributes.position.count;
 
-				const speedBufferAttribute = new THREE.StorageBufferAttribute( count, 4 );
-
 				// replace geometry attributes for storage buffer attributes
 
 				const positionBaseAttribute = geometry.attributes.position;
-				const positionStorageBufferAttribute = new THREE.StorageBufferAttribute( count, 4 );
+				const positionStorageBufferAttribute = new THREE.StorageBufferAttribute( count, 3 );
+				const speedBufferAttribute = new THREE.StorageBufferAttribute( count, 3 );
 
 				geometry.setAttribute( 'storagePosition', positionStorageBufferAttribute );
 
-				// compute ( jelly )
+				// attributes
 
 				const positionAttribute = storage( positionBaseAttribute, 'vec3', count ).toReadOnly();
-				const positionStorageAttribute = storage( positionStorageBufferAttribute, 'vec4', count );
+				const positionStorageAttribute = storage( positionStorageBufferAttribute, 'vec3', count );
 
-				const speedAttribute = storage( speedBufferAttribute, 'vec4', count );
+				const speedAttribute = storage( speedBufferAttribute, 'vec3', count );
 
 				// vectors
 
-				const basePosition = vec3( positionAttribute.element( instanceIndex ) );
+				const basePosition = positionAttribute.element( instanceIndex );
 				const currentPosition = positionStorageAttribute.element( instanceIndex );
 				const currentSpeed = speedAttribute.element( instanceIndex );
 
@@ -91,18 +90,18 @@
 
 					If( pointerPosition.w.equal( 1 ), () => {
 
-						const worldPosition = objectWorldMatrix( object ).mul( currentPosition.xyz );
+						const worldPosition = objectWorldMatrix( object ).mul( currentPosition );
 
 						const dist = worldPosition.distance( pointerPosition.xyz );
 						const direction = pointerPosition.xyz.sub( worldPosition ).normalize();
 
 						const power = brushSize.sub( dist ).max( 0 ).mul( brushStrength );
 
-						currentPosition.xyz.addAssign( direction.mul( power ) );
+						currentPosition.addAssign( direction.mul( power ) );
 
 					} );
 
-					// update
+					// compute ( jelly )
 
 					const distance = basePosition.distance( currentPosition );
 					const force = elasticity.mul( distance ).mul( basePosition.sub( currentPosition ) );

src/nodes/accessors/StorageBufferNode.js

@@ -112,27 +112,49 @@ class StorageBufferNode extends BufferNode {
 
 	}
 
-	generate( builder ) {
+	getAttributeData() {
+
+		if ( this._attribute === null ) {
+
+			this._attribute = bufferAttribute( this.value );
+			this._varying = varying( this._attribute );
+
+		}
+
+		return {
+			attribute: this._attribute,
+			varying: this._varying
+		};
+
+	}
+
+	getNodeType( builder ) {
 
 		if ( builder.isAvailable( 'storageBuffer' ) ) {
 
-			return super.generate( builder );
+			return super.getNodeType( builder );
 
 		}
 
-		const nodeType = this.getNodeType( builder );
+		const { attribute } = this.getAttributeData();
 
-		if ( this._attribute === null ) {
+		return attribute.getNodeType( builder );
 
-			this._attribute = bufferAttribute( this.value );
-			this._varying = varying( this._attribute );
+	}
+
+	generate( builder ) {
+
+		if ( builder.isAvailable( 'storageBuffer' ) ) {
+
+			return super.generate( builder );
 
 		}
 
+		const { attribute, varying } = this.getAttributeData();
 
-		const output = this._varying.build( builder, nodeType );
+		const output = varying.build( builder );
 
-		builder.registerTransform( output, this._attribute );
+		builder.registerTransform( output, attribute );
 
 		return output;