Pixi.js: Multiple Displacement Filters = Black Flickering

Created on 18 Jan 2017 · 6Comments · Source: pixijs/pixi.js

I made a "water ripple effect" that demos the issue:
(Just click to add a displacement filter.)
http://commins.ca/pixijs-ripple/

Every time you click, a new filter is added, and the screen flashes black.

Issue is present on latest release and dev builds.

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS Ripple</title>
    <script src="http://pixijs.download/dev/pixi.min.js"></script>
</head>
<body>
    <script>
        var stage = new PIXI.Container();
        var renderer = PIXI.autoDetectRenderer(512, 512);
        document.body.appendChild(renderer.view);  

        // load assets
        PIXI.loader
            .add("background.jpeg")
            .add("map.png")
            .load(setup);

        var ripples = [];

        function setup() {
            // background
            var bg = new PIXI.Sprite(PIXI.loader.resources["background.jpeg"].texture);
            bg.anchor.set(0.5);
            bg.scale.set(0.6);
            bg.position.set(renderer.view.width/2, renderer.view.height/2);
            stage.addChild(bg);

            // add new ripple each time mouse is clicked
            renderer.view.addEventListener('mousedown', function(ev) {
                ripples.push(new Ripple(ev.clientX, ev.clientY));
                stage.filters = ripples.map(function(f) { return f.filter; });
            }, false);

            gameLoop();
        }

        function gameLoop() {
            requestAnimationFrame(gameLoop);

            // update ripples
            for(var i=0; i<ripples.length; i++) {
                ripples[i].update();
            }

            renderer.render(stage);
        }

        function Ripple(x, y) {
            // sprite
            this.sprite = new PIXI.Sprite(PIXI.loader.resources["map.png"].texture);
            this.sprite.anchor.set(0.5);
            this.sprite.position.set(x, y);
            this.sprite.scale.set(0.1);
            stage.addChild(this.sprite);
            // filter
            this.filter = new PIXI.filters.DisplacementFilter(this.sprite);
        }

        Ripple.prototype.update = function() {
            this.sprite.scale.x += 0.025;
            this.sprite.scale.y += 0.025;
        }

    </script>
</body>
</html>

💾 v4.x (Legacy) 🕷 Bug

Source