Added THREE.SubdivisionModifier. Removed THREE.GeometryUtils.createSubdivision()

examples/canvas_geometry_subdivison.html

@@ -25,6 +25,7 @@
 		<script src="../src/extras/geometries/CylinderGeometry.js"></script>
 		<script src="../src/extras/geometries/TorusGeometry.js"></script>
 		<script src="../src/extras/geometries/SubdivisionGeometry.js"></script>
+		<script src="../src/extras/modifiers/SubdivisionModifier.js"></script>
 		
 		<script src="fonts/helvetiker_regular.typeface.js"></script>
 		<!--
@@ -59,6 +60,21 @@
 				return new F(klass, args);
 			};
 			
+			
+			function createSubdivision ( geometry, repeats ) {
+
+				repeats = (repeats === undefined ) ? 1 : repeats;
+
+				var smooth = geometry;
+
+				while (repeats--) {
+					smooth = new THREE.SubdivisionGeometry(smooth);
+				}
+
+				return smooth;
+			};
+
+			
 			init();
 			animate();
 			
@@ -77,10 +93,10 @@
 				info.innerHTML = 'Drag to spin the geometry ';
 				container.appendChild( info );
 
-				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.y = 150;
 				camera.position.z = 500;
-				camera.target.position.y = 150;
+				//camera.target.position.y = 150;
 
 				scene = new THREE.Scene();
 
@@ -97,6 +113,10 @@
 
 				}
 				
+				var modifier = new THREE.SubdivisionModifier( 3 );
+				
+				
+				
 				var createGeometry = function(i, subdivisions) {
 					var params = geometriesParams[i];
 					
@@ -106,8 +126,9 @@
 					geometry = createSomething(THREE[params.type], params.args);
 					
 					geometry.mergeVertices();
-					smooth = THREE.GeometryUtils.createSubdivision(geometry, subdivisions);
-					return smooth;
+					//smooth = createSubdivision(geometry, subdivisions);
+					modifier.modify( geometry );
+					return geometry;
 				};
 				
 				
@@ -128,7 +149,8 @@
 				
 				];
 				
-				smooth = createGeometry(0, 3);
+				smooth = createGeometry(3, 2);
+				
 				
 				//geometry = new THREE.CubeGeometry( 200, 200, 200, 2, 2, 2, materials );
 				// make sure mergeVertices(); is run to fix quick duplicated vertices

src/extras/GeometryUtils.js

