Combine Babylon.js and Pixi.js

Hello) Without you, I probably won’t figure it out. There are two errors. I managed to reproduce the first one. If I try to click on the second sprite in the example, the click itself will work, but the cursor doesn’t change its appearance when hovering over the sprite, which is wrong, plus the canvas wraps around with a blue frame. I tried to win in different ways, it does not work.
Another problem has not yet been reproduced. It is depicted in the picture, this happens when the button is pressed and where some kind of “weighty” operations are required, apparently it does not have time to render itself, therefore, I see no more reasons. When an example needs to redraw a table or animate cards. I would be very grateful for any help.


https://jsfiddle.net/qvzyjt02/
Sorry, updated the link

I can not understand the issue from your repro, can you highlight how I should use it ?

thanks,

1 Like

https://jsfiddle.net/b042cet9/
Here is only the first mistake about the cursor. Hover over any picture with pixi, the button mode for both is true, so when you hover over them, the cursor should change by hand, but this does not happen. But you can freely click on them and the click will work out, but at the same time the canvas (note), more precisely, a blue frame will appear around the canvas

If it is the cursor that is the issue we could add a new mode to not manage it but then you would have the inverse issue with babylon cursor not working :slight_smile:

I guess the easiest here is to manage the cursor at the end of every frame ?

1 Like

in three js there was a similar problem, but there it was completely impossible to press the button)) The problem was solved as follows pixiRenderer._lastObjectRendered = stage;
I don’t seem to need cursor control from babylon yet, but anything happens, so maybe the second option is just right. I’m in this area recently,
so I rely on you)) Any options or assumptions about the second problem?) So much effort, I would not want to stumble on the finish line)

My guess is that some of the state is wrong but in order to find which one we would need a repro :frowning:

1 Like

https://jsfiddle.net/b042cet9/2/
Click on the PIXI image and see how to distort the model)

Regarding the cursor, should I wait for some kind of update, or what?)

About the cursor the easiest is to manage it in your own depending on the cross engine current selection.

About the issue, i ll have a look shortly, finishing some WebGpu implementation at the moment.

As I understand it, this line is just about this line “pixiRenderer._lastObjectRendered = stage;”, but this only works partially. In the example, as it is shown. I talked with the pixi developer, he said that you need to contact this. This is done just at the end of each frame.In three js it works perfect

As explained it is because both engine are setting the cursor so the first that renders is kind of losing it against the second. I will add a way to prevent Babylon to manage the cursor. Also, when things are behind one another, both engines will think the object is selected and it is impossible to solve without code on your side as the engines don t talk to each other (this is not an engine specific issue).

1 Like

Well, thank you, I’m not particularly experienced in this matter) For the time being :slight_smile: Yes, when can I do it on my side) When will the cursor control method babylon js be available?

Regarding the issue: https://jsfiddle.net/eL8ucab7/

Enclose the issue between 2 wipe cache it looks like else some cache does not reset and ends up messed up.

I will do the PR shortly for the other issue and it will be available tomorrow.

1 Like

Thank you so much! :slight_smile: You’re cool)

PR is here: add doNotHandleCursors to the scene by sebavan · Pull Request #6926 · BabylonJS/Babylon.js · GitHub it will be in the next nightly.

The only change needed in your code will be to add

scene.doNotHandleCursors = true;
2 Likes

:kissing_closed_eyes::relaxed::relaxed::relaxed::partying_face::partying_face::partying_face:
Thank!)

Hi, everything is ok with the cursor)) Only the blue frame wraps around the canvas when you click, don’t know how to solve this problem?

This is a css issue nothing related to babylon or pixie you need to prevent the canvas selection like here : css - Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly? - Stack Overflow

1 Like

Somehow I did not think about it, you are right. Thank!

1 Like