Displacement filter from texture atlas

[hby2000]

So there's this wiki article that says:

Quote

If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself.

I don't know how to do it myself, and v5 is already here. When I attempt to use the filter similar to the flag example but instead load the sprite from an atlas texture, the other sprites next to it are visible in the displacement as well. Has this not been implemented yet or are there additional steps necessary to make it work?

[ivan.popelyshev]

SpriteMaskFilter works with atlas textures, its what pixi uses for sprite masks: https://github.com/pixijs/pixi.js/tree/dev/packages/core/src/filters/spriteMask

You can take necessary code from there.

Alternatively: if you want to make a displacement on single sprite, you can use the same principle as in DisplacementFilter, but for mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/uniforms.js

[hby2000]

Thank you for your reply. So I have to do it myself in v5 as well and the info in the wiki was misleading..? I tried to insert code from the spriteMask filter directly into my app, when I apply the filter.

const tex = displacementSprite._texture;

if (!tex.uvMatrix)
{
// margin = 0.0, let it bleed a bit, shader code becomes easier
// assuming that atlas textures were made with 1-pixel padding
tex.uvMatrix = new PIXI.TextureMatrix(tex, 0.0);
}
tex.uvMatrix.update();
const fs = new PIXI.systems.FilterSystem (app.renderer);
const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementFilter.uniforms.otherMatrix = fs
.calculateSpriteMatrix(displacementFilter.maskMatrix, displacementSprite)
.prepend(tex.uvMatrix.mapCoord);

But i get an error when I try to calculateSpriteMatrix:

Quote

TypeError: n is undefined FilterSystem.js:389:29
    calculateSpriteMatrix FilterSystem.js:389

The reason might be that I have no idea what I'm doing. I'll have to load my displacements sprites as singular files until I learn how to write my own filters (which might be overkill for animating banner ads).

Edited March 5, 2020 by hby2000
syntax highlighting

[ivan.popelyshev]

> the info in the wiki was misleading

that particular feature as many others didn't make it to v5  

Don't use minified pixi, you certainly can debug what's wrong with it.

> The reason might be that I have no idea what I'm doing.

maskMatrix doesnt exist in your filter, and you are passing it there in this function.

If you dont have an idea what are you doing - try to do mesh shaders instead, less problems with them.

[hby2000]

Alright, thanks again. I'll look into mesh shaders.