@@ -1,27 +1,10 @@
 /**
  * @author mrdoob / http://mrdoob.com/
  * @author alteredq / http://alteredqualia.com/
- * @author zz85 / http://www.lab4games.net/zz85/blog/
  */
 
 THREE.GeometryUtils = {
 	
-	// Convience method for creating subdivision geometry  
-	
-	createSubdivision: function( geometry, repeats ) {
-		
-		repeats = (repeats === undefined ) ? 1 : repeats;
-		
-		var smooth = geometry;
-		
-		while (repeats--) {
-			smooth = new THREE.SubdivisionGeometry(smooth);
-		}
-		
-		return smooth;
-	},
-	
-
 	merge: function ( geometry1, object2 /* mesh | geometry */ ) {
 
 		var matrix, matrixRotation,

src/extras/modifiers/SubdivisionModifier.js

@@ -0,0 +1,447 @@
+/*
+ *	@author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog 
+ * 
+ *	Subdivision Geometry Modifier 
+ *		using Catmull-Clark Subdivision Surfaces
+ *		for creating smooth geometry meshes
+ *
+ *	Note: a modifier modifies vertices and faces of geometry,
+ *		so use THREE.GeometryUtils.clone() if orignal geoemtry needs to be retained
+ * 
+ *	Readings: 
+ *		http://en.wikipedia.org/wiki/Catmull%E2%80%93Clark_subdivision_surface
+ *		http://www.rorydriscoll.com/2008/08/01/catmull-clark-subdivision-the-basics/
+ */
+
+THREE.SubdivisionModifier = function( subdivisions ) {
+	
+	this.subdivisions = (subdivisions === undefined ) ? 1 : subdivisions;
+	
+};
+
+//THREE.SubdivisionModifier.prototype = new THREE.Modifier();
+
+THREE.SubdivisionModifier.prototype.constructor = THREE.SubdivisionModifier;
+
+// Applies the "modify" pattern
+THREE.SubdivisionModifier.prototype.modify = function ( geometry ) {
+	
+	var repeats = this.subdivisions;
+	
+	while ( repeats-- ) {
+		this.smooth( geometry );
+	}
+	
+};
+
+// Performs an iteration of Catmull-Clark Subdivision
+THREE.SubdivisionModifier.prototype.smooth = function ( oldGeometry ) {
+	
+	console.log( 'running smooth' );
+	
+	// New set of vertices, faces and uvs
+	var newVertices = [], newFaces = [], newUVs = [];
+	
+	function v( x, y, z ) {
+		newVertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
+	}
+
+	function f4( a, b, c, d, color, material ) {
+		
+		newFaces.push( new THREE.Face4( a, b, c, d, null, color, material) );
+		
+		if (!supportUVs || uvForVertices.length!=0) {
+			newUVs.push( [
+				uvForVertices[a],
+				uvForVertices[b],
+				uvForVertices[c],
+				uvForVertices[d]
+			] );
+			
+		}
+	}
+	
+	function edge_hash( a, b ) {
+
+		return Math.min( a, b ) + "_" + Math.max( a, b );
+
+	};
+	
+	function computeEdgeFaces( geometry ) {
+
+		function addToMap( map, hash, i ) {
+
+			if ( map[ hash ] === undefined ) {
+
+				map[ hash ] = { "set": {}, "array": [] };
+				
+			} 
+			
+			map[ hash ].set[ i ] = 1;
+			map[ hash ].array.push( i );
+
+		};
+
+		var i, il, v1, v2, j, k,
+			face, faceIndices, faceIndex,
+			edge,
+			hash,
+			vfMap = {};
+
+		// construct vertex -> face map
+
+		for( i = 0, il = geometry.faces.length; i < il; i ++ ) {
+
+			face = geometry.faces[ i ];
+
+			if ( face instanceof THREE.Face3 ) {
+
+				hash = edge_hash( face.a, face.b );
+				addToMap( vfMap, hash, i );
+
+				hash = edge_hash( face.b, face.c );
+				addToMap( vfMap, hash, i );
+
+				hash = edge_hash( face.c, face.a );
+				addToMap( vfMap, hash, i );
+
+			} else if ( face instanceof THREE.Face4 ) {
+
+				// in WebGLRenderer quad is tesselated
+				// to triangles: a,b,d / b,c,d
+				// shared edge is: b,d
+
+				// add edge B-D only if you wish to slice a face4
+				// hash = edge_hash( face.b, face.d ); 
+				// addToMap( vfMap, hash, i );
+
+				hash = edge_hash( face.a, face.b );
+				addToMap( vfMap, hash, i );
+
+				hash = edge_hash( face.b, face.c );
+				addToMap( vfMap, hash, i );
+
+				hash = edge_hash( face.c, face.d );
+				addToMap( vfMap, hash, i );
+				
+				hash = edge_hash( face.d, face.a );
+				addToMap( vfMap, hash, i );
+
+			}
+
+		}
+
+		// extract faces
+		
+	
+		geometry.vfMap = vfMap;
+		geometry.edges = [];
+		
+		var numOfEdges = 0;
+		for (i in vfMap) {
+			numOfEdges++;
+			
+			edge = vfMap[i];
+			geometry.edges.push(edge.array);
+			
+		}
+		
+		//console.log('vfMap', vfMap, 'geometry.edges',geometry.edges, 'numOfEdges', numOfEdges);
+
+		return vfMap;
+
+	};
+	
+	var originalPoints = oldGeometry.vertices;
+	var originalFaces = oldGeometry.faces;
+	
+	var newPoints = originalPoints.concat(); // Vertices
+		
+	var facePoints = [], edgePoints = {};
+	
+	var uvForVertices = [];
+	
+	var supportUVs = true;
+		
+	// Step 1
+	//	For each face, add a face point
+	//	Set each face point to be the centroid of all original points for the respective face.
+	
+	var i, il, j, jl, face;
+	
+	// For Uvs
+	var uvs = oldGeometry.faceVertexUvs[0];
+	var abcd = 'abcd', vertice;
+	
+	for (i=0, il = uvs.length; i<il; i++ ) {
+		for (j=0,jl=uvs[i].length;j<jl;j++) {
+			vertice = originalFaces[i][abcd.charAt(j)];
+			
+			if (!uvForVertices[vertice]) {
+				uvForVertices[vertice] = uvs[i][j];
+			} else {
+				//console.log('dup', 	uvForVertices[vertice]);
+			}
+			
+			
+		}
+	}
+			
+	var avgUv ;
+	for (i=0, il = originalFaces.length; i<il ;i++) {
+		face = originalFaces[i];
+		facePoints.push(face.centroid);
+		newPoints.push( new THREE.Vertex(face.centroid) );
+		
+		
+		if (!supportUVs || uvForVertices.length==0) continue;
+		
+		// Prepare subdivided uv
+		
+		avgUv = new THREE.UV();
+		
+		if ( face instanceof THREE.Face3 ) {
+			avgUv.u = uvForVertices[face.a].u + uvForVertices[face.b].u + uvForVertices[face.c].u;
+			avgUv.v = uvForVertices[face.a].v + uvForVertices[face.b].v + uvForVertices[face.c].v;
+			avgUv.u /= 3;
+			avgUv.v /= 3;
+			
+		} else if ( face instanceof THREE.Face4 ) {
+			avgUv.u = uvForVertices[face.a].u + uvForVertices[face.b].u + uvForVertices[face.c].u + uvForVertices[face.d].u;
+			avgUv.v = uvForVertices[face.a].v + uvForVertices[face.b].v + uvForVertices[face.c].v + uvForVertices[face.d].v;
+			avgUv.u /= 4;
+			avgUv.v /= 4;
+		}
+	
+		uvForVertices.push(avgUv);
+	}
+
+	// Step 2
+	//	For each edge, add an edge point.
+	//	Set each edge point to be the average of the two neighbouring face points and its two original endpoints.
+	
+	var vfMap = computeEdgeFaces ( oldGeometry );
+	var edge, faceIndexA, faceIndexB, avg;
+	
+	//console.log('vfMap', vfMap);
+	
+	var edgeInfo;
+	var edgeCount = 0;
+	var originalVerticesLength = originalPoints.length;
+	var edgeVertex, edgeVertexA, edgeVertexB;
+	for (i in vfMap) {
+		edgeInfo = vfMap[i];
+		edge = edgeInfo.array;
+		faceIndexA = edge[0]; // face index a
+		faceIndexB = edge[1]; // face index b
+		
+		avg = new THREE.Vector3();
+		
+		//console.log(i, faceIndexB,facePoints[faceIndexB]);
+		
+		if (edge.length!=2) {
+			console.log('warning, edge fail', edge);
+			continue;
+		}
+		
+		avg.addSelf(facePoints[faceIndexA]);
+		avg.addSelf(facePoints[faceIndexB]);
+		
+		
+		edgeVertex = i.split('_');
+		edgeVertexA = edgeVertex[0];
+		edgeVertexB = edgeVertex[1];
+		
+		avg.addSelf(originalPoints[edgeVertexA].position);
+		avg.addSelf(originalPoints[edgeVertexB].position);
+		
+		avg.multiplyScalar(0.25);
+		
+		edgePoints[i] = originalVerticesLength + originalFaces.length + edgeCount;
+		
+		newPoints.push( new THREE.Vertex(avg) );
+	
+		edgeCount ++;
+		
+		if (!supportUVs || uvForVertices.length==0) continue;
+		
+		// Prepare subdivided uv
+		
+		avgUv = new THREE.UV();
+		
+		avgUv.u = uvForVertices[edgeVertexA].u + uvForVertices[edgeVertexB].u;
+		avgUv.v = uvForVertices[edgeVertexA].v + uvForVertices[edgeVertexB].v;
+		avgUv.u /= 2;
+		avgUv.v /= 2;
+	
+		uvForVertices.push(avgUv);
+		
+	}
+	
+	// Step 3
+	//	For each face point, add an edge for every edge of the face, 
+	//	connecting the face point to each edge point for the face.
+	
+	
+	var facePt, currentVerticeIndex;
+	
+	var hashAB, hashBC, hashCD, hashDA, hashCA;
+	
+	
+	for (i=0, il = facePoints.length; i<il ;i++) { // for every face
+		facePt = facePoints[i];
+		face = originalFaces[i];
+		currentVerticeIndex = originalVerticesLength+ i;
+		
+		if ( face instanceof THREE.Face3 ) {
+			
+			// create 3 face4s
+			
+			hashAB = edge_hash( face.a, face.b );
+			hashBC = edge_hash( face.b, face.c );
+			hashCA = edge_hash( face.c, face.a );
+
+			
+			f4( currentVerticeIndex, edgePoints[hashAB], face.b, edgePoints[hashBC], face.color, face.material);
+			f4( currentVerticeIndex, edgePoints[hashBC], face.c, edgePoints[hashCA], face.color, face.material);
+			f4( currentVerticeIndex, edgePoints[hashCA], face.a, edgePoints[hashAB], face.color, face.material);
+			// face subdivide color and materials too? 
+			
+			
+			
+		} else if ( face instanceof THREE.Face4 ) {
+			// create 4 face4s
+			
+			hashAB = edge_hash( face.a, face.b );
+			hashBC = edge_hash( face.b, face.c );
+			hashCD = edge_hash( face.c, face.d );
+			hashDA = edge_hash( face.d, face.a );
+			
+			f4( currentVerticeIndex, edgePoints[hashAB], face.b, edgePoints[hashBC], face.color, face.material);
+			f4( currentVerticeIndex, edgePoints[hashBC], face.c, edgePoints[hashCD], face.color, face.material);
+			f4( currentVerticeIndex, edgePoints[hashCD], face.d, edgePoints[hashDA], face.color, face.material);
+			f4( currentVerticeIndex, edgePoints[hashDA], face.a, edgePoints[hashAB], face.color, face.material);
+
+				
+		} else {
+			console.log('face should be a face!', face);
+		}
+	}
+	
+	newVertices = newPoints;
+	
+	// console.log('original ', oldGeometry.vertices.length, oldGeometry.faces.length );
+	// console.log('new points', newPoints.length, 'faces', newFaces.length );
+	
+	// Step 4
+	
+	//	For each original point P, 
+	//		take the average F of all n face points for faces touching P, 
+	//		and take the average R of all n edge midpoints for edges touching P, 
+	//		where each edge midpoint is the average of its two endpoint vertices. 
+	//	Move each original point to the point
+	
+	
+	
+	var vertexEdgeMap = {};
+	var vertexFaceMap = {};
+	
+	var addVertexEdgeMap = function(vertex, edge) {
+		if (vertexEdgeMap[vertex]===undefined) {
+			vertexEdgeMap[vertex] = [];
+		}
+		
+		vertexEdgeMap[vertex].push(edge);
+	};
+	
+	var addVertexFaceMap = function(vertex, face) {
+		if (vertexFaceMap[vertex]===undefined) {
+			vertexFaceMap[vertex] = {};
+		}
+		
+		vertexFaceMap[vertex][face] = null;
+	};
+	
+	// Prepares vertexEdgeMap and vertexFaceMap
+	for (i in vfMap) { // This is for every edge
+		edgeInfo = vfMap[i];
+		
+		edgeVertex = i.split('_');
+		edgeVertexA = edgeVertex[0];
+		edgeVertexB = edgeVertex[1];
+		
+		addVertexEdgeMap(edgeVertexA, [edgeVertexA, edgeVertexB] );
+		addVertexEdgeMap(edgeVertexB, [edgeVertexA, edgeVertexB] );
+		
+		edge = edgeInfo.array;
+		faceIndexA = edge[0]; // face index a
+		faceIndexB = edge[1]; // face index b
+		
+		addVertexFaceMap(edgeVertexA, faceIndexA);
+		addVertexFaceMap(edgeVertexA, faceIndexB);
+		addVertexFaceMap(edgeVertexB, faceIndexA);
+		addVertexFaceMap(edgeVertexB, faceIndexB);
+		
+	}
+	
+	//console.log('vertexEdgeMap',vertexEdgeMap, 'vertexFaceMap', vertexFaceMap);
+	
+	var F = new THREE.Vector3();
+	var R = new THREE.Vector3();
+
+	var n;
+	for (i=0, il = originalPoints.length; i<il; i++) {
+		// (F + 2R + (n-3)P) / n
+		
+		if (vertexEdgeMap[i]===undefined) continue;
+		
+		F.set(0,0,0);
+		R.set(0,0,0);
+		var newPos =  new THREE.Vector3(0,0,0);
+		
+		var f =0;
+		for (j in vertexFaceMap[i]) {
+			
+			F.addSelf(facePoints[j]);
+			f++;
+		}
+		
+		F.divideScalar(f);
+		
+		n = vertexEdgeMap[i].length;
+		
+		for (j=0; j<n;j++) {
+			edge = vertexEdgeMap[i][j];
+			var midPt = originalPoints[edge[0]].position.clone().addSelf(originalPoints[edge[1]].position).divideScalar(2);
+			R.addSelf(midPt);
+			// R.addSelf(originalPoints[edge[0]].position);
+			// R.addSelf(originalPoints[edge[1]].position);
+		}
+		
+		R.divideScalar(n)
+		
+		newPos.addSelf(originalPoints[i].position);
+		newPos.multiplyScalar(n - 3);
+		
+		newPos.addSelf(F);
+		newPos.addSelf(R.multiplyScalar(2));
+		newPos.divideScalar(n);
+		
+		newVertices[i].position = newPos;
+		
+		
+	}
+	
+	var newGeometry = oldGeometry; // Let's pretend the old geometry is now new :P
+	
+	newGeometry.vertices = newVertices;
+	newGeometry.faces = newFaces;
+	newGeometry.faceVertexUvs[ 0 ] = newUVs;
+	
+	delete newGeometry.__tmpVertices; // makes __tmpVertices undefined :P
+	
+	newGeometry.computeCentroids();
+	newGeometry.computeFaceNormals();
+	newGeometry.computeVertexNormals();
+	
+};

utils/build.py

@@ -117,6 +117,7 @@ EXTRAS_FILES = [
 'extras/geometries/TextGeometry.js',
 'extras/geometries/TorusGeometry.js',
 'extras/geometries/TorusKnotGeometry.js',
+'extras/modifiers/SubdivisionModifier.js',
 'extras/loaders/Loader.js',
 'extras/loaders/BinaryLoader.js',
 'extras/loaders/ColladaLoader.js',