GeometryCompressionUtils.js 15 KB

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