pixi.jsで図面をタイルする最速の方法は？

Question

私はpixi.jsレンダリングによってレンダリングされる計算上重い図面を持っています。 レンダラビューからスプライトを作成して、図面を水平方向に並べて表示します。スクリーンキャンバスにスプライトをレンダリングします（webglを自動検出として使用） しかし、私は全体の操作がまだ遅いことがわかります。パフォーマンスを改善する方法を教えてください。 RenderTextureを代わりに使用できるかどうか、そしてそれが大きな利益をもたらすかどうかはわかりません。あなたの助けのための おかげで、これは私のスクリプトのコードの抜粋です：

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

Answer 1

PIXIは、まさにこの目的のためにTilingSpriteを持っています。

グラフィックスを描画する場合は、RenderTextureを使用し、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);