我有一张由 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);
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);