WebGLMorphtargets: Fix texture sampling.

Author: Mugen87

src/renderers/shaders/ShaderChunk/morphnormal_vertex.glsl.js

@@ -10,7 +10,7 @@ export default /* glsl */`
 
 		for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) {
 
-			if ( morphTargetInfluences[ i ] > 0.0 ) objectNormal += getMorph( gl_VertexID, i, 1.0, 2.0 ) * morphTargetInfluences[ i ];
+			if ( morphTargetInfluences[ i ] > 0.0 ) objectNormal += getMorph( gl_VertexID, i, 1, 2 ) * morphTargetInfluences[ i ];
 
 		}
 

src/renderers/shaders/ShaderChunk/morphtarget_pars_vertex.glsl.js

@@ -6,23 +6,17 @@ export default /* glsl */`
 	#ifdef MORPHTARGETS_TEXTURE
 
 		uniform float morphTargetInfluences[ MORPHTARGETS_COUNT ];
-		uniform sampler2DArray morphTargets;
-		uniform int morphTargetsWidth;
+		uniform sampler2DArray morphTargetsTexture;
+		uniform vec2 morphTargetsTextureSize;
 
-		vec3 getMorph( const in int vertexIndex, const in int morphTargetIndex, const in float offset, const in float stride ) {
+		vec3 getMorph( const in int vertexIndex, const in int morphTargetIndex, const in int offset, const in int stride ) {
 
-			float j = float( vertexIndex ) * stride + offset;
-			float x = mod( j, float( morphTargetsWidth ) );
-			float y = floor( j / float( morphTargetsWidth ) );
+			float texelIndex = float( vertexIndex * stride + offset );
+			float y = floor( texelIndex / morphTargetsTextureSize.x );
+			float x = texelIndex - y * morphTargetsTextureSize.x;
 
-			float dx = 1.0 / float( morphTargetsWidth );
-			float dy = 1.0 / float( morphTargetsWidth );
-
-			x = dx * ( x + 0.5 );
-			y = dy * ( y + 0.5 );
-
-			vec3 morphUV = vec3( x, y, morphTargetIndex );
-			return texture( morphTargets, morphUV ).xyz;
+			vec3 morphUV = vec3( ( x + 0.5 ) / morphTargetsTextureSize.x, ( y + 0.5 ) / morphTargetsTextureSize.y, morphTargetIndex );
+			return texture( morphTargetsTexture, morphUV ).xyz;
 
 		}
 

src/renderers/shaders/ShaderChunk/morphtarget_vertex.glsl.js

@@ -12,11 +12,11 @@ export default /* glsl */`
 
 			#ifndef USE_MORPHNORMALS
 
-				if ( morphTargetInfluences[ i ] > 0.0 ) transformed += getMorph( gl_VertexID, i, 0.0, 1.0 ) * morphTargetInfluences[ i ];
+				if ( morphTargetInfluences[ i ] > 0.0 ) transformed += getMorph( gl_VertexID, i, 0, 1 ) * morphTargetInfluences[ i ];
 
 			#else
 
-				if ( morphTargetInfluences[ i ] > 0.0 ) transformed += getMorph( gl_VertexID, i, 0.0, 2.0 ) * morphTargetInfluences[ i ];
+				if ( morphTargetInfluences[ i ] > 0.0 ) transformed += getMorph( gl_VertexID, i, 0, 2 ) * morphTargetInfluences[ i ];
 
 			#endif
 

src/renderers/webgl/WebGLMorphtargets.js

@@ -1,6 +1,7 @@
 import { FloatType, RGBAFormat } from '../../constants.js';
 import { DataTexture2DArray } from '../../textures/DataTexture2DArray.js';
 import { Vector3 } from '../../math/Vector3.js';
+import { Vector2 } from '../../math/Vector2.js';
 
 function numericalSort( a, b ) {
 
@@ -107,7 +108,8 @@ function WebGLMorphtargets( gl, capabilities, textures ) {
 
 				entry = {
 					count: numberOfMorphTargets,
-					texture: texture
+					texture: texture,
+					size: new Vector2( width, height )
 				};
 
 				morphTextures.set( geometry, entry );
@@ -129,8 +131,8 @@ function WebGLMorphtargets( gl, capabilities, textures ) {
 			program.getUniforms().setValue( gl, 'morphTargetBaseInfluence', morphBaseInfluence );
 			program.getUniforms().setValue( gl, 'morphTargetInfluences', objectInfluences );
 
-			program.getUniforms().setValue( gl, 'morphTargets', entry.texture, textures );
-			program.getUniforms().setValue( gl, 'morphTargetsWidth', entry.texture.image.width );
+			program.getUniforms().setValue( gl, 'morphTargetsTexture', entry.texture, textures );
+			program.getUniforms().setValue( gl, 'morphTargetsTextureSize', entry.size );
 
 
 		} else {