Jump to content

Image sequence as displacement filter


Recommended Posts

I'm looking to use an image sequence as a displacement filter, I'm able to use an .mp4 directly as a displacement filter but not sure how to use an image sequence. Does anybody have any recommendations about achieving this? 

Currently this only outputs the first frame as a displacement map. (The animation works fine but not when used as a displacement filter). 

depthMap = new PIXI.extras.AnimatedSprite.fromFrames(depthFrames);
depthMap.animationSpeed = 0.167;                  
depthMap.play();
app.stage.addChild(depthMap); 

displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
app.stage.filters = [displacementFilter];

 Appreciate any guidance.  

Link to post
Share on other sites

See this? https://github.com/pixijs/pixijs/blob/5bd4c5bb683dca5a33e511277273a832342fb804/packages/filters/filter-displacement/src/DisplacementFilter.ts#L44

https://github.com/pixijs/pixijs/blob/5bd4c5bb683dca5a33e511277273a832342fb804/packages/filters/filter-displacement/src/DisplacementFilter.ts#L109

It doesnt actually set texture from sprite every time. You can patch applyFilter to do that

let previousApply = DisplacementFilter.prototype.applyFilter;
DisplacementFilter.prototype.applyFilter = 

    function apply(
        filterManager, input, output, clearMode
    )
    {
        this.uniforms.mapSampler = this.maskSprite.texture
        previousApply.call(this, filterManager, input, output, clearMode)
    }

You are working with WebGL. WebGL is hard and we cannot possibly watch all the cases for users. Please open PixiJS sources in separate IDE window and search by class name every time you use a new class.

Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...