Problem with scene pick after canvas has been moved by css

Questions
, , ,
1

Hi everyone!

I have a problem with picking, that is (if I’m correct), caused by moving the canvas a bit off screen. Here is a perfect illustration of the problem:

image
image726×388 3.93 KB

Jokes aside, the black part of the image is the window/screen. Red one is the canvas that Babylon is drawing to. Now, I’m making a game and I want to have an inventory system (green rectangle) that appears to the view from the right side of the screen and overlaps everything. I also move the game canvas with css translate a bit outside the screen to the left, for a nice effect.

Since the scene.pick seems to only effect screen points, the picking goes a bit wrong since the actual canvas has been moved. Can you think of any way to fix this other than offsetting the screen points before the actual pick? Would be handy if I could say that I want to pick a point inside the canvas and not the whole screen…

Here is an actual case for reference. When the inventory is open, the clicks on the game screen go a bit more left than they should, since the canvas is moved to the left.
inventory-fail-2

2

We do not support CSS transform for picking :frowning: basically the system works by relying on getBoundingClientRect() to find back per frame where the pointer is over the canvas.

Could you share a repro in the playground ? so we can have a quick look to find a compelling workaround ?

1 Like
3

Yeah, playground was actually perfect to “prove my point” since only 50% of it is the actual canvas. Here is a pretty much complete recreation of the problem, like it is in my game:

When you click the plane, you should see that the rays are not hitting anything. If you hide the editor and the canvas is more full screen, you should see that the rays are hitting the plane. They are still a bit offset by the header though…

So the actual problem is pretty much the assumption that the canvas is always pretty much full screen when you are picking something. I kind of think I have missed something here, since the whole thing seems odd to me :thinking:

4

If you pick with scene.pointerX and scene.pointerY then it works as expected right?

2 Likes
5

Ahhh yes, I kind of thought I missed something! Thanks!

Kind of had my head wrapped around only using the DeviceSourceManager :smiley:

1 Like
6

Thanks a lot @Blake !!!

2 Likes