Babylon and Pixi.js Spine

Hi Everyone,

so here is a question I have been figuring out for the past week.
I am using 2D-spine-animation from pixiJS. and combining with babylon3D scene.
I am trying to reproduce the tile-map liked effect similar to Unity – render 3D object above UI object(2D character) Dynamically. based on its z-depth.

Since PixiJs uses its own renderer. I had to put in the render loop before/ after the scene render. it should work with one character and few objects.(objects scene render->pixi container render->background scene render.)
But what if there are 10 characters running in one scene. the renderloop could be uncontrollable.
I was trying to figure this out from these approaches.

  1. Pixi has masks, but I don’t know if BJS has anyway to put a rendering scene into a sprite mask everyframe.
  2. Is there a possibility to combine pixi renderer into BJS engine, so that I can simply use render groups, to index its orders.
  3. or I can do something with WebGL natively?
  4. Or there are some other features that I didn’t know that could help.

I looked into layer masks, render group, stencil mask, I can’t really think of a solution from these. please help.

I can’t help you because I don’t know Pixi, but there are quite a few references to Pixi in this forum, maybe that could help you :

https://forum.babylonjs.com/search?q=pixi

1 Like

If you can show us a small reproduction of how you’re setting up your scene with the renderings that can be helpful too

I have got it solve by tweeking Three.js runtime solution a bit. thanks all.

Hi, it is possible for you to share your solution?