Apply RGBSplitFilter to sprite to create rgb filter a cursor's position

[Johnny Kontrolleti]

I have a displacement filter using an radial map you can find attached to the post. This filter is bound to a sprite which is following the cursor. 
In addition to this displacement filter, I'm trying to also include an RGB split at the cursor's position.

To do so I installed the type `RGBSplitFilter` and tried to use it the way I use the displacement filter: 

initDisplacement = () => {
    this.displace = true;
    new PIXI.Loader().add("/dis.png").load(((loader, resources) => {
        this.posX = window.innerWidth / 2;
        this.posY = window.innerHeight / 2;
        this.displacementSprite = new PIXI.Sprite(resources["/dis.png"].texture);
        this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite);
        this.displacementSprite.anchor.set(0.5);
        this.displacementSprite.x = window.innerWidth / 2;
        this.displacementSprite.y = window.innerHeight / 2;
        this.displacementSprite.scale.set(2);
        this.displacementFilter.scale.set(2);

        this.stage.addChild(this.displacementSprite);
        this.stage.filters.push(this.displacementFilter);
        document.querySelector(".detail__image").addEventListener("mousemove", (e) => {
            this.posX = e.clientX;
            this.posY = e.clientY;
        })
    }))
};

loopDisplacement = () => {
    this.displacementSprite.x = this.posX;
    this.displacementSprite.y = this.posY;
};

As you can see I get the map's texture, define it as a sprite and kind of attach a displacement filter to it. 
Likewise I tried to use `this.rgbFilter = new PIXI.filters.RGBSplitFilter(this.displacementSprite)` - but this didn't work. 

What's the correct approach to implement such an rgb split at the cursor's position? 

[ivan.popelyshev]

https://github.com/pixijs/pixi-filters/blob/master/filters/rgb-split/src/RGBSplitFilter.js#L19

RGBSplitter does have only RGB params, not a sprite/texture.

DisplacementFilter works like that: it takes 1. contents of container rendered into temporary renderTexture 2. a texture with a sprite transform to position it - then it combines those two to get the result

Suppose RGBSplitter takes two inputs.. what actually does it do with them? Yes, you have to make your own filter that does almst the same but with "masking" texture. 

Here's how i did it forAdjustmentFilter and Displacement (add third texture that multiplies the displacement): https://codesandbox.io/s/tender-franklin-iycmu . Sorry for long example, its from one of my russian streams, I'm too lazy to make an article out of it.

Yes, this is an advanced skills - how to add input from texture or texture+transform (sprite) to an existing filter so its applied like its masked. Try to do it, and if there is a demo that's not working (but code exists), then I can help with debugging it.

Right now you are just trying to use a filter that doesnt take second input.