Pixi.js: 在pixi.js中渲染Three.js？

创建于 2019-02-06 · 11评论 · 资料来源: pixijs/pixi.js

嘿! 我正在尝试在pixi.js中渲染一个Three.js场景，以通过后期处理的方式将其应用到一些过滤器中，有什么方法可以更有效地做到这一点？

我有一个有效的示例，基本上是我的工作，我在屏幕外画布上初始化three.js，然后：

const threeTexture = PIXI.Texture.from(threeApp.renderer.domElement)
const threeSprite = new PIXI.Sprite(threeTexture)
// divide by pixelratio to make it the correct size, on retinas it's 2
threeSprite.scale.x /= window.devicePixelRatio
threeSprite.scale.y /= window.devicePixelRatio
pixiApp.stage.addChild(threeSprite)

然后在渲染循环中

threeApp.draw()
threeSprite.texture.update() // tell pixi that threejs has changed
pixiApp.render()

我还有什么想念的吗？一些更好的优化？

无论如何，真正的问题是当我调整屏幕大小时，我的代码在three.js中运行：

renderer.setSize(window.innerWidth, window.innerHeight)

这基本上改变了three.js渲染区域的尺寸，当然pixi.js会中断。

screenshot 2019-02-06 at 02 00 02

如何告诉pixi.js更新纹理尺寸？

环境

pixi.js版本：5.0.0-rc
three.js版本：0.101.1
浏览器和版本：Chrome 71
操作系统和版本：OSX
正在运行的示例： https :

🤔 Question

资料来源

marcofugaro

👍1

最有用的评论

我在另一个项目中解决了这些问题，稍后将对该代码进行演示。 v4的补丁可以颠倒pixi使用renderTargets（v5 renderTextures）的方式。

ivanpopelyshev 于 2019-03-06

❤2 👀1

所有11条评论

在v4的Issues中多次发布了可能的threejs示例，但我还未在v5上发布。
基本上，每次更改库时都必须重置pixi和threejs状态。

我现在无法提供旧的演示，但是您可以在此处和http://www.html5gamedevs.com/forum/15-pixijs/中进行搜索。还讨论了纹理共享。

您所要做的就是搜索，然后移植到v5，祝您好运！如果您在某处失败，我可以为您提供帮助。

我什至进行了一个演示，其中将2d和3d对象彼此排序，但是我没有在公共场合共享该对象。

ivanpopelyshev 于 2019-02-06

这样可以解决您的问题吗？ https://github.com/pixijs/pixi.js/pull/5430修复已在5.0.0-rc2中

ivanpopelyshev 于 2019-02-19

@ivanpopelyshev感谢您的回复！我认为您正在更精确地指代此讨论和这段代码：

    gl.disable(gl.DEPTH_TEST)
    gl.enable(gl.BLEND)
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
    gl.disable(gl.STENCIL_TEST)
    gl.disable(gl.CULL_FACE)

    gl.frontFace( gl.CCW )    
    gl.cullFace( gl.FRONT )
    gl.colorMask(true, true, true, true)
    gl.activeTexture(gl.TEXTURE0)

    var shaderManager = session.shaderManager

    shaderManager._currentId = undefined
    for (var i=0; i<shaderManager.attribState.length; i++)
        shaderManager.attribState[i] = false
    shaderManager.setShader(shaderManager.currentShader)

    var blend = session.blendModeManager.currentBlendMode
    if (blend in PIXI.blendModesWebGL) {
        session.blendModeManager.currentBlendMode = undefined
        session.blendModeManager.setBlendMode(blend)
    }

但是我不明白在哪里插入这段代码，什么是session变量，我想gl是三个画布的glcontext。在这个例子中我放在哪里？

https://codepen.io/marco_fugaro/pen/QYgJQY?editors=0010

（问题开始在调整窗口

示例中有5.0.0-rc.2 ，我应该更改一些内容吗？

marcofugaro 于 2019-02-20

我不知道这个旧示例，但是您提到的所有这些内容都包含在renderer.reset()

const threeTexture = PIXI.Texture.from(threeApp.renderer.domElement)

这是一个坏主意。

您看到＃5430吗？

ivanpopelyshev 于 2019-02-26

@marcofugaro还有其他跟进吗？

bigtimebuddy 于 2019-02-27

@ivanpopelyshev @bigtimebuddy很抱歉让您久等了，我终于对此表示了怀疑。

@ivanpopelyshev感谢您在PR中发布的pixi演示中的前三个，它确实很有用，我尝试在下一个示例中实现方法2（还想说明PIXI.Texture.from(threeApp.renderer.domElement)的坏主意是什么？抱歉，我不了解很多高级webgl）

这是转换为pixi v5的示例

https://codepen.io/marco_fugaro/pen/wOGpwv?editors=0010

我发现了一些问题：

PIXI.Application不再接受context参数，在v4示例中有：

var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height, {
  context: context, // shared context with threejs

我正在v5中执行此操作

 return new PIXI.Application({
    context: context, // shared context with threejs

但显然它被忽略了，我不知道该演示如何工作

three.js纹理在Y上翻转（我知道，webgl）
调整窗口大小时，纹理以相反的方式拉伸吗？可能我做错了

再次感谢您对此进行调查！

marcofugaro 于 2019-03-02

我在另一个项目中解决了这些问题，稍后将对该代码进行演示。 v4的补丁可以颠倒pixi使用renderTargets（v5 renderTextures）的方式。

ivanpopelyshev 于 2019-03-06

❤2 👀1

@ivanpopelyshev您可以在v5退出后修复该示例吗？ 🙏

marcofugaro 于 2019-05-22

👀2

由于此问题最近没有活动，因此已被自动标记为陈旧。如果没有进一步的活动，它将关闭。感谢您的贡献。

stale[bot] 于 2019-08-20

😕4

陈旧的机器人不要

marcofugaro 于 2019-08-20

到目前为止有更新吗？ Codepen似乎可以正常工作，但是我不确定它是否不可靠。

Trung0246 于 2020-12-04

此页面是否有帮助？

0 / 5 - 0 等级

Pixi.js: 在pixi.js中渲染Three.js？

环境

最有用的评论

所有11条评论

相关问题