Filters with original graphics rendered on top?

[Mark_]

I'm trying to apply a series of filters to a Graphics object:

const filters = [
  new PIXI.filters.BlurFilter(10), 
  colorMatrixFilter
];

Is there any way with filters to render the original graphics on top? I tried duplicating the Graphics object without filters but it's slow.

In SVG it would be done like this:

<filter id="myFilter">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
  <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="result"/>
  <feComposite in="SourceGraphic" in2="result" operator="atop"/>
</filter>

 

[ivan.popelyshev]

Yes, you have to make your own composite filter based on BlurFilter for that. You can wait when someone writes it for you here , or just try to experiment with blurfilter inputs output

something like Filter that uses BlurFilter inside and then uses itself with CLEAR=FALSE

[Mark_]

Thanks for that. I've tried to follow your suggestion but I'm not getting the results I expected. I'm not sure what I'm doing wrong.

export default class MyFilter extends Filter {
  constructor() {
    super();
    this.blurFilter = new BlurFilter(10);
    this.colorMatrixFilter = new ColorMatrixFilter();
    this.colorMatrixFilter.matrix = [1, 0, 0, 0, 0,  0, 1, 0, 0, 0,  0, 0, 1, 0, 0,  0, 0, 0, 3, -2];
  }

  apply(filterManager, input, output, clearMode) {
    const renderTarget = filterManager.getFilterTexture();
    this.blurFilter.apply(filterManager, input, renderTarget, CLEAR_MODES.CLEAR);
    this.colorMatrixFilter.apply(filterManager, renderTarget, output, CLEAR_MODES.BLEND);
    super.apply(filterManager, input, output, CLEAR_MODES.BLEND);
    filterManager.returnFilterTexture(renderTarget);
  }
}

This line seems to be the problem. When I comment it out, I kind of get the results I want but the original graphics are not on top.

super.apply(filterManager, input, output, CLEAR_MODES.BLEND);

 

Edited February 6, 2021 by Mark_

[ivan.popelyshev]

It should work, code is correct. Please make minimal demo on jsfiddle, codesandbox, or somewhere else

[Mark_]

I've put it on codesandbox. It should open on the filter file. I've commented out the line that breaks it.