¡Oye! Estoy tratando de renderizar una escena three.js dentro de pixi.js para aplicarle algunos filtros en una forma de posprocesamiento, ¿cuál es la forma de hacerlo de manera más eficiente?
Tengo un ejemplo de trabajo , esto es básicamente lo que hago, inicio three.js en un lienzo fuera de la pantalla y luego:
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)
y luego en el bucle de render tengo
threeApp.draw()
threeSprite.texture.update() // tell pixi that threejs has changed
pixiApp.render()
¿Algo más me estoy perdiendo? ¿Alguna optimización mejor?
De todos modos, el problema real es que cuando cambio el tamaño de la pantalla, tengo este código ejecutándose en three.js:
renderer.setSize(window.innerWidth, window.innerHeight)
que básicamente cambia las dimensiones del área renderizada de three.js y, por supuesto, pixi.js se rompe.
¿Cómo le digo a pixi.js que actualice las dimensiones de la textura?
pixi.js
versión : 5.0.0-rcthree.js
versión : 0.101.1Es posible, los ejemplos de threejs se publicaron varias veces en Issues para v4, pero todavía no lo hice para v5.
Básicamente, debe restablecer el estado de pixi y threejs cada vez que cambie las bibliotecas.
No puedo proporcionar demostraciones antiguas en este momento, pero puede buscarlas aquí y en http://www.html5gamedevs.com/forum/15-pixijs/ . El intercambio de texturas también se discutió en alguna parte.
Todo lo que tienes que hacer es buscar y luego portar a v5, ¡buena suerte! Puedo ayudar con ambas cosas si fallas en alguna parte.
Incluso hice una demostración en la que los objetos 2d y 3d se clasifican entre sí, pero esa no la compartí en público.
¿Esto resuelve tus problemas? https://github.com/pixijs/pixi.js/pull/5430 Fix ya está en 5.0.0-rc2
@ivanpopelyshev ¡ gracias por la respuesta! Creo que se está refiriendo a esta discusión y a este fragmento de código de manera más precisa:
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)
}
sin embargo, no entiendo dónde insertar este código, y cuál es la variable session
, imagino que gl es el glcontext de los tres lienzos. ¿Dónde lo pongo en este ejemplo?
https://codepen.io/marco_fugaro/pen/QYgJQY?editors=0010
(Los problemas comienzan a ocurrir en el cambio de tamaño de la ventana)
Tengo el 5.0.0-rc.2
en el ejemplo, ¿debería cambiar algo?
No conozco este viejo ejemplo, pero todas esas cosas que mencionaste están incluidas en renderer.reset()
const threeTexture = PIXI.Texture.from(threeApp.renderer.domElement)
esta es una mala idea.
¿Miraste el # 5430?
@marcofugaro ¿ Algún otro seguimiento de esto?
@ivanpopelyshev @bigtimebuddy siento haberte hecho esperar, finalmente le di otra puñalada a esto.
@ivanpopelyshev Gracias por los tres viejos en la demostración de pixi que publicaste en el PR, fue realmente útil, intenté implementar el método 2 en el siguiente ejemplo (también me importa explicar cuál fue la mala idea con PIXI.Texture.from(threeApp.renderer.domElement)
? Lo siento, no sé mucho de webgl avanzado)
Aquí está el ejemplo convertido a pixi v5
https://codepen.io/marco_fugaro/pen/wOGpwv?editors=0010
Algunos problemas que encontré:
context
, en el ejemplo v4 hay:var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height, {
context: context, // shared context with threejs
Estoy haciendo esto en v5
return new PIXI.Application({
context: context, // shared context with threejs
pero obviamente se ignora, no sé cómo está funcionando la demostración
la textura three.js está volteada en la Y (lo sé, webgl)
al cambiar el tamaño de la ventana, la textura se estira de manera opuesta? probablemente estoy haciendo algo mal
Nuevamente, ¡gracias por investigar esto!
Arreglé esos problemas en otro proyecto, haré una demostración de ese código más tarde. Hay un parche para la v4 que invierte la forma en que pixi usa renderTargets (v5 renderTextures).
@ivanpopelyshev, ¿ podrías arreglar el ejemplo ahora que salió v5? 🙏
Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.
Bot rancio no
¿Alguna actualización hasta ahora? El codepen parece funcionar, pero no estoy seguro de si funciona mal o no.
Comentario más útil
Arreglé esos problemas en otro proyecto, haré una demostración de ese código más tarde. Hay un parche para la v4 que invierte la forma en que pixi usa renderTargets (v5 renderTextures).