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