Source: filters/blur/BlurYFilter.js

filters/blur/BlurYFilter.js

  1. import * as core from '../../core';
  2. import generateBlurVertSource from './generateBlurVertSource';
  3. import generateBlurFragSource from './generateBlurFragSource';
  4. import getMaxBlurKernelSize from './getMaxBlurKernelSize';
  5. /**
  6. * The BlurYFilter applies a horizontal Gaussian blur to an object.
  7. *
  8. * @class
  9. * @extends PIXI.Filter
  10. * @memberof PIXI.filters
  11. */
  12. export default class BlurYFilter extends core.Filter
  13. {
  14. /**
  15. * @param {number} strength - The strength of the blur filter.
  16. * @param {number} quality - The quality of the blur filter.
  17. * @param {number} resolution - The resolution of the blur filter.
  18. * @param {number} [kernelSize=5] - The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15.
  19. */
  20. constructor(strength, quality, resolution, kernelSize)
  21. {
  22. kernelSize = kernelSize || 5;
  23. const vertSrc = generateBlurVertSource(kernelSize, false);
  24. const fragSrc = generateBlurFragSource(kernelSize);
  25. super(
  26. // vertex shader
  27. vertSrc,
  28. // fragment shader
  29. fragSrc
  30. );
  31. this.resolution = resolution || core.settings.RESOLUTION;
  32. this._quality = 0;
  33. this.quality = quality || 4;
  34. this.strength = strength || 8;
  35. this.firstRun = true;
  36. }
  37. /**
  38. * Applies the filter.
  39. *
  40. * @param {PIXI.FilterManager} filterManager - The manager.
  41. * @param {PIXI.RenderTarget} input - The input target.
  42. * @param {PIXI.RenderTarget} output - The output target.
  43. * @param {boolean} clear - Should the output be cleared before rendering?
  44. */
  45. apply(filterManager, input, output, clear)
  46. {
  47. if (this.firstRun)
  48. {
  49. const gl = filterManager.renderer.gl;
  50. const kernelSize = getMaxBlurKernelSize(gl);
  51. this.vertexSrc = generateBlurVertSource(kernelSize, false);
  52. this.fragmentSrc = generateBlurFragSource(kernelSize);
  53. this.firstRun = false;
  54. }
  55. this.uniforms.strength = (1 / output.size.height) * (output.size.height / input.size.height);
  56. this.uniforms.strength *= this.strength;
  57. this.uniforms.strength /= this.passes;
  58. if (this.passes === 1)
  59. {
  60. filterManager.applyFilter(this, input, output, clear);
  61. }
  62. else
  63. {
  64. const renderTarget = filterManager.getRenderTarget(true);
  65. let flip = input;
  66. let flop = renderTarget;
  67. for (let i = 0; i < this.passes - 1; i++)
  68. {
  69. filterManager.applyFilter(this, flip, flop, true);
  70. const temp = flop;
  71. flop = flip;
  72. flip = temp;
  73. }
  74. filterManager.applyFilter(this, flip, output, clear);
  75. filterManager.returnRenderTarget(renderTarget);
  76. }
  77. }
  78. /**
  79. * Sets the strength of both the blur.
  80. *
  81. * @member {number}
  82. * @default 2
  83. */
  84. get blur()
  85. {
  86. return this.strength;
  87. }
  88. set blur(value) // eslint-disable-line require-jsdoc
  89. {
  90. this.padding = Math.abs(value) * 2;
  91. this.strength = value;
  92. }
  93. /**
  94. * Sets the quality of the blur by modifying the number of passes. More passes means higher
  95. * quaility bluring but the lower the performance.
  96. *
  97. * @member {number}
  98. * @default 4
  99. */
  100. get quality()
  101. {
  102. return this._quality;
  103. }
  104. set quality(value) // eslint-disable-line require-jsdoc
  105. {
  106. this._quality = value;
  107. this.passes = value;
  108. }
  109. }