Johnny Kontrolleti Posted May 2, 2020 Share Posted May 2, 2020 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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 2, 2020 Share Posted May 2, 2020 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.