Pixi.js: Drei.js in pixi.js rendern?

Erstellt am 6. Feb. 2019  ·  11Kommentare  ·  Quelle: pixijs/pixi.js

Hallo! Ich versuche, eine three.js-Szene in pixi.js zu rendern, um einige Filter in einer Nachbearbeitungsmethode anzuwenden. Wie kann dies effizienter durchgeführt werden?

Ich habe ein funktionierendes Beispiel , hier ist im Grunde, was ich tue, ich initiiere three.js auf einer Offscreen-Leinwand und dann:

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)

und dann in der Render-Schleife habe ich

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

fehlt mir noch etwas? eine schönere Optimierung?

Wie auch immer, das eigentliche Problem ist, wenn ich die Größe des Bildschirms verändere, läuft dieser Code in three.js:

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

Dadurch werden die Abmessungen des gerenderten Bereichs von three.js grundlegend geändert, und natürlich wird pixi.js unterbrochen.

screenshot 2019-02-06 at 02 00 02

Wie kann ich pixi.js anweisen, die Texturabmessungen zu aktualisieren?

Umgebung

🤔 Question

Hilfreichster Kommentar

Ich habe diese Probleme in einem anderen Projekt behoben. Ich werde später eine Demo dieses Codes erstellen. Es gibt einen Patch für v4, der die Art und Weise umkehrt, wie pixi renderTargets verwendet (v5 renderTextures).

Alle 11 Kommentare

Es ist möglich, dass drei Beispiele mehrmals in Issues for v4 veröffentlicht wurden, aber ich habe es noch nicht für v5 geschafft.
Grundsätzlich müssen Sie bei jedem Ändern der Bibliotheken den Status pixi und threejs zurücksetzen.

Ich kann derzeit keine alten Demos bereitstellen, aber Sie können hier und unter http://www.html5gamedevs.com/forum/15-pixijs/ danach suchen. Das Teilen von Texturen wurde auch irgendwo diskutiert.

Alles was Sie tun müssen, ist zu suchen und dann auf v5 zu portieren, viel Glück! Ich kann bei beiden Dingen helfen, wenn Sie irgendwo versagen.

Ich habe sogar eine Demo gemacht, in der 2D- und 3D-Objekte untereinander sortiert sind, aber diese habe ich nicht öffentlich geteilt.

Löst dies Ihre Probleme? https://github.com/pixijs/pixi.js/pull/5430 Fix ist bereits in 5.0.0-rc2 enthalten

@ivanpopelyshev danke für die Antwort! Ich denke, Sie beziehen sich genauer auf diese Diskussion und diesen Codeausschnitt:

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

Ich verstehe jedoch nicht, wo ich diesen Code einfügen soll und was die Variable session ist. Ich stelle mir vor, dass gl der glcontext der drei Zeichenflächen ist. Wo lege ich es in dieses Beispiel?

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

(Die Probleme treten beim

Ich habe die 5.0.0-rc.2 im Beispiel. Soll ich etwas ändern?

Ich kenne dieses alte Beispiel nicht, aber all die Dinge, die Sie erwähnt haben, sind in renderer.reset()

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

Das ist eine schlechte Idee.

Hast du dir # 5430 angesehen?

@marcofugaro Gibt es noch andere Folgemaßnahmen dazu?

@ivanpopelyshev @bigtimebuddy Entschuldigung, dass ich Sie warten ließ, ich habe es endlich noch einmal versucht.

@ivanpopelyshev Danke für die alten drei Pixi-Demos, die Sie in der PR gepostet haben. Es war wirklich nützlich. Ich habe versucht, die Methode 2 im nächsten Beispiel zu implementieren (erklären Sie auch, was die schlechte Idee mit PIXI.Texture.from(threeApp.renderer.domElement) ? Entschuldigung, ich kenne nicht viel fortgeschrittenes Webgl.)

Hier ist das in pixi v5 konvertierte Beispiel

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

Einige Probleme, die ich gefunden habe:

  1. PIXI.Application akzeptiert keinen context -Parameter mehr. Im v4-Beispiel gibt es:
var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height, {
  context: context, // shared context with threejs

Ich mache das in v5

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

aber offensichtlich wird es ignoriert, ich weiß nicht, wie die Demo funktioniert

  1. Die Textur von three.js wird auf dem Y umgedreht (ich weiß, webgl).

  2. Wenn Sie die Größe des Fensters ändern, wird die Textur in umgekehrter Weise gedehnt. wahrscheinlich mache ich etwas falsch

Nochmals vielen Dank, dass Sie sich damit befasst haben!

Ich habe diese Probleme in einem anderen Projekt behoben. Ich werde später eine Demo dieses Codes erstellen. Es gibt einen Patch für v4, der die Art und Weise umkehrt, wie pixi renderTargets verwendet (v5 renderTextures).

@ivanpopelyshev Könntest du das Beispiel jetzt reparieren, wo v5 raus ist? 🙏

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Veralteter Bot nicht

Irgendwelche Updates bisher? Der Codepen scheint zu funktionieren, aber ich bin mir nicht sicher, ob er hackig ist oder nicht.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen