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.
Como faço para dizer ao pixi.js para atualizar as dimensões da textura?
pixi.js
versão : 5.0.0-rcthree.js
versão : 0.101.1É 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:
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
a textura three.js é invertida no Y (eu sei, webgl)
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.
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).