Merge remote-tracking branch 'remotes/mrdoob/dev' into dev

examples/js/UVsUtils.js

@@ -0,0 +1,92 @@
+/* 
+ * @author https://github.com/zz85 | @blurspline
+ *
+ * tool for "unwrapping" and debugging three.js 
+ * geometries UV mapping
+ *
+ * Sample usage:
+ *	document.body.appendChild(
+ *		THREE.UVsDebug(
+ *			new THREE.SphereGeometry(10,10,10,10));
+ *
+ */
+ 
+THREE.UVsDebug = function(geometry) {
+    
+    var verts = geometry.vertices, 
+    faces = geometry.faces, 
+    uvs = geometry.faceVertexUvs[0];
+    console.log('debugging geometry', geometry);
+    
+    
+    var canvas = document.createElement('canvas');
+    var width = 1024;
+    var height = 1024;
+    canvas.width = width;
+    canvas.height = height;
+    
+    var ctx = canvas.getContext('2d');
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(0,0,0,0.8)';
+
+    // paint background white
+    ctx.fillStyle = 'rgba(255,255,255, 1.0)';
+    ctx.fillRect(0, 0, width, height);
+    
+    var abc = 'abcd';
+    
+    var uv, u, ax, ay;
+    var i, il, j, jl;
+    
+    var a = new THREE.Vector2();
+    var b = new THREE.Vector2();
+    
+    for (i = 0, il = uvs.length; i < il; i++) {
+        uv = uvs[i];
+        
+        // draw lines
+        ctx.beginPath();
+        
+        a.set(0, 0);
+        for (j = 0, jl = uv.length; j < jl; j++) {
+            u = uv[j];
+            
+            a.x += u.u;
+            a.y += u.v;
+            
+            if (j == 0) {
+                ctx.moveTo(u.u * width, u.v * height);
+            } else {
+                ctx.lineTo(u.u * width, u.v * height);
+            }
+        }
+        
+        ctx.closePath();
+        ctx.stroke();
+        
+        a.divideScalar(jl);
+        
+        // label the face number
+        ctx.font = "12pt Arial bold";
+        ctx.fillStyle = 'rgba(0,0,0,0.8)';
+        ctx.fillText(i, a.x * width, a.y * height);
+        
+        ctx.font = "8pt Arial bold";
+        ctx.fillStyle = 'rgba(30,30,0,0.8)';
+        
+        
+        // label uv edge orders
+        for (j = 0, jl = uv.length; j < jl; j++) {
+            u = uv[j];
+            b.set(u.u, u.v).subSelf(a).divideScalar(4);
+            
+            b.x = u.u - b.x;
+            b.y = u.v - b.y;
+            ctx.fillText(abc[j]
+                + ':' + faces[i][abc[j]], b.x * width, b.y * height);
+        }
+    
+    }
+    
+    return canvas;
+}

examples/webgl_geometries2.html

@@ -9,7 +9,7 @@
 				font-family: Monospace;
 				background-color: #000;
 				margin: 0px;
-				overflow: hidden;
+				/*overflow: hidden;*/
 			}
 		</style>
 	</head>
@@ -19,9 +19,10 @@
 
 		<script src="js/Detector.js"></script>
 		<script src="js/Stats.js"></script>
-
+		<script src="../src/core/Geometry.js"></script>
 		<script src="js/CurveExtras.js"></script>
 
+		<script src="js/UVsUtils.js"></script>
 		<script src="../src/extras/geometries/ParametricGeometry.js"></script>
 		<script src="../src/extras/geometries/ParametricGeometries.js"></script>
 		<script>
@@ -68,13 +69,13 @@
 				var q = 3;
 				var radius = 150, tube = 10, segmentsR = 50, segmentsT = 20;
 
-				var GrannyKnot =  new THREE.Curves.GrannyKnot();
-				var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
-				var torus2 = new THREE.TorusKnotGeometry2( radius, tube, segmentsR, segmentsT, p , q, heightScale );
-				var sphere = new THREE.SphereGeometry( 75, 20, 10 );
-				var sphere2 = new THREE.SphereGeometry2( 75, 20, 10 );
-				var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
-				var tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
+				// var GrannyKnot =  new THREE.Curves.GrannyKnot();
+				// var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
+				// var torus2 = new THREE.TorusKnotGeometry2( radius, tube, segmentsR, segmentsT, p , q, heightScale );
+				// var sphere = new THREE.SphereGeometry( 75, 20, 10 );
+				// var sphere2 = new THREE.SphereGeometry2( 75, 20, 10 );
+				// var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
+				// var tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
 
 
 				// var benchmarkCopies = 1000;
@@ -86,46 +87,60 @@
 				//   scene.add( object );
 				// }
 
-				object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
+				console.log(THREE.ParametricGeometries);
+				var geo = new THREE.ParametricGeometry(20, 20, THREE.ParametricGeometries.klein);
+				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
+				object.children[ 0 ].doubleSided = true;
 				object.position.set( 0, 0, 0 );
