WebGLBackend: Morph Texture (#27218)

* WebGLBackend: Morph Texture

* screenshot

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -725,13 +725,13 @@ class WebGLBackend extends Backend {
 
 			}
 
-			if ( attributeData.isFloat ) {
+			if ( attributeData.isInteger ) {
 
-				gl.vertexAttribPointer( i, attribute.itemSize, attributeData.type, false, stride, offset );
+				gl.vertexAttribIPointer( i, attribute.itemSize, attributeData.type, stride, offset );
 
 			} else {
 
-				gl.vertexAttribIPointer( i, attribute.itemSize, attributeData.type, stride, offset );
+				gl.vertexAttribPointer( i, attribute.itemSize, attributeData.type, attribute.normalized, stride, offset );
 
 			}
 

examples/jsm/renderers/webgl/nodes/GLSLNodeBuilder.js

@@ -5,6 +5,8 @@ import NodeUniformsGroup from '../../common/nodes/NodeUniformsGroup.js';
 
 import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js';
 
+import { IntType } from 'three';
+
 const glslMethods = {
 	[ MathNode.ATAN2 ]: 'atan',
 	textureDimensions: 'textureSize'
@@ -253,6 +255,30 @@ ${ flowData.code }
 
 	}
 
+	getTypeFromAttribute( attribute ) {
+
+		let nodeType = super.getTypeFromAttribute( attribute );
+
+		if ( /^[iu]/.test( nodeType ) && attribute.gpuType !== IntType ) {
+
+			let dataAttribute = attribute;
+
+			if ( attribute.isInterleavedBufferAttribute ) dataAttribute = attribute.data;
+
+			const array = dataAttribute.array;
+
+			if ( ( array instanceof Uint32Array || array instanceof Int32Array ) === false ) {
+
+				nodeType = nodeType.slice( 1 );
+
+			}
+
+		}
+
+		return nodeType;
+
+	}
+
 	getAttributes( shaderStage ) {
 
 		let snippet = '';

examples/jsm/renderers/webgl/utils/WebGLAttributeUtils.js

@@ -1,3 +1,5 @@
+import { IntType } from 'three';
+
 class WebGLAttributeUtils {
 
 	constructor( backend ) {
@@ -36,19 +38,16 @@ class WebGLAttributeUtils {
 		//attribute.onUploadCallback();
 
 		let type;
-		let isFloat = false;
 
 		if ( array instanceof Float32Array ) {
 
 			type = gl.FLOAT;
-			isFloat = true;
 
 		} else if ( array instanceof Uint16Array ) {
 
 			if ( attribute.isFloat16BufferAttribute ) {
 
 				type = gl.HALF_FLOAT;
-				isFloat = true;
 
 			} else {
 
@@ -91,7 +90,7 @@ class WebGLAttributeUtils {
 			type,
 			bytesPerElement: array.BYTES_PER_ELEMENT,
 			version: attribute.version,
-			isFloat
+			isInteger: type === gl.INT || type === gl.UNSIGNED_INT || attribute.gpuType === IntType
 		} );
 
 	}