GeometryCompressionUtils.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. /**
  2. * Octahedron and Quantization encodings based on work by:
  3. *
  4. * @link https://github.com/tsherif/mesh-quantization-example
  5. *
  6. */
  7. import {
  8. BufferAttribute,
  9. Matrix3,
  10. Matrix4,
  11. Vector3
  12. } from 'three';
  13. /**
  14. * Make the input geometry's normal attribute encoded and compressed by 3 different methods.
  15. *
  16. * @param {THREE.BufferGeometry} geometry
  17. * @param {String} encodeMethod "DEFAULT" || "OCT1Byte" || "OCT2Byte" || "ANGLES"
  18. *
  19. */
  20. function compressNormals( geometry, encodeMethod ) {
  21. const normal = geometry.attributes.normal;
  22. if ( ! normal ) {
  23. console.error( 'Geometry must contain normal attribute. ' );
  24. }
  25. if ( normal.isPacked ) return;
  26. if ( normal.itemSize != 3 ) {
  27. console.error( 'normal.itemSize is not 3, which cannot be encoded. ' );
  28. }
  29. const array = normal.array;
  30. const count = normal.count;
  31. let result;
  32. if ( encodeMethod == 'DEFAULT' ) {
  33. // TODO: Add 1 byte to the result, making the encoded length to be 4 bytes.
  34. result = new Uint8Array( count * 3 );
  35. for ( let idx = 0; idx < array.length; idx += 3 ) {
  36. const encoded = defaultEncode( array[ idx ], array[ idx + 1 ], array[ idx + 2 ], 1 );
  37. result[ idx + 0 ] = encoded[ 0 ];
  38. result[ idx + 1 ] = encoded[ 1 ];
  39. result[ idx + 2 ] = encoded[ 2 ];
  40. }
  41. geometry.setAttribute( 'normal', new BufferAttribute( result, 3, true ) );
  42. geometry.attributes.normal.bytes = result.length * 1;
  43. } else if ( encodeMethod == 'OCT1Byte' ) {
  44. /**
  45. * It is not recommended to use 1-byte octahedron normals encoding unless you want to extremely reduce the memory usage
  46. * As it makes vertex data not aligned to a 4 byte boundary which may harm some WebGL implementations and sometimes the normal distortion is visible
  47. * Please refer to @zeux 's comments in https://github.com/mrdoob/three.js/pull/18208
  48. */
  49. result = new Int8Array( count * 2 );
  50. for ( let idx = 0; idx < array.length; idx += 3 ) {
  51. const encoded = octEncodeBest( array[ idx ], array[ idx + 1 ], array[ idx + 2 ], 1 );
  52. result[ idx / 3 * 2 + 0 ] = encoded[ 0 ];
  53. result[ idx / 3 * 2 + 1 ] = encoded[ 1 ];
  54. }
  55. geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
  56. geometry.attributes.normal.bytes = result.length * 1;
  57. } else if ( encodeMethod == 'OCT2Byte' ) {
  58. result = new Int16Array( count * 2 );
  59. for ( let idx = 0; idx < array.length; idx += 3 ) {
  60. const encoded = octEncodeBest( array[ idx ], array[ idx + 1 ], array[ idx + 2 ], 2 );
  61. result[ idx / 3 * 2 + 0 ] = encoded[ 0 ];
  62. result[ idx / 3 * 2 + 1 ] = encoded[ 1 ];
  63. }
  64. geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
  65. geometry.attributes.normal.bytes = result.length * 2;
  66. } else if ( encodeMethod == 'ANGLES' ) {
  67. result = new Uint16Array( count * 2 );
  68. for ( let idx = 0; idx < array.length; idx += 3 ) {
  69. const encoded = anglesEncode( array[ idx ], array[ idx + 1 ], array[ idx + 2 ] );
  70. result[ idx / 3 * 2 + 0 ] = encoded[ 0 ];
  71. result[ idx / 3 * 2 + 1 ] = encoded[ 1 ];
  72. }
  73. geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
  74. geometry.attributes.normal.bytes = result.length * 2;
  75. } else {
  76. console.error( 'Unrecognized encoding method, should be `DEFAULT` or `ANGLES` or `OCT`. ' );
  77. }
  78. geometry.attributes.normal.needsUpdate = true;
  79. geometry.attributes.normal.isPacked = true;
  80. geometry.attributes.normal.packingMethod = encodeMethod;
  81. }
  82. /**
  83. * Make the input geometry's position attribute encoded and compressed.
  84. *
  85. * @param {THREE.BufferGeometry} geometry
  86. *
  87. */
  88. function compressPositions( geometry ) {
  89. const position = geometry.attributes.position;
  90. if ( ! position ) {
  91. console.error( 'Geometry must contain position attribute. ' );
  92. }
  93. if ( position.isPacked ) return;
  94. if ( position.itemSize != 3 ) {
  95. console.error( 'position.itemSize is not 3, which cannot be packed. ' );
  96. }
  97. const array = position.array;
  98. const encodingBytes = 2;
  99. const result = quantizedEncode( array, encodingBytes );
  100. const quantized = result.quantized;
  101. // IMPORTANT: calculate original geometry bounding info first, before updating packed positions
  102. if ( geometry.boundingBox == null ) geometry.computeBoundingBox();
  103. if ( geometry.boundingSphere == null ) geometry.computeBoundingSphere();
  104. geometry.setAttribute( 'position', new BufferAttribute( quantized, 3 ) );
  105. geometry.attributes.position.isPacked = true;
  106. geometry.attributes.position.needsUpdate = true;
  107. geometry.attributes.position.bytes = quantized.length * encodingBytes;
  108. }
  109. /**
  110. * Make the input geometry's uv attribute encoded and compressed.
  111. *
  112. * @param {THREE.BufferGeometry} geometry
  113. *
  114. */
  115. function compressUvs( geometry ) {
  116. const uvs = geometry.attributes.uv;
  117. if ( ! uvs ) {
  118. console.error( 'Geometry must contain uv attribute. ' );
  119. }
  120. if ( uvs.isPacked ) return;
  121. const range = { min: Infinity, max: - Infinity };
  122. const array = uvs.array;
  123. for ( let i = 0; i < array.length; i ++ ) {
  124. range.min = Math.min( range.min, array[ i ] );
  125. range.max = Math.max( range.max, array[ i ] );
  126. }
  127. let result;
  128. if ( range.min >= - 1.0 && range.max <= 1.0 ) {
  129. // use default encoding method
  130. result = new Uint16Array( array.length );
  131. for ( let i = 0; i < array.length; i += 2 ) {
  132. const encoded = defaultEncode( array[ i ], array[ i + 1 ], 0, 2 );
  133. result[ i ] = encoded[ 0 ];
  134. result[ i + 1 ] = encoded[ 1 ];
  135. }
  136. geometry.setAttribute( 'uv', new BufferAttribute( result, 2, true ) );
  137. geometry.attributes.uv.isPacked = true;
  138. geometry.attributes.uv.needsUpdate = true;
  139. geometry.attributes.uv.bytes = result.length * 2;
  140. } else {
  141. // use quantized encoding method
  142. result = quantizedEncodeUV( array, 2 );
  143. geometry.setAttribute( 'uv', new BufferAttribute( result.quantized, 2 ) );
  144. geometry.attributes.uv.isPacked = true;
  145. geometry.attributes.uv.needsUpdate = true;
  146. geometry.attributes.uv.bytes = result.quantized.length * 2;
  147. }
  148. }
  149. // Encoding functions
  150. function defaultEncode( x, y, z, bytes ) {
  151. if ( bytes == 1 ) {
  152. const tmpx = Math.round( ( x + 1 ) * 0.5 * 255 );
  153. const tmpy = Math.round( ( y + 1 ) * 0.5 * 255 );
  154. const tmpz = Math.round( ( z + 1 ) * 0.5 * 255 );
  155. return new Uint8Array( [ tmpx, tmpy, tmpz ] );
  156. } else if ( bytes == 2 ) {
  157. const tmpx = Math.round( ( x + 1 ) * 0.5 * 65535 );
  158. const tmpy = Math.round( ( y + 1 ) * 0.5 * 65535 );
  159. const tmpz = Math.round( ( z + 1 ) * 0.5 * 65535 );
  160. return new Uint16Array( [ tmpx, tmpy, tmpz ] );
  161. } else {
  162. console.error( 'number of bytes must be 1 or 2' );
  163. }
  164. }
  165. // for `Angles` encoding
  166. function anglesEncode( x, y, z ) {
  167. const normal0 = parseInt( 0.5 * ( 1.0 + Math.atan2( y, x ) / Math.PI ) * 65535 );
  168. const normal1 = parseInt( 0.5 * ( 1.0 + z ) * 65535 );
  169. return new Uint16Array( [ normal0, normal1 ] );
  170. }
  171. // for `Octahedron` encoding
  172. function octEncodeBest( x, y, z, bytes ) {
  173. let oct, dec, best, currentCos, bestCos;
  174. // Test various combinations of ceil and floor
  175. // to minimize rounding errors
  176. best = oct = octEncodeVec3( x, y, z, 'floor', 'floor' );
  177. dec = octDecodeVec2( oct );
  178. bestCos = dot( x, y, z, dec );
  179. oct = octEncodeVec3( x, y, z, 'ceil', 'floor' );
  180. dec = octDecodeVec2( oct );
  181. currentCos = dot( x, y, z, dec );
  182. if ( currentCos > bestCos ) {
  183. best = oct;
  184. bestCos = currentCos;
  185. }
  186. oct = octEncodeVec3( x, y, z, 'floor', 'ceil' );
  187. dec = octDecodeVec2( oct );
  188. currentCos = dot( x, y, z, dec );
  189. if ( currentCos > bestCos ) {
  190. best = oct;
  191. bestCos = currentCos;
  192. }
  193. oct = octEncodeVec3( x, y, z, 'ceil', 'ceil' );
  194. dec = octDecodeVec2( oct );
  195. currentCos = dot( x, y, z, dec );
  196. if ( currentCos > bestCos ) {
  197. best = oct;
  198. }
  199. return best;
  200. function octEncodeVec3( x0, y0, z0, xfunc, yfunc ) {
  201. let x = x0 / ( Math.abs( x0 ) + Math.abs( y0 ) + Math.abs( z0 ) );
  202. let y = y0 / ( Math.abs( x0 ) + Math.abs( y0 ) + Math.abs( z0 ) );
  203. if ( z < 0 ) {
  204. const tempx = ( 1 - Math.abs( y ) ) * ( x >= 0 ? 1 : - 1 );
  205. const tempy = ( 1 - Math.abs( x ) ) * ( y >= 0 ? 1 : - 1 );
  206. x = tempx;
  207. y = tempy;
  208. let diff = 1 - Math.abs( x ) - Math.abs( y );
  209. if ( diff > 0 ) {
  210. diff += 0.001;
  211. x += x > 0 ? diff / 2 : - diff / 2;
  212. y += y > 0 ? diff / 2 : - diff / 2;
  213. }
  214. }
  215. if ( bytes == 1 ) {
  216. return new Int8Array( [
  217. Math[ xfunc ]( x * 127.5 + ( x < 0 ? 1 : 0 ) ),
  218. Math[ yfunc ]( y * 127.5 + ( y < 0 ? 1 : 0 ) )
  219. ] );
  220. }
  221. if ( bytes == 2 ) {
  222. return new Int16Array( [
  223. Math[ xfunc ]( x * 32767.5 + ( x < 0 ? 1 : 0 ) ),
  224. Math[ yfunc ]( y * 32767.5 + ( y < 0 ? 1 : 0 ) )
  225. ] );
  226. }
  227. }
  228. function octDecodeVec2( oct ) {
  229. let x = oct[ 0 ];
  230. let y = oct[ 1 ];
  231. if ( bytes == 1 ) {
  232. x /= x < 0 ? 127 : 128;
  233. y /= y < 0 ? 127 : 128;
  234. } else if ( bytes == 2 ) {
  235. x /= x < 0 ? 32767 : 32768;
  236. y /= y < 0 ? 32767 : 32768;
  237. }
  238. const z = 1 - Math.abs( x ) - Math.abs( y );
  239. if ( z < 0 ) {
  240. const tmpx = x;
  241. x = ( 1 - Math.abs( y ) ) * ( x >= 0 ? 1 : - 1 );
  242. y = ( 1 - Math.abs( tmpx ) ) * ( y >= 0 ? 1 : - 1 );
  243. }
  244. const length = Math.sqrt( x * x + y * y + z * z );
  245. return [
  246. x / length,
  247. y / length,
  248. z / length
  249. ];
  250. }
  251. function dot( x, y, z, vec3 ) {
  252. return x * vec3[ 0 ] + y * vec3[ 1 ] + z * vec3[ 2 ];
  253. }
  254. }
  255. function quantizedEncode( array, bytes ) {
  256. let quantized, segments;
  257. if ( bytes == 1 ) {
  258. quantized = new Uint8Array( array.length );
  259. segments = 255;
  260. } else if ( bytes == 2 ) {
  261. quantized = new Uint16Array( array.length );
  262. segments = 65535;
  263. } else {
  264. console.error( 'number of bytes error! ' );
  265. }
  266. const decodeMat = new Matrix4();
  267. const min = new Float32Array( 3 );
  268. const max = new Float32Array( 3 );
  269. min[ 0 ] = min[ 1 ] = min[ 2 ] = Number.MAX_VALUE;
  270. max[ 0 ] = max[ 1 ] = max[ 2 ] = - Number.MAX_VALUE;
  271. for ( let i = 0; i < array.length; i += 3 ) {
  272. min[ 0 ] = Math.min( min[ 0 ], array[ i + 0 ] );
  273. min[ 1 ] = Math.min( min[ 1 ], array[ i + 1 ] );
  274. min[ 2 ] = Math.min( min[ 2 ], array[ i + 2 ] );
  275. max[ 0 ] = Math.max( max[ 0 ], array[ i + 0 ] );
  276. max[ 1 ] = Math.max( max[ 1 ], array[ i + 1 ] );
  277. max[ 2 ] = Math.max( max[ 2 ], array[ i + 2 ] );
  278. }
  279. decodeMat.scale( new Vector3(
  280. ( max[ 0 ] - min[ 0 ] ) / segments,
  281. ( max[ 1 ] - min[ 1 ] ) / segments,
  282. ( max[ 2 ] - min[ 2 ] ) / segments
  283. ) );
  284. decodeMat.elements[ 12 ] = min[ 0 ];
  285. decodeMat.elements[ 13 ] = min[ 1 ];
  286. decodeMat.elements[ 14 ] = min[ 2 ];
  287. decodeMat.transpose();
  288. const multiplier = new Float32Array( [
  289. max[ 0 ] !== min[ 0 ] ? segments / ( max[ 0 ] - min[ 0 ] ) : 0,
  290. max[ 1 ] !== min[ 1 ] ? segments / ( max[ 1 ] - min[ 1 ] ) : 0,
  291. max[ 2 ] !== min[ 2 ] ? segments / ( max[ 2 ] - min[ 2 ] ) : 0
  292. ] );
  293. for ( let i = 0; i < array.length; i += 3 ) {
  294. quantized[ i + 0 ] = Math.floor( ( array[ i + 0 ] - min[ 0 ] ) * multiplier[ 0 ] );
  295. quantized[ i + 1 ] = Math.floor( ( array[ i + 1 ] - min[ 1 ] ) * multiplier[ 1 ] );
  296. quantized[ i + 2 ] = Math.floor( ( array[ i + 2 ] - min[ 2 ] ) * multiplier[ 2 ] );
  297. }
  298. return {
  299. quantized: quantized,
  300. decodeMat: decodeMat
  301. };
  302. }
  303. function quantizedEncodeUV( array, bytes ) {
  304. let quantized, segments;
  305. if ( bytes == 1 ) {
  306. quantized = new Uint8Array( array.length );
  307. segments = 255;
  308. } else if ( bytes == 2 ) {
  309. quantized = new Uint16Array( array.length );
  310. segments = 65535;
  311. } else {
  312. console.error( 'number of bytes error! ' );
  313. }
  314. const decodeMat = new Matrix3();
  315. const min = new Float32Array( 2 );
  316. const max = new Float32Array( 2 );
  317. min[ 0 ] = min[ 1 ] = Number.MAX_VALUE;
  318. max[ 0 ] = max[ 1 ] = - Number.MAX_VALUE;
  319. for ( let i = 0; i < array.length; i += 2 ) {
  320. min[ 0 ] = Math.min( min[ 0 ], array[ i + 0 ] );
  321. min[ 1 ] = Math.min( min[ 1 ], array[ i + 1 ] );
  322. max[ 0 ] = Math.max( max[ 0 ], array[ i + 0 ] );
  323. max[ 1 ] = Math.max( max[ 1 ], array[ i + 1 ] );
  324. }
  325. decodeMat.scale(
  326. ( max[ 0 ] - min[ 0 ] ) / segments,
  327. ( max[ 1 ] - min[ 1 ] ) / segments
  328. );
  329. decodeMat.elements[ 6 ] = min[ 0 ];
  330. decodeMat.elements[ 7 ] = min[ 1 ];
  331. decodeMat.transpose();
  332. const multiplier = new Float32Array( [
  333. max[ 0 ] !== min[ 0 ] ? segments / ( max[ 0 ] - min[ 0 ] ) : 0,
  334. max[ 1 ] !== min[ 1 ] ? segments / ( max[ 1 ] - min[ 1 ] ) : 0
  335. ] );
  336. for ( let i = 0; i < array.length; i += 2 ) {
  337. quantized[ i + 0 ] = Math.floor( ( array[ i + 0 ] - min[ 0 ] ) * multiplier[ 0 ] );
  338. quantized[ i + 1 ] = Math.floor( ( array[ i + 1 ] - min[ 1 ] ) * multiplier[ 1 ] );
  339. }
  340. return {
  341. quantized: quantized,
  342. decodeMat: decodeMat
  343. };
  344. }
  345. export {
  346. compressNormals,
  347. compressPositions,
  348. compressUvs,
  349. };