LUTImageLoader.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import {
  2. Loader,
  3. TextureLoader,
  4. Data3DTexture,
  5. RGBAFormat,
  6. UnsignedByteType,
  7. ClampToEdgeWrapping,
  8. LinearFilter,
  9. } from 'three';
  10. export class LUTImageLoader extends Loader {
  11. constructor( flipVertical = false ) {
  12. //The NeutralLUT.png has green at the bottom for Unreal ang green at the top for Unity URP Color Lookup
  13. //post-processing. If you're using lut image strips from a Unity pipeline then pass true to the constructor
  14. super();
  15. this.flip = flipVertical;
  16. }
  17. load( url, onLoad, onProgress, onError ) {
  18. const loader = new TextureLoader( this.manager );
  19. loader.setCrossOrigin( this.crossOrigin );
  20. loader.setPath( this.path );
  21. loader.load( url, texture => {
  22. try {
  23. let imageData;
  24. if ( texture.image.width < texture.image.height ) {
  25. imageData = this.getImageData( texture );
  26. } else {
  27. imageData = this.horz2Vert( texture );
  28. }
  29. onLoad( this.parse( imageData.data, Math.min( texture.image.width, texture.image.height ) ) );
  30. } catch ( e ) {
  31. if ( onError ) {
  32. onError( e );
  33. } else {
  34. console.error( e );
  35. }
  36. this.manager.itemError( url );
  37. }
  38. }, onProgress, onError );
  39. }
  40. getImageData( texture ) {
  41. const width = texture.image.width;
  42. const height = texture.image.height;
  43. const canvas = document.createElement( 'canvas' );
  44. canvas.width = width;
  45. canvas.height = height;
  46. const context = canvas.getContext( '2d' );
  47. if ( this.flip === true ) {
  48. context.scale( 1, - 1 );
  49. context.translate( 0, - height );
  50. }
  51. context.drawImage( texture.image, 0, 0 );
  52. return context.getImageData( 0, 0, width, height );
  53. }
  54. horz2Vert( texture ) {
  55. const width = texture.image.height;
  56. const height = texture.image.width;
  57. const canvas = document.createElement( 'canvas' );
  58. canvas.width = width;
  59. canvas.height = height;
  60. const context = canvas.getContext( '2d' );
  61. if ( this.flip === true ) {
  62. context.scale( 1, - 1 );
  63. context.translate( 0, - height );
  64. }
  65. for ( let i = 0; i < width; i ++ ) {
  66. const sy = i * width;
  67. const dy = ( this.flip ) ? height - i * width : i * width;
  68. context.drawImage( texture.image, sy, 0, width, width, 0, dy, width, width );
  69. }
  70. return context.getImageData( 0, 0, width, height );
  71. }
  72. parse( dataArray, size ) {
  73. const data = new Uint8Array( dataArray );
  74. const texture3D = new Data3DTexture();
  75. texture3D.image.data = data;
  76. texture3D.image.width = size;
  77. texture3D.image.height = size;
  78. texture3D.image.depth = size;
  79. texture3D.format = RGBAFormat;
  80. texture3D.type = UnsignedByteType;
  81. texture3D.magFilter = LinearFilter;
  82. texture3D.minFilter = LinearFilter;
  83. texture3D.wrapS = ClampToEdgeWrapping;
  84. texture3D.wrapT = ClampToEdgeWrapping;
  85. texture3D.wrapR = ClampToEdgeWrapping;
  86. texture3D.generateMipmaps = false;
  87. texture3D.needsUpdate = true;
  88. return {
  89. size,
  90. texture3D,
  91. };
  92. }
  93. }