Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple Displacement Filters = Black Flickering

See original GitHub issue

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>