Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3980

Using Pixi to render to a BabylonJS DynamicTexture

$
0
0

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

 


Viewing all articles
Browse latest Browse all 3980