Jump to content

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


Johnny Kontrolleti
 Share

Recommended Posts

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? 

dis.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...