Using Pixi to render to a BabylonJS DynamicTexture

[Shurp]

Hi all, I have been playing around with Babylon and Pixi and wanted to combine the two to leverage the power of each.

 

I was using this as a reference to start with - https://doc.babylonjs.com/resources/babylonjs_and_pixijs and I managed to get the pixi logo to render in front of the babylon scene, what my goal is however is to use Pixi to render 2d stuff and text into a Babylon DynamicTexture (which is a canvas) and then apply that texture to a plane so it can be manipulated in 3D space.

This is what I was trying so far

this._dynamictexture = new DynamicTexture("test", {width: 200, height: 79}, this._scene, false);

this.pixicanvas = this._dynamictexture.getContext().canvas;
        
        this.pixiRender = new PIXI.Renderer
            (
                {
                    width: 200,
                    height: 79,
                    context: this._engine._gl,
                    view: this.pixicanvas,
                    transparent: true,
                    clearBeforeRender: false,
                }

        );

with _engine being the BabylonJS engine object

 

and in my render call in Babylon

 

this._scene.render();
this._engine.wipeCaches(true);

this.pixiRender.reset();
this.pixiRender.render(this.stage);

 

This doesn't seem to render onto the dynamic texture though, and the pixi content still just appears in front of the Babylon scene.

 

is there a step that I am missing or misunderstanding? I feel like it seems fairly straight forward, but its just not behaving how I expected.

 

Any help would be most appreciated :)

 

[ivan.popelyshev]

You use canvas from dynamic texture but context from main gl.  I don't know how to make it work in babylon, but that's definitely wrong. When i have free time in weekend or next week maybe, i'll look into it. I did it with threejs just fine.

[Shurp]

I was basing my work on the babylon doc page I linked in my original post, as well as this thread http://www.html5gamedevs.com/topic/40000-combine-babylonjs-with-pixijs/

It does seem that pixi and babylon can share the same context, but these examples are also just showing pixi in front of babylon, not rendering onto a texture.

Does that change what is required to set things up? I can find a few examples of things with threejs, but im not sure how i can translate that back into babylon to get this to work.

[ivan.popelyshev]

make a pixi renderTexture out of babylon dynamic texture somehow. I say again, its 100% possible if you know how underlying webgl works.

[Shurp]

I am very new to webgl, so I am still learning how all of that works

[ivan.popelyshev]

not DynamicTexture, but two renderers in the same context: https://github.com/seacloud9/babylon_pixi_boilerplate 

Its possible to put in the texture if you spend some time.