PIXI.RenderTexture no render

Question

我构建了一个简单的PIXI.js应用程序来实现PIXI.RenderTexture，但它不起作用。

它应该渲染两个正方形的精灵，黑色和白色。黑色添加常规stage.addChild:

const sprite1 = new PIXI.Sprite(PIXI.Texture.from('bc-sq-200.png'));
sprite1.x = 500;
app.stage.addChild(sprite1);

白色的应该用renderTexture:渲染

const sprite2 = new PIXI.Sprite(PIXI.Texture.from('wt-sq-200.png'));
// app.stage.addChild(sprite2);
const renderer = PIXI.autoDetectRenderer();
const renderTexture = PIXI.RenderTexture.create({ width: 700, height: 700 });
renderer.render(sprite2, { renderTexture });
const mainSprite = PIXI.Sprite.from(renderTexture);
app.stage.addChild(mainSprite);

但是，只能看到黑色方块。

可能是什么问题？出了什么问题？

Github repo的最小示例：https://github.com/poludnev/test-pixi-render-texture

Answer 1

修复了它。我认为这是自动检测渲染器选项的问题，你可以简单地使用应用程序中的渲染器，这应该有效：

let app = new PIXI.Application({
width: 500,
height: 256,
antialiasing: true,
transparent: false,
resolution: 1
});
document.body.appendChild(app.view);
//To change the background color
app.renderer.backgroundColor = "0xff0000";
const sprite1 = new PIXI.Sprite(PIXI.Texture.from("public/bc-sq-200.png"));
app.stage.addChild(sprite1);
const sprite2 = new PIXI.Sprite(PIXI.Texture.from("public/wt-sq-200.png"));
sprite2.position.x = 0;
sprite2.position.y = 0;
sprite2.anchor.x = 0;
sprite2.anchor.y = 0;
setTimeout(() => {
const renderTexture = PIXI.RenderTexture.create({ width: 200, height: 200 });
console.log(renderer);
app.renderer.render(sprite2, {
renderTexture
});
const mainSprite = new PIXI.Sprite(renderTexture);
mainSprite.x = 200;
mainSprite.y = 0;
mainSprite.width = 200;
mainSprite.height = 200;
app.stage.addChild(mainSprite);
console.log(mainSprite);
}, 2000);

这是一个演示

为了最大限度地减少潜在问题，我更改了其他一些东西：

1. setTimeout表示png有足够的时间加载。您应该确保预先加载资产，setTimeout只是因为它很容易。

2. mainSprite的宽度和高度是重要的

3. 添加了一个红色背景，这样你可以更容易地看到这两个盒子。

我真的以为这会是一个10秒的修复，但这合法的花了我一两个小时。当然需要更好的文档来更清楚地说明autoDetectRenderer和RenderTexture之间的关系，因为OP的原始代码几乎直接来自文档。