pixi.js

Fastest way to tile a drawing with pixi.js?


I have a computationally heavy drawing that is rendered by a pixi.js render. I then create sprites from the renderer view in order to tile the drawing horizontally and I render the sprites on the on-screen canvas (using webgl as auto-detected) However, I find the whole operation to be still slow. Can you tell how performances could be improved? I'm not sure if RenderTexture could be used instead, and if it would make a significant gain. Thanks for your help, this is a code extract of my script:

 var canvasRenderer = new PIXI.autoDetectRenderer(w, h, {
   view :        $('#canvas')[0],    
   clearBeforeRender :     false  
 });

 var canvasGraphics = new PIXI.Graphics();
 var canvasStage = new PIXI.Container(); 
 canvasStage.addChild(canvasGraphics);
 canvasGraphics.beginFill();

   var renderer = new PIXI.autoDetectRenderer(width, height);
   var graphics = new PIXI.Graphics();
   var stage = new PIXI.Container();
   stage.addChild(graphics);
   graphics.beginFill();

   // Whole lotta rects
   for (var i in rects) {         
     graphics.drawRect(
       rects[i].left, rects[i].top, rects[i].width, rects[i].height
     );
   }
   graphics.endFill();
   renderer.render(stage);

   for (var j = 0; j <= loops; j++) {
     var sprite = PIXI.Sprite.from(renderer.view);
       sprite.x = j * width;
       canvasStage.addChild(sprite);
     }
   }

 canvasGraphics.endFill();
 canvasRenderer.render(canvasStage);

Solution

  • PIXI has a TilingSprite for exactly this purpose.

    If you're drawing graphics, you should use a RenderTexture, and then put that into a TilingSprite.

        var renderer = new PIXI.autoDetectRenderer(width, height);
        var stage = new PIXI.Container();
    
        //Draw your Graphics
        var graphics = new PIXI.Graphics();
        graphics.beginFill();
        for (var i in rects) {         
            graphics.drawRect(
                rects[i].left, rects[i].top, rects[i].width, rects[i].height
            );
        }
        graphics.endFill();
    
        //Create a RenderTexture to hold the Graphics.
        //I don't know the size of your Graphics, so I'm making it up as 50 x 50
        var texture = new PIXI.RenderTexture(new PIXI.BaseRenderTexture(50, 50));
        
        //Render the Graphics into the Texture
        renderer.render(graphics, texture);
    
        //Create a TilingSprite from the Texture
        var tilesprite = new PIXI.extras.TilingSprite(texture, renderer.width, renderer.height);
        stage.addChild(tilesprite);
    
        renderer.render(stage);