Merge pull request #14200 from Mugen87/dev11

UVDebug: Process BufferGeometry without conversion

examples/js/utils/UVsDebug.js

-/* 
+/*
  * @author zz85 / http://github.com/zz85
  * @author WestLangley / http://github.com/WestLangley
+ * @author Mugen87 / https://github.com/Mugen87
  *
- * tool for "unwrapping" and debugging three.js 
- * geometries UV mapping
+ * tool for "unwrapping" and debugging three.js geometries UV mapping
  *
  * Sample usage:
- *	document.body.appendChild( THREE.UVsDebug( new THREE.SphereGeometry( 10, 10, 10, 10 ) );
+ *	document.body.appendChild( THREE.UVsDebug( new THREE.SphereBufferGeometry( 10, 10, 10, 10 ) );
  *
  */
- 
-THREE.UVsDebug = function( geometry, size ) {
 
-	// handles wrapping of uv.x > 1 only
-    
-	var abc = 'abc';
+THREE.UVsDebug = function ( geometry, size ) {
 
-	var uv, u, ax, ay;
-	var i, il, j, jl;
-	var vnum;
+	// handles wrapping of uv.x > 1 only
 
+	var abc = 'abc';
 	var a = new THREE.Vector2();
 	var b = new THREE.Vector2();
 
-	var geo = ( geometry instanceof THREE.BufferGeometry ) ? new THREE.Geometry().fromBufferGeometry( geometry ) : geometry;
+	var uvs = [
+		new THREE.Vector2(),
+		new THREE.Vector2(),
+		new THREE.Vector2()
+	];
 
-	var faces = geo.faces;
-	var uvs = geo.faceVertexUvs[ 0 ];
+	var face = [];
 
 	var canvas = document.createElement( 'canvas' );
-	var width = size || 1024;   // power of 2 required for wrapping
+	var width = size || 1024; // power of 2 required for wrapping
 	var height = size || 1024;
 	canvas.width = width;
 	canvas.height = height;
@@ -44,30 +42,97 @@ THREE.UVsDebug = function( geometry, size ) {
 	ctx.fillStyle = 'rgba( 255, 255, 255, 1.0 )';
 	ctx.fillRect( 0, 0, width, height );
 
-	for ( i = 0, il = uvs.length; i < il; i ++ ) {
+	if ( geometry.isGeometry ) {
+
+		var faces = geometry.faces;
+		var uvSet = geometry.faceVertexUvs[ 0 ];
+
+		for ( var i = 0, il = uvSet.length; i < il; i ++ ) {
 
-		uv = uvs[ i ];
+			var face = faces[ i ];
+			var uv = uvSet[ i ];
+
+			face[ 0 ] = face.a;
+			face[ 1 ] = face.b;
+			face[ 2 ] = face.c;
+
+			uvs[ 0 ].copy( uv[ 0 ] );
+			uvs[ 1 ].copy( uv[ 1 ] );
+			uvs[ 2 ].copy( uv[ 2 ] );
+
+			processFace( face, uvs, i );
+
+		}
+
+	} else {
+
+		var index = geometry.index;
+		var uvAttribute = geometry.attributes.uv;
+
+		if ( index ) {
+
+			// indexed geometry
+
+			for ( var i = 0, il = index.count; i < il; i += 3 ) {
+
+				face[ 0 ] = index.getX( i );
+				face[ 1 ] = index.getX( i + 1 );
+				face[ 2 ] = index.getX( i + 2 );
+
+				uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
+				uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
+				uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
+
+				processFace( face, uvs, i );
+
+			}
 
-		// draw lines
+		} else {
+
+			// non-indexed geometry
+
+			for ( var i = 0, il = uvAttribute.count; i < il; i += 3 ) {
+
+				face[ 0 ] = i;
+				face[ 1 ] = i + 1;
+				face[ 2 ] = i + 2;
+
+				uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
+				uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
+				uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
+
+				processFace( face, uvs, i );
+
+			}
+
+		}
+
+	}
+
+	return canvas;
+
+	function processFace( face, uvs, index ) {
+
+		// draw contour of face
 
 		ctx.beginPath();
 
 		a.set( 0, 0 );
 
-		for ( j = 0, jl = uv.length; j < jl; j ++ ) {
+		for ( var j = 0, jl = uvs.length; j < jl; j ++ ) {
 
-			u = uv[ j ];
+			var uv = uvs[ j ];
 
-			a.x += u.x;
-			a.y += u.y;
+			a.x += uv.x;
+			a.y += uv.y;
 
-			if ( j == 0 ) {
+			if ( j === 0 ) {
 
-				ctx.moveTo( u.x * width, ( 1 - u.y ) * height );
+				ctx.moveTo( uv.x * width, ( 1 - uv.y ) * height );
 
 			} else {
 
-				ctx.lineTo( u.x * width, ( 1 - u.y ) * height );
+				ctx.lineTo( uv.x * width, ( 1 - uv.y ) * height );
 
 			}
 
@@ -76,33 +141,37 @@ THREE.UVsDebug = function( geometry, size ) {
 		ctx.closePath();
 		ctx.stroke();
 
-		a.divideScalar( jl );
+		// calculate center of face
+
+		a.divideScalar( uvs.length );
 
 		// label the face number
 
-		ctx.font = "12pt Arial bold";
+		ctx.font = '12pt Arial bold';
 		ctx.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
-		ctx.fillText( i, a.x * width, ( 1 - a.y ) * height );
+		ctx.fillText( index, a.x * width, ( 1 - a.y ) * height );
 
 		if ( a.x > 0.95 ) {
 
 			// wrap x // 0.95 is arbitrary
 
-			ctx.fillText( i, ( a.x % 1 ) * width, ( 1 - a.y ) * height );
+			ctx.fillText( index, ( a.x % 1 ) * width, ( 1 - a.y ) * height );
 
 		}
 
-		ctx.font = "8pt Arial bold";
+		//
+
+		ctx.font = '8pt Arial bold';
 		ctx.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
 
 		// label uv edge orders
 
-		for ( j = 0, jl = uv.length; j < jl; j ++ ) {
+		for ( j = 0, jl = uvs.length; j < jl; j ++ ) {
 
-			u = uv[ j ];
-			b.addVectors( a, u ).divideScalar( 2 );
+			var uv = uvs[ j ];
+			b.addVectors( a, uv ).divideScalar( 2 );
 
-			vnum = faces[ i ][ abc[ j ] ];
+			var vnum = face[ j ];
 			ctx.fillText( abc[ j ] + vnum, b.x * width, ( 1 - b.y ) * height );
 
 			if ( b.x > 0.95 ) {
@@ -117,7 +186,4 @@ THREE.UVsDebug = function( geometry, size ) {
 
 	}
 
-	return canvas;
-
 };
-

examples/misc_uv_tests.html

@@ -30,33 +30,33 @@
 
 			}
 
-			test('new THREE.PlaneGeometry( 100, 100, 4, 4 )', new THREE.PlaneGeometry( 100, 100, 4, 4 ));
+			var points = [];
 
-			test('new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ));
+			for ( var i = 0; i < 10; i ++ ) {
 
-			test('new THREE.SphereGeometry( 75, 12, 6 )', new THREE.SphereGeometry( 75, 12, 6 ));
+					points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
-			test('new THREE.IcosahedronGeometry( 30, 1 )', new THREE.IcosahedronGeometry( 30, 1 ));
+			}
 
-			test('new THREE.OctahedronGeometry( 30, 2 )', new THREE.OctahedronGeometry( 30, 2 ));
+			//
 
-			test('new THREE.CylinderGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderGeometry( 25, 75, 100, 10, 5 ));
+			test('new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ));
 
-			test('new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ));
+			test('new THREE.SphereBufferGeometry( 75, 12, 6 )', new THREE.SphereBufferGeometry( 75, 12, 6 ));
 
-			var points = [];
+			test('new THREE.IcosahedronBufferGeometry( 30, 1 )', new THREE.IcosahedronBufferGeometry( 30, 1 ));
 
-			for ( var i = 0; i < 10; i ++ ) {
+			test('new THREE.OctahedronBufferGeometry( 30, 2 )', new THREE.OctahedronBufferGeometry( 30, 2 ));
 
-			    points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
+			test('new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 ));
 
-			}
+			test('new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ));
 
-			test('new THREE.LatheGeometry( points, 8 )', new THREE.LatheGeometry( points, 8 ));
+			test('new THREE.LatheBufferGeometry( points, 8 )', new THREE.LatheBufferGeometry( points, 8 ));
 
-			test('new THREE.TorusGeometry( 50, 20, 8, 8 )', new THREE.TorusGeometry( 50, 20, 8, 8 ));
+			test('new THREE.TorusBufferGeometry( 50, 20, 8, 8 )', new THREE.TorusBufferGeometry( 50, 20, 8, 8 ));
 
-			test('new THREE.TorusKnotGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotGeometry( 50, 10, 12, 6 ));
+			test('new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 ));
 
 		</script>