Image sequence as displacement filter

[twebb]

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.  

[ivan.popelyshev]

does it work?

[twebb]

Just the first frame of the sequence loads as the displacement filter

[ivan.popelyshev]

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.