BlurNode.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. import { Vector2 } from '../../../../build/three.module.js';
  2. import { TempNode } from '../core/TempNode.js';
  3. import { FunctionNode } from '../core/FunctionNode.js';
  4. import { FloatNode } from '../inputs/FloatNode.js';
  5. import { Vector2Node } from '../inputs/Vector2Node.js';
  6. import { UVNode } from '../accessors/UVNode.js';
  7. function BlurNode( value, uv, radius, size ) {
  8. TempNode.call( this, 'v4' );
  9. this.value = value;
  10. this.uv = uv || new UVNode();
  11. this.radius = radius || new Vector2Node( 1, 1 );
  12. this.size = size;
  13. this.blurX = true;
  14. this.blurY = true;
  15. this.horizontal = new FloatNode( 1 / 64 );
  16. this.vertical = new FloatNode( 1 / 64 );
  17. }
  18. BlurNode.Nodes = ( function () {
  19. var blurX = new FunctionNode( [
  20. 'vec4 blurX( sampler2D tex, vec2 uv, float s ) {',
  21. ' vec4 sum = vec4( 0.0 );',
  22. ' sum += texture2D( tex, vec2( uv.x - 4.0 * s, uv.y ) ) * 0.051;',
  23. ' sum += texture2D( tex, vec2( uv.x - 3.0 * s, uv.y ) ) * 0.0918;',
  24. ' sum += texture2D( tex, vec2( uv.x - 2.0 * s, uv.y ) ) * 0.12245;',
  25. ' sum += texture2D( tex, vec2( uv.x - 1.0 * s, uv.y ) ) * 0.1531;',
  26. ' sum += texture2D( tex, vec2( uv.x, uv.y ) ) * 0.1633;',
  27. ' sum += texture2D( tex, vec2( uv.x + 1.0 * s, uv.y ) ) * 0.1531;',
  28. ' sum += texture2D( tex, vec2( uv.x + 2.0 * s, uv.y ) ) * 0.12245;',
  29. ' sum += texture2D( tex, vec2( uv.x + 3.0 * s, uv.y ) ) * 0.0918;',
  30. ' sum += texture2D( tex, vec2( uv.x + 4.0 * s, uv.y ) ) * 0.051;',
  31. ' return sum * .667;',
  32. '}'
  33. ].join( '\n' ) );
  34. var blurY = new FunctionNode( [
  35. 'vec4 blurY( sampler2D tex, vec2 uv, float s ) {',
  36. ' vec4 sum = vec4( 0.0 );',
  37. ' sum += texture2D( tex, vec2( uv.x, uv.y - 4.0 * s ) ) * 0.051;',
  38. ' sum += texture2D( tex, vec2( uv.x, uv.y - 3.0 * s ) ) * 0.0918;',
  39. ' sum += texture2D( tex, vec2( uv.x, uv.y - 2.0 * s ) ) * 0.12245;',
  40. ' sum += texture2D( tex, vec2( uv.x, uv.y - 1.0 * s ) ) * 0.1531;',
  41. ' sum += texture2D( tex, vec2( uv.x, uv.y ) ) * 0.1633;',
  42. ' sum += texture2D( tex, vec2( uv.x, uv.y + 1.0 * s ) ) * 0.1531;',
  43. ' sum += texture2D( tex, vec2( uv.x, uv.y + 2.0 * s ) ) * 0.12245;',
  44. ' sum += texture2D( tex, vec2( uv.x, uv.y + 3.0 * s ) ) * 0.0918;',
  45. ' sum += texture2D( tex, vec2( uv.x, uv.y + 4.0 * s ) ) * 0.051;',
  46. ' return sum * .667;',
  47. '}'
  48. ].join( '\n' ) );
  49. return {
  50. blurX: blurX,
  51. blurY: blurY
  52. };
  53. } )();
  54. BlurNode.prototype = Object.create( TempNode.prototype );
  55. BlurNode.prototype.constructor = BlurNode;
  56. BlurNode.prototype.nodeType = 'Blur';
  57. BlurNode.prototype.hashProperties = [ 'blurX', 'blurY' ];
  58. BlurNode.prototype.updateFrame = function ( /* frame */ ) {
  59. if ( this.size ) {
  60. this.horizontal.value = this.radius.x / this.size.x;
  61. this.vertical.value = this.radius.y / this.size.y;
  62. } else if ( this.value.value && this.value.value.image ) {
  63. var image = this.value.value.image;
  64. this.horizontal.value = this.radius.x / image.width;
  65. this.vertical.value = this.radius.y / image.height;
  66. }
  67. };
  68. BlurNode.prototype.generate = function ( builder, output ) {
  69. if ( builder.isShader( 'fragment' ) ) {
  70. var blurCode = [], code;
  71. var blurX = builder.include( BlurNode.Nodes.blurX ),
  72. blurY = builder.include( BlurNode.Nodes.blurY );
  73. if ( this.blurX ) {
  74. blurCode.push( blurX + '( ' + this.value.build( builder, 'sampler2D' ) + ', ' + this.uv.build( builder, 'v2' ) + ', ' + this.horizontal.build( builder, 'f' ) + ' )' );
  75. }
  76. if ( this.blurY ) {
  77. blurCode.push( blurY + '( ' + this.value.build( builder, 'sampler2D' ) + ', ' + this.uv.build( builder, 'v2' ) + ', ' + this.vertical.build( builder, 'f' ) + ' )' );
  78. }
  79. if ( blurCode.length == 2 ) code = '( ' + blurCode.join( ' + ' ) + ' / 2.0 )';
  80. else if ( blurCode.length ) code = '( ' + blurCode[ 0 ] + ' )';
  81. else code = 'vec4( 0.0 )';
  82. return builder.format( code, this.getType( builder ), output );
  83. } else {
  84. console.warn( 'THREE.BlurNode is not compatible with ' + builder.shader + ' shader.' );
  85. return builder.format( 'vec4( 0.0 )', this.getType( builder ), output );
  86. }
  87. };
  88. BlurNode.prototype.copy = function ( source ) {
  89. TempNode.prototype.copy.call( this, source );
  90. this.value = source.value;
  91. this.uv = source.uv;
  92. this.radius = source.radius;
  93. if ( source.size !== undefined ) this.size = new Vector2( source.size.x, source.size.y );
  94. this.blurX = source.blurX;
  95. this.blurY = source.blurY;
  96. return this;
  97. };
  98. BlurNode.prototype.toJSON = function ( meta ) {
  99. var data = this.getJSONNode( meta );
  100. if ( ! data ) {
  101. data = this.createJSONNode( meta );
  102. data.value = this.value.toJSON( meta ).uuid;
  103. data.uv = this.uv.toJSON( meta ).uuid;
  104. data.radius = this.radius.toJSON( meta ).uuid;
  105. if ( this.size ) data.size = { x: this.size.x, y: this.size.y };
  106. data.blurX = this.blurX;
  107. data.blurY = this.blurY;
  108. }
  109. return data;
  110. };
  111. export { BlurNode };