PIXI.RenderTexture无法渲染问题求助：仅显示黑色精灵

我搭建了一个简单的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);

白色精灵的实现代码：

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

问题原因 #

核心问题是你新建了一个独立的PIXI.autoDetectRenderer实例，而没有使用PIXI应用（app）自带的渲染器。这个新渲染器没有绑定到页面DOM元素，也无法完成纹理渲染的上下文同步，最终导致RenderTexture没有被正确绘制内容。

修复方案 #

直接使用app.renderer来渲染到RenderTexture，无需新建渲染器。同时确保精灵处于RenderTexture的可视范围内（默认位置(0,0)是可见的，也可显式设置位置），修复后的代码如下：

const sprite2 = new PIXI.Sprite(PIXI.Texture.from('wt-sq-200.png'));
// 可选：设置精灵位置，确保在RenderTexture内可见
sprite2.x = 100;
sprite2.y = 100;

const renderTexture = PIXI.RenderTexture.create({ width: 700, height: 700 });
// 使用app自带的渲染器执行渲染
app.renderer.render(sprite2, { renderTexture });

const mainSprite = PIXI.Sprite.from(renderTexture);
app.stage.addChild(mainSprite);

额外注意事项 #

如果纹理是异步加载的资源，需要在PIXI.Loader的加载完成回调中执行上述渲染逻辑，避免因纹理未加载完成导致RenderTexture为空。

内容的提问来源于stack exchange，提问作者Roman Poludnev