Jump to content

Displacement filter from texture atlas


Recommended Posts

So there's this wiki article that says:


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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);
const fs = new PIXI.systems.FilterSystem (app.renderer);
const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementFilter.uniforms.otherMatrix = fs
.calculateSpriteMatrix(displacementFilter.maskMatrix, displacementSprite)

But i get an error when I try to calculateSpriteMatrix:


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 by hby2000
syntax highlighting
Link to comment
Share on other sites

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.

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.

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.


  • Recently Browsing   0 members

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