Custom Filters in V6

[milonic]

Hi Guys,

Finally managed to get V6 built and up and running. I'm getting my head around some of the changes and making good progress.

However, I am struggling with custom filters though.

No, I am aware that createClass and object.util.extend have been removed and that I should use getDefaults but I'm struggling with the concept at the moment.

Could somebody please explain how you port the following from V5 to V6: It's about the simplest filter I could find:

fabric.Image.filters.Greenify = fabric.util.createClass(fabric.Image.filters.BaseFilter, {

  type: 'Greenify',

  fragmentSource: `precision highp float;
    uniform sampler2D uTexture;
    varying vec2 vTexCoord;
    void main() {
      vec4 color = texture2D(uTexture, vTexCoord);
      color.r = 0.0;
      color.b = 0.0;
      gl_FragColor = color;
    }`,

  applyTo2d: function(options) {
    var imageData = options.imageData,
      data = imageData.data, i, len = data.length;

      for (i = 0; i < len; i += 4) {
        data[i + 1] = 0;
        data[i + 2] = 0;
      }
  }
  
});

fabric.Image.filters.Greenify.fromObject = fabric.Image.filters.BaseFilter.fromObject;

I prefer to keep custom filters inside their own .js file and call them when needed

Thanks very much for any help with this

[milonic]

I just figured out why I couldn't get this to work.

I notice that the filters object is frozen, that's why it wasn't working before. Anyway, I can remove the frozen tag and get my custom filters to work, so no real issue now.

My question is: Do you plan on adding any ability for custom filters in V6?

Loving the new version BTW - some serious work gone into it. Thank you so much for your time and effort guys, it's really appreciated.

[ShaMan123]

Happy to hear
v6 is class based so to create a custom filter you should subclass one of the existing filters.
I would suggest avoiding getDefaults.
It is was introduced as an escape hatch. Today I view it as an anti pattern.
It is there to provide a solution for an edge case for someone not wanting to subclass in order to change some default values.
Therefore I would suggest avoiding it in favor of the straight forward subclass.
The filters object is an export object, that is why it is frozen.
Do not use that as you might have in previous versions. There is no namespace concept with exports.

Something like this:

export class Greenify extends filters.BaseFilter {

  static type = 'Greenify'

  fragmentSource = `precision highp float;
    uniform sampler2D uTexture;
    varying vec2 vTexCoord;
    void main() {
      vec4 color = texture2D(uTexture, vTexCoord);
      color.r = 0.0;
      color.b = 0.0;
      gl_FragColor = color;
    }`

  applyTo2d(options) {
    var imageData = options.imageData,
      data = imageData.data, i, len = data.length;

      for (i = 0; i < len; i += 4) {
        data[i + 1] = 0;
        data[i + 2] = 0;
      }
  }
  
}

[milonic]

Thanks so much for your help, that's very similar to what I had but I needed to include a isNeutralState function to return false or there was an error.

Here's what worked for me, hope this helps somebody else.

`class Greenify extends fabric.filters.BaseFilter {

static type = 'Greenify'

getFragmentSource() {
return precision highp float; uniform sampler2D uTexture; varying vec2 vTexCoord; void main() { vec4 color = texture2D(uTexture, vTexCoord); color.r = 0.0; color.b = 0.0; gl_FragColor = color; };
}

applyTo2d(options) {
var imageData = options.imageData,
data = imageData.data, i, len = data.length;

  for (i = 0; i < len; i += 4) {
     data[i + 1] = 0;
     data[i + 2] = 0;
  }

}

isNeutralState() {
return false;
}

};
`

Is there a new way to apply filters, other than: applyFilter(0, new Greenify()) ?

[milonic]

Apologizes for the above formatting. Not sure why but Github simply does not want to format the code I posted above correctly.

[milonic]

So, after some time on this I have another issue that I'm not sure if it's missing a V6 feature or there may already be a way?

If I add a filter to an object, export as JSON and import back in, there's an error because the system does not know about Greenify Filter: Uncaught (in promise) Error: fabric: No class registered for Greenify

Is there a way, in V6, of adding the Greenify filter so that it is included when using loadFromJSON

[ShaMan123]

classRegistry.setClass(Greenify)

[milonic]

You sir, are a genius :) - that did the job.

How are we on the documentation? I'd like to put my new learned knowledge (before I forget it all) down on paper for others to use.

Is there some place I can contribute?

[ShaMan123]

@asturur should answer that
I hope you do

[asturur]

There is no place yet apart the old website.
The new one has been restarted 3 times because the frameworks always proved dev unfriendly.
So right now we have a stack based on astro + starlight + tailwind, that was the only premade solution that looked like it could do what i want in a simple way.