+				object.scale.multiplyScalar(10);
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
-				object.position.set( 0, 100, 0 );
-				scene.add( object );
+				// var geo = new THREE.ParametricGeometry(10, 10, THREE.ParametricGeometries.plane(200, 200));
+				THREE.UVsDebug( geo );
+				document.body.appendChild( THREE.UVsDebug( geo ));
+				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 
 
-				object.children[ 0 ].doubleSided = true;
+				// object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
+				// object.position.set( 0, 0, 0 );
+				// scene.add( object );
 
-				 object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
-				 object.position.set( 500, 0, 0 );
-				 scene.add( object );
+				// object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
+				// object.position.set( 0, 100, 0 );
+				// scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
-				object.position.set( 200, 0, 0 );
-				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
-				object.position.set( 0, 0, 0 );
-				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
-				object.position.set( 100, 0, 0 );
-				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
-				object.position.set( 100, 0, 0 );
-				scene.add( object );
+				//  object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
+				//  object.position.set( 500, 0, 0 );
+				//  scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
-				// object.children[ 0 ].doubleSided = true;
-				object.position.set( -200, 100, 0 );
-				scene.add( object );
+				// object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
+				// object.position.set( 200, 0, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
+				// object.position.set( 0, 0, 0 );
+				// scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
+				// object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
+				// object.position.set( 100, 0, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
+				// object.position.set( 100, 0, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
+				// // object.children[ 0 ].doubleSided = true;
+				// object.position.set( -200, 100, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
 				// object.children[ 0 ].doubleSided = true;
-				object.position.set( -200, 100, 0 );
-				scene.add( object );
+				// object.position.set( -200, 100, 0 );
+				// scene.add( object );
 
 				object = new THREE.AxisHelper();
 				object.position.set( 200, 0, -200 );

examples/webgl_performance.html

@@ -26,7 +26,7 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var objects;
 
 			var mouseX = 0, mouseY = 0;
 
@@ -51,6 +51,8 @@
 				camera.position.z = 3200;
 				scene.add( camera );
 
+				objects = [];
+
 				var material = new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } );
 
 				var loader = new THREE.JSONLoader();
@@ -62,14 +64,14 @@
 
 						var mesh = new THREE.Mesh( geometry, material );
 
-						mesh.position.x = Math.random() * 10000 - 5000;
-						mesh.position.y = Math.random() * 10000 - 5000;
-						mesh.position.z = Math.random() * 10000 - 5000;
+						mesh.position.x = Math.random() * 8000 - 4000;
+						mesh.position.y = Math.random() * 8000 - 4000;
+						mesh.position.z = Math.random() * 8000 - 4000;
 						mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
 						mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
 						mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50 + 100;
-						mesh.matrixAutoUpdate = false;
-						mesh.updateMatrix();
+
+						objects.push( mesh );
 
 						scene.add( mesh );
 
@@ -111,9 +113,16 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
 				camera.lookAt( scene.position );
 
+				for ( var i = 0; i < 5000; i ++ ) {
+
+					objects[ i ].rotation.x += 0.01;
+					objects[ i ].rotation.y += 0.02;
+
+				}
+
+
 				renderer.render( scene, camera );
 
 			}

src/core/Geometry.js

@@ -574,7 +574,7 @@ THREE.Geometry.prototype = {
 		var precisionPoints = 4; // number of decimal points, eg. 4 for epsilon of 0.0001
 		var precision = Math.pow( 10, precisionPoints );
 		var i,il, face;
-		var abcd = 'abcd', o, k;
+		var abcd = 'abcd', o, k, j, jl, u;
 
 		for ( i = 0, il = this.vertices.length; i < il; i ++ ) {
 
@@ -623,8 +623,12 @@ THREE.Geometry.prototype = {
 						// console.log('faces', face.a, face.b, face.c, face.d, 'dup at', k);
 						o.splice(k, 1);
 						this.faces[ i ] = new THREE.Face3(o[0], o[1], o[2]);
-						this.faceVertexUvs[0][i].splice(k, 1);
+						for (j=0,jl=this.faceVertexUvs.length;j<jl;j++) {
+							u = this.faceVertexUvs[j][i];
+							if (u) u.splice(k, 1);
+						}
 						
+						break;
 					}
 				}
 
@@ -634,8 +638,9 @@ THREE.Geometry.prototype = {
 		}
 
 		// Use unique set of vertices
-
+		var diff = this.vertices.length - unique.length;
 		this.vertices = unique;
+		return diff;
 
 	}
 

src/extras/geometries/ParametricGeometries.js

@@ -121,29 +121,41 @@ THREE.TubeGeometry2.prototype.constructor = THREE.TubeGeometry2;
 THREE.TorusKnotGeometry2.prototype = new THREE.Geometry();
 THREE.TorusKnotGeometry2.prototype.constructor = THREE.TorusKnotGeometry2;
 
