PIXI Container as a Babylon Texture

I have an unusual use case. I need to render complex text as a 3D texture. I’m able to adequately create that text with PIXI, but from what I’ve seen so far, Babylon isn’t quite as capable with text as PIXI (PIXI’s TextStyle editor: https://pixijs.io/pixi-text-style).

My app has relied on PIXI but now needs to support 3D so I’m deciding between Three JS and Babylon. I’ve seen a number of posts/articles that show a canvas being used as a Babylon texture. I’ve also seen an example or two of PIXI rendering a Babylon scene on a PIXI Container (Edit fiddle - JSFiddle).

I have yet to see a PIXI canvas, not just a simple canvas, used as a Babylon texture. Is this possible? If so, is there an example I might’ve missed?

Additionally, I need to skin nine different 3D objects with PIXI canvases and I’m a bit concerned with running up against browser 3GL container limitations.

Thanks in advance for your thoughts and advice.

1 Like

Hello and welcome

yes this is highly possible :slight_smile:
You want to use the DynamicTexture which will give you a canvas and a context :slight_smile:
https://doc.babylonjs.com/how_to/dynamictexture

1 Like

Thanks for the quick reply.

Maybe I’m missing something, but I don’t think I need the canvas and context that DynamicTexture would give me; I need to give DynamicTexture one of my PIXI assets.

From what I can see on that example page, it looks like what I need to do is pass my PIXI scene into the constructor of DynamicTexture. That would be awesome if true; I would be creating just one WebGL container, the Babylon container, and passing a scene into a texture.

If that sounds about right to you, great, I’ll dive in and make it work. If you think I still have something wrong, please let me know.

Well I though Pixi.js would instantiate with a HTML canvas (which is what DynamicTexture has)

if it is not the case we could add a property to the DynamicTexture so the suer can pass a custom pre created canvas

PIXI does instantiate with an HTML canvas so I can build the entire canvas I need with PIXI. I need to get that canvas into DynamicTexture so it sounds like that second sentence is what I need.

Lol I just realized we already support it :slight_smile:

The second parameter of the DynamicTexture constructor can be a canvas:
https://doc.babylonjs.com/api/classes/babylon.dynamictexture#constructor

And there it is! Thanks!

I’ll dive in and give it a try.

Thanks again.

2 Likes

Please let me know how it goes. I would like to improve our pixi documentation to mention that feature

Hi @KTM450SXF !
You want something like this?
https://jsfiddle.net/eo4fcmkp/1/

2 Likes

… lots of artistic potential in mixed-medium, imho.

1 Like

quocsinh’s solution works. I’ll use it if I can’t get DynamicTexture to work, which I"m still going to try.

Dude, I think you you’ve done it. I’ll give it a try after work, but I do believe that’s the idea.

Now, this is me whining a bit, but it would be AWESOME if I could make the rendering of the PIXI Container on the sphere dynamic. Without any further programmatic intervention, of course.

Another demo simpler you can try: Edit fiddle - JSFiddle
I don’t think can be extract PIXI.Container to DynamicTexture because the context of DynamicTexture is CanvasRenderingContext2D while PIXI rendering by WebGLRendering.

2 Likes

In this https://jsfiddle.net/skguy793/ an imp moves across the background and shows on the sphere. However when I tried extracting the canvas in the engine.runRenderLoop so that the imp would move on the sphere I couldn’t get it to work https://jsfiddle.net/skguy793/1/

Did you check this How to combine Babylon.js and Pixi.js - Babylon.js Documentation ?

or is it totally different ?

I’ll try your simpler example, quocsinh. Sounds like this will be the only way I can pull it off, but at least I have a path forward.

Thanks again.

It is different, sebavan.

Ok so you could try to wrap the canvas (pixi) in a HtmlElementTexture this is a simple babylon wrapper for element that could be used for babylon texture.

Simply call update on the HtmlElementTexture of Babylon when there is a new fresh render in pixi.

1 Like

Ultimately could you guys please consider updating the doc page? It would be useful for a lot of people using Pixi and Babylon

Definitely, waiting to see if it all works before :wink: