Pixi.js: Renderizar three.js dentro de pixi.js?

Criado em 6 fev. 2019  ·  11Comentários  ·  Fonte: pixijs/pixi.js

Ei! Estou tentando renderizar uma cena de three.js dentro de pixi.js para aplicar alguns filtros de uma forma de pós-processamento, qual é a maneira de fazer isso com mais eficiência?

Eu tenho um exemplo funcional , aqui está basicamente o que eu faço, inicio three.js em uma tela fora da tela e, em seguida:

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)

e então no loop de renderização eu tenho

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

mais alguma coisa que estou perdendo? alguma otimização melhor?

De qualquer forma, o verdadeiro problema é quando eu redimensiono a tela, tenho este código rodando em three.js:

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

que basicamente muda as dimensões da área renderizada de three.js e, claro, quebras de pixi.js.

screenshot 2019-02-06 at 02 00 02

Como faço para dizer ao pixi.js para atualizar as dimensões da textura?

Meio Ambiente

🤔 Question

Comentários muito úteis

Corrigi esses problemas em outro projeto, farei uma demonstração desse código mais tarde. Existe um patch para v4 que inverte a maneira como pixi usa renderTargets (v5 renderTextures).

Todos 11 comentários

É possível, três exemplos foram postados várias vezes em Issues for v4, mas eu não fiz isso para v5 ainda.
Basicamente, você deve redefinir os estados de pixi e threejs toda vez que alterar as bibliotecas.

Não posso fornecer demos antigos agora, mas você pode pesquisá-los aqui e em http://www.html5gamedevs.com/forum/15-pixijs/ . O compartilhamento de textura também foi discutido em algum lugar.

Tudo o que você precisa fazer é pesquisar e portar para v5, boa sorte! Posso ajudar nas duas coisas se você falhar em algum lugar.

Eu até fiz uma demonstração onde os objetos 2d e 3d são classificados entre si, mas esse eu não compartilhei em público.

Isso resolve seus problemas? https://github.com/pixijs/pixi.js/pull/5430 Fix já está em 5.0.0-rc2

@ivanpopelyshev obrigado pela resposta! Acho que você está se referindo a esta discussão e a este snippet de código com mais precisão:

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

entretanto eu não entendo onde inserir este código, e qual é a variável session , imagino que gl é o glcontext das três telas. Onde eu coloco neste exemplo?

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

(Os problemas começam a acontecer no redimensionamento da janela)

Tenho 5.0.0-rc.2 no exemplo, devo mudar algo?

Não conheço esse exemplo antigo, mas todas as coisas que você mencionou estão incluídas em renderer.reset()

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

esta é uma má ideia.

Você olhou para # 5430?

@marcofugaro Algum outro acompanhamento sobre isso?

@ivanpopelyshev @bigtimebuddy desculpe por deixá-los esperando, finalmente tentei novamente .

@ivanpopelyshev Obrigado pelos três antigos demo do pixi que você postou no PR, foi muito útil, tentei implementar o método 2 no próximo exemplo (também me preocupo em explicar qual foi a má ideia com PIXI.Texture.from(threeApp.renderer.domElement) ? Desculpe, não sei muito sobre webgl avançado)

Aqui está o exemplo convertido para pixi v5

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

Alguns problemas que encontrei:

  1. PIXI.Application não aceita mais o parâmetro context , no exemplo da v4 existe:
var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height, {
  context: context, // shared context with threejs

Estou fazendo isso na v5

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

mas obviamente é ignorado, não sei como a demonstração está funcionando

  1. a textura three.js é invertida no Y (eu sei, webgl)

  2. ao redimensionar a janela a textura fica esticada de forma oposta? provavelmente estou fazendo algo errado

Mais uma vez, obrigado por investigar isso!

Corrigi esses problemas em outro projeto, farei uma demonstração desse código mais tarde. Existe um patch para v4 que inverte a maneira como pixi usa renderTargets (v5 renderTextures).

@ivanpopelyshev você poderia corrigir o exemplo agora que v5 foi lançado? 🙏

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Bot obsoleto não

Alguma atualização até agora? O codepen parece funcionar, mas não tenho certeza se é hacky ou não.

Esta página foi útil?
0 / 5 - 0 avaliações