Pixi.js: pixi.js 내에서 three.js를 렌더링 하시겠습니까?

가능하면 threejs 예제가 v4 용 Issues에 여러 번 게시되었지만 아직 v5 용으로 만들지 않았습니다.
기본적으로 라이브러리를 변경할 때마다 pixi 및 threejs 상태를 모두 재설정해야합니다.

지금은 오래된 데모를 제공 할 수 없지만 여기와 http://www.html5gamedevs.com/forum/15-pixijs/ 에서 검색 할 수 있습니다. 텍스처 공유도 어딘가에서 논의되었습니다.

당신이해야 할 일은 검색하고 v5로 이식하는 것입니다. 행운을 빕니다! 어딘가에서 실패하면 두 가지 모두를 도울 수 있습니다.

2D와 3D 오브젝트가 서로 분류되는 데모도 만들었지 만 공개적으로 공유하지 않았습니다.

이것이 문제를 해결합니까? https://github.com/pixijs/pixi.js/pull/5430 수정은 이미 5.0.0-rc2에 있습니다.

@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 가 있습니다. 변경해야합니까?

이 예전의 예는 모르겠지만 말씀하신 내용은 모두 renderer.reset() 포함되어 있습니다.

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

이것은 나쁜 생각입니다.

# 5430 봤어?

@marcofugaro 이것에 대한 다른 후속 조치가 있습니까?

@ivanpopelyshev @bigtimebuddy 기다리게 해서 죄송합니다. 드디어 또 다른 찌르기를했습니다.

@ivanpopelyshev PR에 게시 한 pixi 데모의 이전 3 개에 감사드립니다. 정말 유용했습니다. 다음 예제에서 방법 2를 구현하려고했습니다. PIXI.Texture.from(threeApp.renderer.domElement) ? 고급 webgl을 많이 몰라 죄송합니다)

다음은 pixi v5로 변환 된 예입니다.

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

내가 찾은 몇 가지 문제 :

1. 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

하지만 분명히 무시됩니다. 데모가 어떻게 작동하는지 모르겠습니다.

1. three.js 텍스처는 Y에서 뒤집혀 있습니다 (알아요, webgl).

2. 창 크기를 조정할 때 텍스처가 반대 방향으로 늘어납니다. 아마 내가 뭔가 잘못하고있을거야

다시 한번 조사해 주셔서 감사합니다!

다른 프로젝트에서 이러한 문제를 수정했으며 나중에 해당 코드의 데모를 만들 것입니다. pixi가 renderTargets (v5 renderTextures)를 사용하는 방식을 바꾸는 v4 용 패치가 있습니다.

@ivanpopelyshev v5가 나왔으니 이제 예제를 고칠 수 있습니까? 🙏

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

부실 봇은하지 않습니다

지금까지 업데이트가 있습니까? 코드 펜이 작동하는 것처럼 보이지만 해킹이되는지 확실하지 않습니다.