Jump to content

Water Ripple Effect Works But Has Ugly Flicker - Live Demo


Recommended Posts


I put together a water ripple effect demo:

Each time you click, a new set of ripples is created.

However, a brief flash of black occurs each time a new filter is added to the stage.filters array!

But I must add the filters to this array for there to be any effect, so...

I am really doomed to have this ugly flicker?

<!DOCTYPE html>
    <title>PixiJS Ripple</title>
    <script src="pixi.min.js"></script>
        var stage = new PIXI.Container();
        var renderer = PIXI.autoDetectRenderer(512, 512);

        // load assets

        var ripples = [];

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

            // 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);


        function gameLoop() {
            // update ripples
            for(var i=0; i<ripples.length; i++) {


        function Ripple(x, y) {
            // sprite
            this.sprite = new PIXI.Sprite(PIXI.loader.resources["map.png"].texture);
            this.sprite.position.set(x, y);
            // 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;



Link to comment
Share on other sites

I fear this is something inside Pixi. I know that flicker, it is black because WebGL does not recognize a texture. But don't mind those technical details. As for a solution, definitely report this to the developer of Pixi to start with. And as for that flicker hmm. I do knot know yet. I will use your code and download Pixi to see if I can solve it. ;)


Found no solution unfortunately. But what I did notice was that the ripple flickering appears after the first time. Because the first time no flickering appears. I do not know Pixi well enough to find a workaround but if I have to guess, this is unavoidable. Again, try contacting the pixi developer and tell him he got a bug in his image displacement shader that causes a black flickering.

Edited by TheBoneJarmer
Found some sort of solution
Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

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...