-
  var sin = Math.sin, cos = Math.cos, pi = Math.PI;
 
+THREE.ParametricGeometries = {
+    klein: function (v, u) {
+        u *= pi;
+        v *= 2 * pi;
+
+        u = u * 2;
+        var x, y, z;
+        if (u < pi) {
+            x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
+            z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
+        } else {
+            x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
+            z = -8 * sin(u);
+        }
+      
+        y = -2 * (1 - cos(u) / 2) * sin(v);
+        
+        return new THREE.Vector3(x, y, z);
+    },
+
+    plane: function (width, height) {
+        
+        return function(u, v) {
+            var x = u * width;
+            var y = 0; 
+            var z = v * height;
 
-function klein(u, v) {
-    u *= pi;
-    v *= 2 * pi;
+            console.log(x, y, z);
 
-    u = u * 2;
-    var x, y, z;
-    if (u < pi) {
-        x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
-        z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
-    } else {
-        x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
-        z = -8 * sin(u);
+            return new THREE.Vector3(x, y, z);
+        };
     }
-  
-    y = -2 * (1 - cos(u) / 2) * sin(v);
-    
-    return new THREE.Vector3(x, y, z);
-}
-
+};
 
 
 THREE.SphereGeometry2 = function(size, x, y) {
@@ -171,7 +183,6 @@ THREE.PlaneGeometry2 = function(width, depth, segmentsWidth, segmentsDepth) {
 
     function plane(u, v) {
         
-        console.log('u, v', u, v);
         var x = u * width;
         var y = 0; 
         var z = v * depth;

src/extras/geometries/ParametricGeometry.js

@@ -12,47 +12,59 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
 	var faces = this.faces;
 	var uvs = this.faceVertexUvs[ 0 ];
 
-	var i, il, theta, j, phi, p;
+	var face3 = true;
 
-	for ( i = 0; i <= slices; i ++ ) {
+	var i, il, j, p;
+	var u, v;
 
-		theta = i / slices;
+	var stackCount = stacks + 1;
+	var sliceCount = slices + 1;
+	
+	for ( i = 0; i <= stacks; i ++ ) {
 
-		for ( j = 0; j < stacks; j ++ ) {
+		v = i / stacks;
 
-			phi = j / stacks;
+		for ( j = 0; j <= slices; j ++ ) {
 
-			p = func( theta, phi );
+			u = j / slices;
+
+			p = func( u, v );
 			verts.push( p );
 
 		}
 	}
 
-	var v = 0, next;
-
-	// Some UV / Face orientation work needs to be done here...
-	for ( i = 0; i < slices; i ++ ) {
-		for ( j = 0; j < stacks; j ++ ) {
-			next = ( j + 1 ) % stacks;
-
-			faces.push( new THREE.Face3( v + j, v + next, v + j + stacks ) );
-			faces.push( new THREE.Face3( v + next, v + next + stacks, v + j + stacks ) );
-
-			uvs.push( [
-				new THREE.UV( i / slices, j / stacks ),
-				new THREE.UV( i / slices, ( j + 1 ) / stacks ),
-				new THREE.UV( ( i + 1 ) / slices, j / stacks )
-			] );
-			uvs.push( [
-				new THREE.UV( i / slices, ( j + 1 ) / stacks ),
-				new THREE.UV( ( i + 1 ) / slices, ( j + 1 ) / stacks ),
-				new THREE.UV( ( i + 1 ) / slices, j / stacks )
-			] );
+	var a, b, c, d;
+	var uva, uvb, uvc, uvd;
+
+	for ( i = 0; i < stacks; i ++ ) {
+		for ( j = 0; j < slices; j ++ ) {
+
+			a = i * stackCount + j;
+			b = i * stackCount + j + 1;
+			c = (i + 1) * stackCount + j;
+			d = (i + 1) * stackCount + j + 1;
+
+			uva = new THREE.UV( i / slices, j / stacks );
+			uvb = new THREE.UV( i / slices, ( j + 1 ) / stacks );
+			uvc = new THREE.UV( ( i + 1 ) / slices, j / stacks );
+			uvd = new THREE.UV( ( i + 1 ) / slices, ( j + 1 ) / stacks );
+
+			faces.push( new THREE.Face3( a, b, c ) );
+			faces.push( new THREE.Face3( b, d, c ) );
+
+			uvs.push( [ uva, uvb, uvc ] );
+			uvs.push( [ uvb, uvd, uvc ] );
 		}
-		v += stacks;
+		
 	}
 
+	console.log(this);
 
+	// magic bullet
+	var diff = this.mergeVertices();
+	console.log('removed ', diff, ' vertices by merging')
+	
 	this.computeCentroids();
 	this.computeFaceNormals();
 	this.computeVertexNormals();