How to combine Babylon.js and Pixi.js with PBRMaterial

I’m trying to mix pixijs and babylonjs. According to the official example, I added PBRMaterial to the scene and found that the rendering was wrong. Who can help me?
I use pixijs only to use pictures as background images of scenes.

The error example is shown below:

  1. The backgroundimage changed color automatically.
  2. PBRMaterial cannot take effect.

Interestingly if you comment out one of lines 25 or 26 and only apply PBR material to one object you do not get the problem. Needs someone more knowledgeable than me to know why.

pinging @sebavan

Yup I am on it :slight_smile: but pretty weird so still digging in, it looks like the textures are breaking for some strange reasons.

1 Like

The weirdest part is that sometimes it just works…

1 Like

This color change happens when it does work with both sphere and ground. Just one mesh having PBR results in original color for pixi image

Ok so babylon has some async loading operations that assumes a certain states, it looks like the best is to wait for babylon to have loaded all of its resources before starting Pixy:

Here I only defer three seconds to ensure all the textures and dependency readyness. This could be done by checking the ready state of the scene.

For instance the PBR uses some postprocess under the hood to kickstart some of the required dependencies. Those happens on texture load so out of the render loop and might therefore break the shared state.

thank you. It can resolve a part of question, I find background image disappear when I move ground and sphere leaving off screen

Something looks wrong with the VAO in pixy Could you check with them ? I wonder why the reset does not look like resetting everything.

OK, thank you. I will reply here once I get the answer.

1 Like

Does BabylonJS have reset() function like pixi? If not , then that’s solution:

pixiRenderer.reset(); // <-- i've added it

I think that pixi binds vao, and because babylon isn’t statles, nor does it have reset operation, it just assumes that everything that is bound is his to manage, and modifies that vao :slight_smile:

First reset() notifies pixi that someone worked with context and there’s no guarantee on stuff that is already bound in context, second reset() that it needs to unbind everything before some strange guy uses it :slight_smile:

If BabylonJS doesnt have reset() function like threejs or pixijs, here’s pixi implementation just in case you guys wonder what the heck is it:

1 Like

thank you, this is final demo.
The answer is completed by @Hackerham and @sebavan