javascript - PIXI.RenderTexture 无渲染

Question

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

它应该渲染两个方形 Sprite ，黑色和白色。黑色的添加了常规的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);

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

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

Github 存储库的最小示例: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);

这是一个demo

我更改了一些其他内容以尽量减少潜在问题:

1. setTimeout 表示 png 有足够的时间加载。您应该确保预加载 Assets ，setTimeout 只是因为它很简单。

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

3. 添加了红色背景，以便您更容易看到这两个框。

我真的认为这将是一个 10 秒的修复，但这个合法的花了我一两个小时。绝对需要更好的文档来使 autoDetectRenderer 和 RenderTexture 之间的关系更加清晰，因为 OP 的原始代码几乎直接来自文档。