Pixi.js: Rendre three.js dans pixi.js?

C'est possible, trois exemples ont été publiés plusieurs fois dans Issues for v4, mais je ne l'ai pas encore fait pour la v5.
Fondamentalement, vous devez réinitialiser l'état de pixi et threejs chaque fois que vous changez les bibliothèques.

Je ne peux pas fournir d'anciennes démos pour le moment, mais vous pouvez les rechercher ici et sur http://www.html5gamedevs.com/forum/15-pixijs/ . Le partage de texture a également été discuté quelque part.

Tout ce que vous avez à faire est de rechercher puis de porter vers la v5, bonne chance! Je peux vous aider dans les deux cas si vous échouez quelque part.

J'ai même fait une démo où les objets 2D et 3D sont TRIÉS les uns par rapport aux autres, mais celui-là que je n'ai pas partagé en public.

Cela résout-il vos problèmes? https://github.com/pixijs/pixi.js/pull/5430 Le correctif est déjà dans la version 5.0.0-rc2

@ivanpopelyshev merci pour la réponse! Je pense que vous faites référence à cette discussion et à cet extrait de code plus précisément:

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

cependant je ne comprends pas où insérer ce code, et quelle est la variable session , j'imagine que gl est le glcontext des trois canevas. Où dois-je le mettre dans cet exemple?

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

(Les problèmes commencent à se produire lors du redimensionnement de la fenêtre)

J'ai le 5.0.0-rc.2 dans l'exemple, dois-je changer quelque chose?

Je ne connais pas cet ancien exemple, mais toutes ces choses que vous avez mentionnées sont incluses dans renderer.reset()

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

C'est une mauvaise idée.

Avez-vous regardé # 5430?

@marcofugaro Un autre suivi à ce sujet?

@ivanpopelyshev @bigtimebuddy désolé de vous avoir fait attendre, j'ai finalement

@ivanpopelyshev Merci pour les trois anciennes démo de pixi que vous avez postées dans le PR, c'était vraiment utile, j'ai essayé d'implémenter la méthode 2 dans l'exemple suivant (prenez également soin d'expliquer quelle était la mauvaise idée avec PIXI.Texture.from(threeApp.renderer.domElement) ? Désolé je ne connais pas beaucoup de webgl avancé)

Voici l'exemple converti en pixi v5

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

Quelques problèmes que j'ai trouvés:

1. PIXI.Application n'accepte plus un paramètre context , dans l'exemple v4 il y a:

var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height, {
  context: context, // shared context with threejs

Je fais ça en v5

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

mais évidemment, il est ignoré, je ne sais pas comment fonctionne la démo

1. la texture three.js est retournée sur le Y (je sais, webgl)

2. lors du redimensionnement de la fenêtre, la texture est étirée de manière opposée? probablement je fais quelque chose de mal

Encore une fois, merci d'avoir examiné cela!

J'ai résolu ces problèmes dans un autre projet, je ferai une démo de ce code plus tard. Il existe un correctif pour la v4 qui inverse la façon dont pixi utilise renderTargets (v5 renderTextures).

@ivanpopelyshev pourriez-vous corriger l'exemple maintenant que la v5 est sortie? 🙏

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité n'a lieu. Merci pour vos contributions.

Pas de bot périmé

Une mise à jour jusqu'à présent? Le codepen semble fonctionner mais je ne sais pas s'il est piraté ou non.