Jump to content

Using Pixi to render to a BabylonJS DynamicTexture


Recommended Posts

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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...