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.
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.
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.
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.
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/
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.
