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