SubdivisionModifier.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. import {
  2. Face3,
  3. Geometry,
  4. Vector2,
  5. Vector3
  6. } from "../../../build/three.module.js";
  7. /**
  8. * Subdivision Geometry Modifier
  9. * using Loop Subdivision Scheme
  10. *
  11. * References:
  12. * http://graphics.stanford.edu/~mdfisher/subdivision.html
  13. * http://www.holmes3d.net/graphics/subdivision/
  14. * http://www.cs.rutgers.edu/~decarlo/readings/subdiv-sg00c.pdf
  15. *
  16. * Known Issues:
  17. * - currently doesn't handle "Sharp Edges"
  18. */
  19. var SubdivisionModifier = function ( subdivisions ) {
  20. this.subdivisions = ( subdivisions === undefined ) ? 1 : subdivisions;
  21. };
  22. // Applies the "modify" pattern
  23. SubdivisionModifier.prototype.modify = function ( geometry ) {
  24. if ( geometry.isBufferGeometry ) {
  25. geometry = new Geometry().fromBufferGeometry( geometry );
  26. } else {
  27. geometry = geometry.clone();
  28. }
  29. geometry.mergeVertices();
  30. var repeats = this.subdivisions;
  31. while ( repeats -- > 0 ) {
  32. this.smooth( geometry );
  33. }
  34. geometry.computeFaceNormals();
  35. geometry.computeVertexNormals();
  36. return geometry;
  37. };
  38. ( function () {
  39. // Some constants
  40. var ABC = [ 'a', 'b', 'c' ];
  41. function getEdge( a, b, map ) {
  42. var vertexIndexA = Math.min( a, b );
  43. var vertexIndexB = Math.max( a, b );
  44. var key = vertexIndexA + "_" + vertexIndexB;
  45. return map[ key ];
  46. }
  47. function processEdge( a, b, vertices, map, face, metaVertices ) {
  48. var vertexIndexA = Math.min( a, b );
  49. var vertexIndexB = Math.max( a, b );
  50. var key = vertexIndexA + "_" + vertexIndexB;
  51. var edge;
  52. if ( key in map ) {
  53. edge = map[ key ];
  54. } else {
  55. var vertexA = vertices[ vertexIndexA ];
  56. var vertexB = vertices[ vertexIndexB ];
  57. edge = {
  58. a: vertexA, // pointer reference
  59. b: vertexB,
  60. newEdge: null,
  61. // aIndex: a, // numbered reference
  62. // bIndex: b,
  63. faces: [] // pointers to face
  64. };
  65. map[ key ] = edge;
  66. }
  67. edge.faces.push( face );
  68. metaVertices[ a ].edges.push( edge );
  69. metaVertices[ b ].edges.push( edge );
  70. }
  71. function generateLookups( vertices, faces, metaVertices, edges ) {
  72. var i, il, face;
  73. for ( i = 0, il = vertices.length; i < il; i ++ ) {
  74. metaVertices[ i ] = { edges: [] };
  75. }
  76. for ( i = 0, il = faces.length; i < il; i ++ ) {
  77. face = faces[ i ];
  78. processEdge( face.a, face.b, vertices, edges, face, metaVertices );
  79. processEdge( face.b, face.c, vertices, edges, face, metaVertices );
  80. processEdge( face.c, face.a, vertices, edges, face, metaVertices );
  81. }
  82. }
  83. function newFace( newFaces, a, b, c, materialIndex ) {
  84. newFaces.push( new Face3( a, b, c, undefined, undefined, materialIndex ) );
  85. }
  86. function midpoint( a, b ) {
  87. return ( Math.abs( b - a ) / 2 ) + Math.min( a, b );
  88. }
  89. function newUv( newUvs, a, b, c ) {
  90. newUvs.push( [ a.clone(), b.clone(), c.clone() ] );
  91. }
  92. /////////////////////////////
  93. // Performs one iteration of Subdivision
  94. SubdivisionModifier.prototype.smooth = function ( geometry ) {
  95. var tmp = new Vector3();
  96. var oldVertices, oldFaces, oldUvs;
  97. var newVertices, newFaces, newUVs = [];
  98. var n, i, il, j, k;
  99. var metaVertices, sourceEdges;
  100. // new stuff.
  101. var sourceEdges, newEdgeVertices, newSourceVertices;
  102. oldVertices = geometry.vertices; // { x, y, z}
  103. oldFaces = geometry.faces; // { a: oldVertex1, b: oldVertex2, c: oldVertex3 }
  104. oldUvs = geometry.faceVertexUvs;
  105. var hasUvs = oldUvs[ 0 ] !== undefined && oldUvs[ 0 ].length > 0;
  106. if ( hasUvs ) {
  107. for ( var j = 0; j < oldUvs.length; j ++ ) {
  108. newUVs.push( [] );
  109. }
  110. }
  111. /******************************************************
  112. *
  113. * Step 0: Preprocess Geometry to Generate edges Lookup
  114. *
  115. *******************************************************/
  116. metaVertices = new Array( oldVertices.length );
  117. sourceEdges = {}; // Edge => { oldVertex1, oldVertex2, faces[] }
  118. generateLookups( oldVertices, oldFaces, metaVertices, sourceEdges );
  119. /******************************************************
  120. *
  121. * Step 1.
  122. * For each edge, create a new Edge Vertex,
  123. * then position it.
  124. *
  125. *******************************************************/
  126. newEdgeVertices = [];
  127. var other, currentEdge, newEdge, face;
  128. var edgeVertexWeight, adjacentVertexWeight, connectedFaces;
  129. for ( i in sourceEdges ) {
  130. currentEdge = sourceEdges[ i ];
  131. newEdge = new Vector3();
  132. edgeVertexWeight = 3 / 8;
  133. adjacentVertexWeight = 1 / 8;
  134. connectedFaces = currentEdge.faces.length;
  135. // check how many linked faces. 2 should be correct.
  136. if ( connectedFaces != 2 ) {
  137. // if length is not 2, handle condition
  138. edgeVertexWeight = 0.5;
  139. adjacentVertexWeight = 0;
  140. if ( connectedFaces != 1 ) {
  141. // console.warn( 'Subdivision Modifier: Number of connected faces != 2, is: ', connectedFaces, currentEdge );
  142. }
  143. }
  144. newEdge.addVectors( currentEdge.a, currentEdge.b ).multiplyScalar( edgeVertexWeight );
  145. tmp.set( 0, 0, 0 );
  146. for ( j = 0; j < connectedFaces; j ++ ) {
  147. face = currentEdge.faces[ j ];
  148. for ( k = 0; k < 3; k ++ ) {
  149. other = oldVertices[ face[ ABC[ k ] ] ];
  150. if ( other !== currentEdge.a && other !== currentEdge.b ) break;
  151. }
  152. tmp.add( other );
  153. }
  154. tmp.multiplyScalar( adjacentVertexWeight );
  155. newEdge.add( tmp );
  156. currentEdge.newEdge = newEdgeVertices.length;
  157. newEdgeVertices.push( newEdge );
  158. // console.log(currentEdge, newEdge);
  159. }
  160. /******************************************************
  161. *
  162. * Step 2.
  163. * Reposition each source vertices.
  164. *
  165. *******************************************************/
  166. var beta, sourceVertexWeight, connectingVertexWeight;
  167. var connectingEdge, connectingEdges, oldVertex, newSourceVertex;
  168. newSourceVertices = [];
  169. for ( i = 0, il = oldVertices.length; i < il; i ++ ) {
  170. oldVertex = oldVertices[ i ];
  171. // find all connecting edges (using lookupTable)
  172. connectingEdges = metaVertices[ i ].edges;
  173. n = connectingEdges.length;
  174. if ( n == 3 ) {
  175. beta = 3 / 16;
  176. } else if ( n > 3 ) {
  177. beta = 3 / ( 8 * n ); // Warren's modified formula
  178. }
  179. // Loop's original beta formula
  180. // beta = 1 / n * ( 5/8 - Math.pow( 3/8 + 1/4 * Math.cos( 2 * Math. PI / n ), 2) );
  181. sourceVertexWeight = 1 - n * beta;
  182. connectingVertexWeight = beta;
  183. if ( n <= 2 ) {
  184. // crease and boundary rules
  185. // console.warn('crease and boundary rules');
  186. if ( n == 2 ) {
  187. // console.warn( '2 connecting edges', connectingEdges );
  188. sourceVertexWeight = 3 / 4;
  189. connectingVertexWeight = 1 / 8;
  190. // sourceVertexWeight = 1;
  191. // connectingVertexWeight = 0;
  192. } else if ( n == 1 ) {
  193. // console.warn( 'only 1 connecting edge' );
  194. } else if ( n == 0 ) {
  195. // console.warn( '0 connecting edges' );
  196. }
  197. }
  198. newSourceVertex = oldVertex.clone().multiplyScalar( sourceVertexWeight );
  199. tmp.set( 0, 0, 0 );
  200. for ( j = 0; j < n; j ++ ) {
  201. connectingEdge = connectingEdges[ j ];
  202. other = connectingEdge.a !== oldVertex ? connectingEdge.a : connectingEdge.b;
  203. tmp.add( other );
  204. }
  205. tmp.multiplyScalar( connectingVertexWeight );
  206. newSourceVertex.add( tmp );
  207. newSourceVertices.push( newSourceVertex );
  208. }
  209. /******************************************************
  210. *
  211. * Step 3.
  212. * Generate Faces between source vertices
  213. * and edge vertices.
  214. *
  215. *******************************************************/
  216. newVertices = newSourceVertices.concat( newEdgeVertices );
  217. var sl = newSourceVertices.length, edge1, edge2, edge3;
  218. newFaces = [];
  219. var uv, x0, x1, x2;
  220. var x3 = new Vector2();
  221. var x4 = new Vector2();
  222. var x5 = new Vector2();
  223. for ( i = 0, il = oldFaces.length; i < il; i ++ ) {
  224. face = oldFaces[ i ];
  225. // find the 3 new edges vertex of each old face
  226. edge1 = getEdge( face.a, face.b, sourceEdges ).newEdge + sl;
  227. edge2 = getEdge( face.b, face.c, sourceEdges ).newEdge + sl;
  228. edge3 = getEdge( face.c, face.a, sourceEdges ).newEdge + sl;
  229. // create 4 faces.
  230. newFace( newFaces, edge1, edge2, edge3, face.materialIndex );
  231. newFace( newFaces, face.a, edge1, edge3, face.materialIndex );
  232. newFace( newFaces, face.b, edge2, edge1, face.materialIndex );
  233. newFace( newFaces, face.c, edge3, edge2, face.materialIndex );
  234. // create 4 new uv's
  235. if ( hasUvs ) {
  236. for ( var j = 0; j < oldUvs.length; j ++ ) {
  237. uv = oldUvs[ j ][ i ];
  238. x0 = uv[ 0 ];
  239. x1 = uv[ 1 ];
  240. x2 = uv[ 2 ];
  241. x3.set( midpoint( x0.x, x1.x ), midpoint( x0.y, x1.y ) );
  242. x4.set( midpoint( x1.x, x2.x ), midpoint( x1.y, x2.y ) );
  243. x5.set( midpoint( x0.x, x2.x ), midpoint( x0.y, x2.y ) );
  244. newUv( newUVs[ j ], x3, x4, x5 );
  245. newUv( newUVs[ j ], x0, x3, x5 );
  246. newUv( newUVs[ j ], x1, x4, x3 );
  247. newUv( newUVs[ j ], x2, x5, x4 );
  248. }
  249. }
  250. }
  251. // Overwrite old arrays
  252. geometry.vertices = newVertices;
  253. geometry.faces = newFaces;
  254. if ( hasUvs ) geometry.faceVertexUvs = newUVs;
  255. // console.log('done');
  256. };
  257. } )();
  258. export { SubdivisionModifier };