You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

78 lines
1.8 KiB

  1. define([
  2. 'js/rendering/shaders/outline/vert',
  3. 'js/rendering/shaders/outline/frag'
  4. ], function (
  5. vertex,
  6. fragment
  7. ) {
  8. const _thickness = 1;
  9. const _alpha = 1.0;
  10. const _knockout = false;
  11. class OutlineFilter extends PIXI.Filter {
  12. constructor (thickness = 5, color = 0xFFFFFF, quality = 0.1, alpha = 1.0, knockout = false) {
  13. const angleStep = Math.PI / 2;
  14. color = PIXI.utils.hex2rgb(color);
  15. super(vertex, fragment.replace('$angleStep$', angleStep));
  16. this.uniforms.uThickness = new Float32Array([thickness, thickness]);
  17. this.uniforms.uColor = new Float32Array([0, 0.0, 0.0, 1]);
  18. this.uniforms.uAlpha = alpha;
  19. this.uniforms.uKnockout = knockout;
  20. Object.assign(this, { thickness, color, quality, alpha, knockout });
  21. }
  22. getAngleStep (quality) {
  23. const samples = Math.max(
  24. quality * MAX_SAMPLES,
  25. MIN_SAMPLES,
  26. );
  27. return (Math.PI * 2 / samples).toFixed(7);
  28. }
  29. apply (filterManager, input, output, clear) {
  30. this.uniforms.uThickness[0] = this.thickness / input._frame.width;
  31. this.uniforms.uThickness[1] = this.thickness / input._frame.height;
  32. this.uniforms.uAlpha = this.alpha;
  33. this.uniforms.uKnockout = this.knockout;
  34. this.uniforms.uColor = PIXI.utils.hex2rgb(this.color, this.uniforms.uColor);
  35. filterManager.applyFilter(this, input, output, clear);
  36. }
  37. get alpha () {
  38. return this._alpha;
  39. }
  40. set alpha (value) {
  41. this._alpha = value;
  42. }
  43. get color () {
  44. return PIXI.utils.rgb2hex(this.uniforms.uColor);
  45. }
  46. set color (value) {
  47. PIXI.utils.hex2rgb(value, this.uniforms.uColor);
  48. }
  49. get knockout () {
  50. return this._knockout;
  51. }
  52. set knockout (value) {
  53. this._knockout = value;
  54. }
  55. get thickness () {
  56. return this._thickness;
  57. }
  58. set thickness (value) {
  59. this._thickness = value;
  60. this.padding = value;
  61. }
  62. }
  63. return OutlineFilter;
  64. });