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

Creado en 6 feb. 2019  ·  11Comentarios  ·  Fuente: pixijs/pixi.js

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

screenshot 2019-02-06 at 02 00 02

¿Cómo le digo a pixi.js que actualice las dimensiones de la textura?

Medio ambiente

🤔 Question

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

Todos 11 comentarios

Es 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é:

  1. PIXI.Application ya no acepta un parámetro 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

  1. la textura three.js está volteada en la Y (lo sé, webgl)

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

¿Fue útil esta página
0 / 5 - 0 calificaciones