EXRExporter.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
  1. /**
  2. * @author sciecode / https://github.com/sciecode
  3. *
  4. * EXR format references:
  5. * https://www.openexr.com/documentation/openexrfilelayout.pdf
  6. */
  7. import {
  8. FloatType,
  9. HalfFloatType,
  10. RGBAFormat,
  11. DataUtils,
  12. } from 'three';
  13. import * as fflate from '../libs/fflate.module.js';
  14. const textEncoder = new TextEncoder();
  15. const NO_COMPRESSION = 0;
  16. const ZIPS_COMPRESSION = 2;
  17. const ZIP_COMPRESSION = 3;
  18. class EXRExporter {
  19. parse( arg1, arg2, arg3 ) {
  20. if ( ! arg1 || ! ( arg1.isWebGLRenderer || arg1.isDataTexture ) ) {
  21. throw Error( 'EXRExporter.parse: Unsupported first parameter, expected instance of WebGLRenderer or DataTexture.' );
  22. } else if ( arg1.isWebGLRenderer ) {
  23. const renderer = arg1, renderTarget = arg2, options = arg3;
  24. supportedRTT( renderTarget );
  25. const info = buildInfoRTT( renderTarget, options ),
  26. dataBuffer = getPixelData( renderer, renderTarget, info ),
  27. rawContentBuffer = reorganizeDataBuffer( dataBuffer, info ),
  28. chunks = compressData( rawContentBuffer, info );
  29. return fillData( chunks, info );
  30. } else if ( arg1.isDataTexture ) {
  31. const texture = arg1, options = arg2;
  32. supportedDT( texture );
  33. const info = buildInfoDT( texture, options ),
  34. dataBuffer = texture.image.data,
  35. rawContentBuffer = reorganizeDataBuffer( dataBuffer, info ),
  36. chunks = compressData( rawContentBuffer, info );
  37. return fillData( chunks, info );
  38. }
  39. }
  40. }
  41. function supportedRTT( renderTarget ) {
  42. if ( ! renderTarget || ! renderTarget.isWebGLRenderTarget ) {
  43. throw Error( 'EXRExporter.parse: Unsupported second parameter, expected instance of WebGLRenderTarget.' );
  44. }
  45. if ( renderTarget.isWebGLCubeRenderTarget || renderTarget.isWebGL3DRenderTarget || renderTarget.isWebGLArrayRenderTarget ) {
  46. throw Error( 'EXRExporter.parse: Unsupported render target type, expected instance of WebGLRenderTarget.' );
  47. }
  48. if ( renderTarget.texture.type !== FloatType && renderTarget.texture.type !== HalfFloatType ) {
  49. throw Error( 'EXRExporter.parse: Unsupported WebGLRenderTarget texture type.' );
  50. }
  51. if ( renderTarget.texture.format !== RGBAFormat ) {
  52. throw Error( 'EXRExporter.parse: Unsupported WebGLRenderTarget texture format, expected RGBAFormat.' );
  53. }
  54. }
  55. function supportedDT( texture ) {
  56. if ( texture.type !== FloatType && texture.type !== HalfFloatType ) {
  57. throw Error( 'EXRExporter.parse: Unsupported DataTexture texture type.' );
  58. }
  59. if ( texture.format !== RGBAFormat ) {
  60. throw Error( 'EXRExporter.parse: Unsupported DataTexture texture format, expected RGBAFormat.' );
  61. }
  62. if ( ! texture.image.data ) {
  63. throw Error( 'EXRExporter.parse: Invalid DataTexture image data.' );
  64. }
  65. if ( texture.type === FloatType && texture.image.data.constructor.name !== 'Float32Array' ) {
  66. throw Error( 'EXRExporter.parse: DataTexture image data doesn\'t match type, expected \'Float32Array\'.' );
  67. }
  68. if ( texture.type === HalfFloatType && texture.image.data.constructor.name !== 'Uint16Array' ) {
  69. throw Error( 'EXRExporter.parse: DataTexture image data doesn\'t match type, expected \'Uint16Array\'.' );
  70. }
  71. }
  72. function buildInfoRTT( renderTarget, options = {} ) {
  73. const compressionSizes = {
  74. 0: 1,
  75. 2: 1,
  76. 3: 16
  77. };
  78. const WIDTH = renderTarget.width,
  79. HEIGHT = renderTarget.height,
  80. TYPE = renderTarget.texture.type,
  81. FORMAT = renderTarget.texture.format,
  82. COMPRESSION = ( options.compression !== undefined ) ? options.compression : ZIP_COMPRESSION,
  83. EXPORTER_TYPE = ( options.type !== undefined ) ? options.type : HalfFloatType,
  84. OUT_TYPE = ( EXPORTER_TYPE === FloatType ) ? 2 : 1,
  85. COMPRESSION_SIZE = compressionSizes[ COMPRESSION ],
  86. NUM_CHANNELS = 4;
  87. return {
  88. width: WIDTH,
  89. height: HEIGHT,
  90. type: TYPE,
  91. format: FORMAT,
  92. compression: COMPRESSION,
  93. blockLines: COMPRESSION_SIZE,
  94. dataType: OUT_TYPE,
  95. dataSize: 2 * OUT_TYPE,
  96. numBlocks: Math.ceil( HEIGHT / COMPRESSION_SIZE ),
  97. numInputChannels: 4,
  98. numOutputChannels: NUM_CHANNELS,
  99. };
  100. }
  101. function buildInfoDT( texture, options = {} ) {
  102. const compressionSizes = {
  103. 0: 1,
  104. 2: 1,
  105. 3: 16
  106. };
  107. const WIDTH = texture.image.width,
  108. HEIGHT = texture.image.height,
  109. TYPE = texture.type,
  110. FORMAT = texture.format,
  111. COMPRESSION = ( options.compression !== undefined ) ? options.compression : ZIP_COMPRESSION,
  112. EXPORTER_TYPE = ( options.type !== undefined ) ? options.type : HalfFloatType,
  113. OUT_TYPE = ( EXPORTER_TYPE === FloatType ) ? 2 : 1,
  114. COMPRESSION_SIZE = compressionSizes[ COMPRESSION ],
  115. NUM_CHANNELS = 4;
  116. return {
  117. width: WIDTH,
  118. height: HEIGHT,
  119. type: TYPE,
  120. format: FORMAT,
  121. compression: COMPRESSION,
  122. blockLines: COMPRESSION_SIZE,
  123. dataType: OUT_TYPE,
  124. dataSize: 2 * OUT_TYPE,
  125. numBlocks: Math.ceil( HEIGHT / COMPRESSION_SIZE ),
  126. numInputChannels: 4,
  127. numOutputChannels: NUM_CHANNELS,
  128. };
  129. }
  130. function getPixelData( renderer, rtt, info ) {
  131. let dataBuffer;
  132. if ( info.type === FloatType ) {
  133. dataBuffer = new Float32Array( info.width * info.height * info.numInputChannels );
  134. } else {
  135. dataBuffer = new Uint16Array( info.width * info.height * info.numInputChannels );
  136. }
  137. renderer.readRenderTargetPixels( rtt, 0, 0, info.width, info.height, dataBuffer );
  138. return dataBuffer;
  139. }
  140. function reorganizeDataBuffer( inBuffer, info ) {
  141. const w = info.width,
  142. h = info.height,
  143. dec = { r: 0, g: 0, b: 0, a: 0 },
  144. offset = { value: 0 },
  145. cOffset = ( info.numOutputChannels == 4 ) ? 1 : 0,
  146. getValue = ( info.type == FloatType ) ? getFloat32 : getFloat16,
  147. setValue = ( info.dataType == 1 ) ? setFloat16 : setFloat32,
  148. outBuffer = new Uint8Array( info.width * info.height * info.numOutputChannels * info.dataSize ),
  149. dv = new DataView( outBuffer.buffer );
  150. for ( let y = 0; y < h; ++ y ) {
  151. for ( let x = 0; x < w; ++ x ) {
  152. const i = y * w * 4 + x * 4;
  153. const r = getValue( inBuffer, i );
  154. const g = getValue( inBuffer, i + 1 );
  155. const b = getValue( inBuffer, i + 2 );
  156. const a = getValue( inBuffer, i + 3 );
  157. const line = ( h - y - 1 ) * w * ( 3 + cOffset ) * info.dataSize;
  158. decodeLinear( dec, r, g, b, a );
  159. offset.value = line + x * info.dataSize;
  160. setValue( dv, dec.a, offset );
  161. offset.value = line + ( cOffset ) * w * info.dataSize + x * info.dataSize;
  162. setValue( dv, dec.b, offset );
  163. offset.value = line + ( 1 + cOffset ) * w * info.dataSize + x * info.dataSize;
  164. setValue( dv, dec.g, offset );
  165. offset.value = line + ( 2 + cOffset ) * w * info.dataSize + x * info.dataSize;
  166. setValue( dv, dec.r, offset );
  167. }
  168. }
  169. return outBuffer;
  170. }
  171. function compressData( inBuffer, info ) {
  172. let compress,
  173. tmpBuffer,
  174. sum = 0;
  175. const chunks = { data: new Array(), totalSize: 0 },
  176. size = info.width * info.numOutputChannels * info.blockLines * info.dataSize;
  177. switch ( info.compression ) {
  178. case 0:
  179. compress = compressNONE;
  180. break;
  181. case 2:
  182. case 3:
  183. compress = compressZIP;
  184. break;
  185. }
  186. if ( info.compression !== 0 ) {
  187. tmpBuffer = new Uint8Array( size );
  188. }
  189. for ( let i = 0; i < info.numBlocks; ++ i ) {
  190. const arr = inBuffer.subarray( size * i, size * ( i + 1 ) );
  191. const block = compress( arr, tmpBuffer );
  192. sum += block.length;
  193. chunks.data.push( { dataChunk: block, size: block.length } );
  194. }
  195. chunks.totalSize = sum;
  196. return chunks;
  197. }
  198. function compressNONE( data ) {
  199. return data;
  200. }
  201. function compressZIP( data, tmpBuffer ) {
  202. //
  203. // Reorder the pixel data.
  204. //
  205. let t1 = 0,
  206. t2 = Math.floor( ( data.length + 1 ) / 2 ),
  207. s = 0;
  208. const stop = data.length - 1;
  209. while ( true ) {
  210. if ( s > stop ) break;
  211. tmpBuffer[ t1 ++ ] = data[ s ++ ];
  212. if ( s > stop ) break;
  213. tmpBuffer[ t2 ++ ] = data[ s ++ ];
  214. }
  215. //
  216. // Predictor.
  217. //
  218. let p = tmpBuffer[ 0 ];
  219. for ( let t = 1; t < tmpBuffer.length; t ++ ) {
  220. const d = tmpBuffer[ t ] - p + ( 128 + 256 );
  221. p = tmpBuffer[ t ];
  222. tmpBuffer[ t ] = d;
  223. }
  224. const deflate = fflate.zlibSync( tmpBuffer );
  225. return deflate;
  226. }
  227. function fillHeader( outBuffer, chunks, info ) {
  228. const offset = { value: 0 };
  229. const dv = new DataView( outBuffer.buffer );
  230. setUint32( dv, 20000630, offset ); // magic
  231. setUint32( dv, 2, offset ); // mask
  232. // = HEADER =
  233. setString( dv, 'compression', offset );
  234. setString( dv, 'compression', offset );
  235. setUint32( dv, 1, offset );
  236. setUint8( dv, info.compression, offset );
  237. setString( dv, 'screenWindowCenter', offset );
  238. setString( dv, 'v2f', offset );
  239. setUint32( dv, 8, offset );
  240. setUint32( dv, 0, offset );
  241. setUint32( dv, 0, offset );
  242. setString( dv, 'screenWindowWidth', offset );
  243. setString( dv, 'float', offset );
  244. setUint32( dv, 4, offset );
  245. setFloat32( dv, 1.0, offset );
  246. setString( dv, 'pixelAspectRatio', offset );
  247. setString( dv, 'float', offset );
  248. setUint32( dv, 4, offset );
  249. setFloat32( dv, 1.0, offset );
  250. setString( dv, 'lineOrder', offset );
  251. setString( dv, 'lineOrder', offset );
  252. setUint32( dv, 1, offset );
  253. setUint8( dv, 0, offset );
  254. setString( dv, 'dataWindow', offset );
  255. setString( dv, 'box2i', offset );
  256. setUint32( dv, 16, offset );
  257. setUint32( dv, 0, offset );
  258. setUint32( dv, 0, offset );
  259. setUint32( dv, info.width - 1, offset );
  260. setUint32( dv, info.height - 1, offset );
  261. setString( dv, 'displayWindow', offset );
  262. setString( dv, 'box2i', offset );
  263. setUint32( dv, 16, offset );
  264. setUint32( dv, 0, offset );
  265. setUint32( dv, 0, offset );
  266. setUint32( dv, info.width - 1, offset );
  267. setUint32( dv, info.height - 1, offset );
  268. setString( dv, 'channels', offset );
  269. setString( dv, 'chlist', offset );
  270. setUint32( dv, info.numOutputChannels * 18 + 1, offset );
  271. setString( dv, 'A', offset );
  272. setUint32( dv, info.dataType, offset );
  273. offset.value += 4;
  274. setUint32( dv, 1, offset );
  275. setUint32( dv, 1, offset );
  276. setString( dv, 'B', offset );
  277. setUint32( dv, info.dataType, offset );
  278. offset.value += 4;
  279. setUint32( dv, 1, offset );
  280. setUint32( dv, 1, offset );
  281. setString( dv, 'G', offset );
  282. setUint32( dv, info.dataType, offset );
  283. offset.value += 4;
  284. setUint32( dv, 1, offset );
  285. setUint32( dv, 1, offset );
  286. setString( dv, 'R', offset );
  287. setUint32( dv, info.dataType, offset );
  288. offset.value += 4;
  289. setUint32( dv, 1, offset );
  290. setUint32( dv, 1, offset );
  291. setUint8( dv, 0, offset );
  292. // null-byte
  293. setUint8( dv, 0, offset );
  294. // = OFFSET TABLE =
  295. let sum = offset.value + info.numBlocks * 8;
  296. for ( let i = 0; i < chunks.data.length; ++ i ) {
  297. setUint64( dv, sum, offset );
  298. sum += chunks.data[ i ].size + 8;
  299. }
  300. }
  301. function fillData( chunks, info ) {
  302. const TableSize = info.numBlocks * 8,
  303. HeaderSize = 259 + ( 18 * info.numOutputChannels ), // 259 + 18 * chlist
  304. offset = { value: HeaderSize + TableSize },
  305. outBuffer = new Uint8Array( HeaderSize + TableSize + chunks.totalSize + info.numBlocks * 8 ),
  306. dv = new DataView( outBuffer.buffer );
  307. fillHeader( outBuffer, chunks, info );
  308. for ( let i = 0; i < chunks.data.length; ++ i ) {
  309. const data = chunks.data[ i ].dataChunk;
  310. const size = chunks.data[ i ].size;
  311. setUint32( dv, i * info.blockLines, offset );
  312. setUint32( dv, size, offset );
  313. outBuffer.set( data, offset.value );
  314. offset.value += size;
  315. }
  316. return outBuffer;
  317. }
  318. function decodeLinear( dec, r, g, b, a ) {
  319. dec.r = r;
  320. dec.g = g;
  321. dec.b = b;
  322. dec.a = a;
  323. }
  324. // function decodeSRGB( dec, r, g, b, a ) {
  325. // dec.r = r > 0.04045 ? Math.pow( r * 0.9478672986 + 0.0521327014, 2.4 ) : r * 0.0773993808;
  326. // dec.g = g > 0.04045 ? Math.pow( g * 0.9478672986 + 0.0521327014, 2.4 ) : g * 0.0773993808;
  327. // dec.b = b > 0.04045 ? Math.pow( b * 0.9478672986 + 0.0521327014, 2.4 ) : b * 0.0773993808;
  328. // dec.a = a;
  329. // }
  330. function setUint8( dv, value, offset ) {
  331. dv.setUint8( offset.value, value );
  332. offset.value += 1;
  333. }
  334. function setUint32( dv, value, offset ) {
  335. dv.setUint32( offset.value, value, true );
  336. offset.value += 4;
  337. }
  338. function setFloat16( dv, value, offset ) {
  339. dv.setUint16( offset.value, DataUtils.toHalfFloat( value ), true );
  340. offset.value += 2;
  341. }
  342. function setFloat32( dv, value, offset ) {
  343. dv.setFloat32( offset.value, value, true );
  344. offset.value += 4;
  345. }
  346. function setUint64( dv, value, offset ) {
  347. dv.setBigUint64( offset.value, BigInt( value ), true );
  348. offset.value += 8;
  349. }
  350. function setString( dv, string, offset ) {
  351. const tmp = textEncoder.encode( string + '\0' );
  352. for ( let i = 0; i < tmp.length; ++ i ) {
  353. setUint8( dv, tmp[ i ], offset );
  354. }
  355. }
  356. function decodeFloat16( binary ) {
  357. const exponent = ( binary & 0x7C00 ) >> 10,
  358. fraction = binary & 0x03FF;
  359. return ( binary >> 15 ? - 1 : 1 ) * (
  360. exponent ?
  361. (
  362. exponent === 0x1F ?
  363. fraction ? NaN : Infinity :
  364. Math.pow( 2, exponent - 15 ) * ( 1 + fraction / 0x400 )
  365. ) :
  366. 6.103515625e-5 * ( fraction / 0x400 )
  367. );
  368. }
  369. function getFloat16( arr, i ) {
  370. return decodeFloat16( arr[ i ] );
  371. }
  372. function getFloat32( arr, i ) {
  373. return arr[ i ];
  374. }
  375. export { EXRExporter, NO_COMPRESSION, ZIP_COMPRESSION, ZIPS_COMPRESSION };