WebGLRenderer: Add support for uv3 and uv4. (#25788)

* WebGLRenderer: Add support for uv3 and uv4.

* GLTFLoader: Add support for TEXCOORD_2 and TEXCOORD_3.

Author: mrdoob

examples/jsm/loaders/GLTFLoader.js

@@ -2032,6 +2032,8 @@ const ATTRIBUTES = {
 	TANGENT: 'tangent',
 	TEXCOORD_0: 'uv',
 	TEXCOORD_1: 'uv2',
+	TEXCOORD_2: 'uv3',
+	TEXCOORD_3: 'uv4',
 	COLOR_0: 'color',
 	WEIGHTS_0: 'skinWeight',
 	JOINTS_0: 'skinIndex',

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

@@ -3,11 +3,6 @@ export default /* glsl */`
 
 	varying vec2 vUv;
 
-#endif
-#ifdef USE_UV2
-
-	attribute vec2 uv2;
-
 #endif
 #ifdef USE_MAP
 

src/renderers/webgl/WebGLProgram.js

@@ -528,6 +528,8 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			parameters.vertexColors ? '#define USE_COLOR' : '',
 			parameters.vertexAlphas ? '#define USE_COLOR_ALPHA' : '',
 			parameters.vertexUvs2 ? '#define USE_UV2' : '',
+			parameters.vertexUvs3 ? '#define USE_UV3' : '',
+			parameters.vertexUvs4 ? '#define USE_UV4' : '',
 
 			parameters.pointsUvs ? '#define USE_POINTS_UV' : '',
 
@@ -576,6 +578,24 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			'attribute vec3 normal;',
 			'attribute vec2 uv;',
 
+			'#ifdef USE_UV2',
+
+			'	attribute vec2 uv2;',
+
+			'#endif',
+
+			'#ifdef USE_UV3',
+
+			'	attribute vec2 uv3;',
+
+			'#endif',
+
+			'#ifdef USE_UV4',
+
+			'	attribute vec2 uv4;',
+
+			'#endif',
+
 			'#ifdef USE_TANGENT',
 
 			'	attribute vec4 tangent;',
@@ -689,6 +709,8 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			parameters.vertexColors || parameters.instancingColor ? '#define USE_COLOR' : '',
 			parameters.vertexAlphas ? '#define USE_COLOR_ALPHA' : '',
 			parameters.vertexUvs2 ? '#define USE_UV2' : '',
+			parameters.vertexUvs3 ? '#define USE_UV3' : '',
+			parameters.vertexUvs4 ? '#define USE_UV4' : '',
 
 			parameters.pointsUvs ? '#define USE_POINTS_UV' : '',
 

src/renderers/webgl/WebGLPrograms.js

@@ -38,6 +38,8 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 	function getChannel( value ) {
 
 		if ( value === 1 ) return 'uv2';
+		if ( value === 2 ) return 'uv3';
+		if ( value === 3 ) return 'uv4';
 
 		return 'uv';
 
@@ -152,6 +154,8 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 		const HAS_EXTENSIONS = !! material.extensions;
 
 		const HAS_ATTRIBUTE_UV2 = !! geometry.attributes.uv2;
+		const HAS_ATTRIBUTE_UV3 = !! geometry.attributes.uv3;
+		const HAS_ATTRIBUTE_UV4 = !! geometry.attributes.uv4;
 
 		const parameters = {
 
@@ -264,6 +268,8 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			vertexColors: material.vertexColors,
 			vertexAlphas: material.vertexColors === true && !! geometry.attributes.color && geometry.attributes.color.itemSize === 4,
 			vertexUvs2: HAS_ATTRIBUTE_UV2,
+			vertexUvs3: HAS_ATTRIBUTE_UV3,
+			vertexUvs4: HAS_ATTRIBUTE_UV4,
 
 			pointsUvs: object.isPoints === true && !! geometry.attributes.uv && ( HAS_MAP || HAS_ALPHAMAP ),
 
@@ -457,8 +463,12 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			_programLayers.enable( 12 );
 		if ( parameters.vertexUvs2 )
 			_programLayers.enable( 13 );
-		if ( parameters.vertexTangents )
+		if ( parameters.vertexUvs3 )
 			_programLayers.enable( 14 );
+		if ( parameters.vertexUvs4 )
+			_programLayers.enable( 15 );
+		if ( parameters.vertexTangents )
+			_programLayers.enable( 16 );
 
 		array.push( _programLayers.mask );
 		_programLayers.disableAll();