LUT3dlLoader.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. import {
  2. ClampToEdgeWrapping,
  3. Data3DTexture,
  4. FileLoader,
  5. LinearFilter,
  6. Loader,
  7. RGBAFormat,
  8. UnsignedByteType,
  9. } from 'three';
  10. /**
  11. * A loader for the 3DL LUT format.
  12. *
  13. * References:
  14. * - [3D LUTs]{@link http://download.autodesk.com/us/systemdocs/help/2011/lustre/index.html?url=./files/WSc4e151a45a3b785a24c3d9a411df9298473-7ffd.htm,topicNumber=d0e9492}
  15. * - [Format Spec for .3dl]{@link https://community.foundry.com/discuss/topic/103636/format-spec-for-3dl?mode=Post&postID=895258}
  16. *
  17. * ```js
  18. * const loader = new LUT3dlLoader();
  19. * const map = loader.loadAsync( 'luts/Presetpro-Cinematic.3dl' );
  20. * ```
  21. *
  22. * @augments Loader
  23. * @three_import import { LUT3dlLoader } from 'three/addons/loaders/LUT3dlLoader.js';
  24. */
  25. export class LUT3dlLoader extends Loader {
  26. /**
  27. * Constructs a new 3DL LUT loader.
  28. *
  29. * @param {LoadingManager} [manager] - The loading manager.
  30. */
  31. constructor( manager ) {
  32. super( manager );
  33. /**
  34. * The texture type.
  35. *
  36. * @type {(UnsignedByteType|FloatType)}
  37. * @default UnsignedByteType
  38. */
  39. this.type = UnsignedByteType;
  40. }
  41. /**
  42. * Sets the texture type.
  43. *
  44. * @param {(UnsignedByteType|FloatType)} type - The texture type to set.
  45. * @return {LUT3dlLoader} A reference to this loader.
  46. */
  47. setType( type ) {
  48. this.type = type;
  49. return this;
  50. }
  51. /**
  52. * Starts loading from the given URL and passes the loaded 3DL LUT asset
  53. * to the `onLoad()` callback.
  54. *
  55. * @param {string} url - The path/URL of the file to be loaded. This can also be a data URI.
  56. * @param {function({size:number,texture3D:Data3DTexture})} onLoad - Executed when the loading process has been finished.
  57. * @param {onProgressCallback} onProgress - Executed while the loading is in progress.
  58. * @param {onErrorCallback} onError - Executed when errors occur.
  59. */
  60. load( url, onLoad, onProgress, onError ) {
  61. const loader = new FileLoader( this.manager );
  62. loader.setPath( this.path );
  63. loader.setResponseType( 'text' );
  64. loader.load( url, text => {
  65. try {
  66. onLoad( this.parse( text ) );
  67. } catch ( e ) {
  68. if ( onError ) {
  69. onError( e );
  70. } else {
  71. console.error( e );
  72. }
  73. this.manager.itemError( url );
  74. }
  75. }, onProgress, onError );
  76. }
  77. /**
  78. * Parses the given 3DL LUT data and returns the resulting 3D data texture.
  79. *
  80. * @param {string} input - The raw 3DL LUT data as a string.
  81. * @return {{size:number,texture3D:Data3DTexture}} The parsed 3DL LUT.
  82. */
  83. parse( input ) {
  84. const regExpGridInfo = /^[\d ]+$/m;
  85. const regExpDataPoints = /^([\d.e+-]+) +([\d.e+-]+) +([\d.e+-]+) *$/gm;
  86. // The first line describes the positions of values on the LUT grid.
  87. let result = regExpGridInfo.exec( input );
  88. if ( result === null ) {
  89. throw new Error( 'LUT3dlLoader: Missing grid information' );
  90. }
  91. const gridLines = result[ 0 ].trim().split( /\s+/g ).map( Number );
  92. const gridStep = gridLines[ 1 ] - gridLines[ 0 ];
  93. const size = gridLines.length;
  94. const sizeSq = size ** 2;
  95. for ( let i = 1, l = gridLines.length; i < l; ++ i ) {
  96. if ( gridStep !== ( gridLines[ i ] - gridLines[ i - 1 ] ) ) {
  97. throw new Error( 'LUT3dlLoader: Inconsistent grid size' );
  98. }
  99. }
  100. const dataFloat = new Float32Array( size ** 3 * 4 );
  101. let maxValue = 0.0;
  102. let index = 0;
  103. while ( ( result = regExpDataPoints.exec( input ) ) !== null ) {
  104. const r = Number( result[ 1 ] );
  105. const g = Number( result[ 2 ] );
  106. const b = Number( result[ 3 ] );
  107. maxValue = Math.max( maxValue, r, g, b );
  108. const bLayer = index % size;
  109. const gLayer = Math.floor( index / size ) % size;
  110. const rLayer = Math.floor( index / ( sizeSq ) ) % size;
  111. // b grows first, then g, then r.
  112. const d4 = ( bLayer * sizeSq + gLayer * size + rLayer ) * 4;
  113. dataFloat[ d4 + 0 ] = r;
  114. dataFloat[ d4 + 1 ] = g;
  115. dataFloat[ d4 + 2 ] = b;
  116. ++ index;
  117. }
  118. // Determine the bit depth to scale the values to [0.0, 1.0].
  119. const bits = Math.ceil( Math.log2( maxValue ) );
  120. const maxBitValue = Math.pow( 2, bits );
  121. const data = this.type === UnsignedByteType ? new Uint8Array( dataFloat.length ) : dataFloat;
  122. const scale = this.type === UnsignedByteType ? 255 : 1;
  123. for ( let i = 0, l = data.length; i < l; i += 4 ) {
  124. const i1 = i + 1;
  125. const i2 = i + 2;
  126. const i3 = i + 3;
  127. // Note: data is dataFloat when type is FloatType.
  128. data[ i ] = dataFloat[ i ] / maxBitValue * scale;
  129. data[ i1 ] = dataFloat[ i1 ] / maxBitValue * scale;
  130. data[ i2 ] = dataFloat[ i2 ] / maxBitValue * scale;
  131. data[ i3 ] = scale;
  132. }
  133. const texture3D = new Data3DTexture();
  134. texture3D.image.data = data;
  135. texture3D.image.width = size;
  136. texture3D.image.height = size;
  137. texture3D.image.depth = size;
  138. texture3D.format = RGBAFormat;
  139. texture3D.type = this.type;
  140. texture3D.magFilter = LinearFilter;
  141. texture3D.minFilter = LinearFilter;
  142. texture3D.wrapS = ClampToEdgeWrapping;
  143. texture3D.wrapT = ClampToEdgeWrapping;
  144. texture3D.wrapR = ClampToEdgeWrapping;
  145. texture3D.generateMipmaps = false;
  146. texture3D.needsUpdate = true;
  147. return {
  148. size,
  149. texture3D,
  150. };
  151. }
  152. }