告诉 PixiJS WebGL 状态已被外部修改答案

【问题标题】：Telling PixiJS that the WebGL state has been modified externally告诉 PixiJS WebGL 状态已被外部修改
【发布时间】：2021-01-30 07:10:58
【问题描述】：

我正在尝试将 PixiJS 与现有的自定义 WebGL 引擎集成。现有的自定义引擎是主机，每帧处理对 PixiJS 的控制。现有的自定义引擎将 WebGL 状态配置为“几乎”默认状态，然后调用 PixiJS； PixiJS 完成后，现有的自定义引擎会完全重置 WebGL 状态。

在代码中：

onFrame() {
  resetWebGLStateToDefault(gl);
  gl.bindFramebuffer(...)
  gl.viewport(...)
  thenWeUsePixiJSToDoSomeAdvancedStuff();
  resetWebGLStateToDefault(gl);
}

我的问题 在thenWeUsePixiJSToDoSomeAdvancedStuff() 中，我如何告诉 PixiJS 的状态与上次运行时不同？几乎所有东西都已重置； PixiJS 应该假设一切都是默认的，我还想告诉 PixiJS 当前的视口和帧缓冲区是什么。

我试过Renderer.reset、StateSystem.reset、StateSystem.forceState，但我想这还不够； PixiJS 一直假设它之前设置的一些纹理仍然是绑定的（它们不是，现有的自定义引擎取消绑定所有内容）并且我得到了很多 [.WebGL-0x7fd105545e00]RENDER WARNING: there is no texture bound to the unit ?。几乎适用于所有纹理单元，1-15，除了第一个。

编辑

可能值得一提的是，我直接调用了渲染器；我认为我需要这样做，因为现有的自定义引擎拥有渲染循环。我基本上是在尝试这样的事情，但是在第一帧之后我得到了 WebGL 纹理错误。

          renderer.reset();
          renderer.render(sprite);
          renderer.reset();

编辑

我用autoStart: false 应用程序尝试了同样的事情，但我得到了同样的错误。

          pixiApp.renderer.reset();
          pixiApp.render();
          pixiApp.renderer.reset();

【问题讨论】：

对于这种东西，你可能需要深入研究 PIXI.js 的代码。您也可以尝试在他们的论坛上提问：html5gamedevs.com/forum/15-pixijs - 我看到有些人已经尝试使用自定义 WebGL 代码和 PIXI - 请参阅：html5gamedevs.com/topic/… 或 html5gamedevs.com/topic/…
谢谢@domis86，非常好的建议。我在那里得到了一些很好的帮助。

标签： pixi.js

【解决方案1】：

问题似乎是我正在使用当前绑定的 FBO 调用 PixiJS；我通过创建一个单独的PIXI.RenderTexture、在那里进行渲染、然后使用全屏四边形在我的 WebGL 引擎上合成来解决了所有问题。

        // Create a render texture
        const renderTexture = PIXI.RenderTexture.create(640, 360);

        // Render with PixiJS
        renderer.reset();
        renderer.render(this.stage, renderTexture);
        renderer.reset();

        // Retrieve the raw WebGL texture
        const texture = renderTexture.baseTexture._glTextures[renderer.texture.CONTEXT_UID].texture;

        // Now composite on top of the other engine
        gl.bindFramebuffer(gl.FRAMEBUFFER, theFramebufferWhereINeededPixiJSToRenderInTheFirstPlace);

        gl.useProgram(quadProgram);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.uniform1i(u_Texture, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
        gl.vertexAttribPointer(0, 2, gl.BYTE, false, 2, 0);
        gl.enableVertexAttribArray(0);
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        gl.useProgram(null);

您可能需要resize() 渲染器和/或渲染纹理，具体取决于您的实际设置。

【讨论】：