Gizmos do not work well if canvas is inside a "zoomed" DIV (and another strange gizmo bug)

Bugs
1

Here are two bugs related to gizmos. Sorry, can’t really create playground examples since these are related to hosting the engine/canvas in an app specific way.

  1. Gizmos do not work well if canvas is inside a “zoomed” DIV.

  2. This one is really strange. Gizmos are placed incorrectly when two engines with two canvases placed next too each other. In the latter part of the video, see how clicking in the left canvas shows the gizmo in the right canvas.

The test app is here: Bjorn's Playbooks

2

Adding @Cedric but it may be tricky to repro

3

I can try to repro. Let me check.

4

Did you try to create a new utility layer for each engine/canvas that you use when creating a PositionGizmo ?

5

No, I just use new BABYLON.GizmoManager(scene). I will give it a try now.

1 Like
6

Awesome. That fixed the second problem with the gizmo showing up in the wrong canvas.

1 Like
7

I tried to repro 1st issue but no result. Can you please make a screenshot or a video of what’s happening?

8

Here you are https://youtu.be/chbyQNHkX5o
Thanks,
—bjorn

9

My guess is a call is missing to update the size of the canvas on the engine or something like that.
Did you try to do a scene.pickray and dump values? I’m pretty sure it will work the same as the gizmo.

10

I am updating the engine size. As you can see from the video, it seems a coordinate system problem, the smaller objects can’t be picked, only the larger one is and the gizmo is correctly placed for that one. I will look into scene.pickray.

11

Just a followup, scene.onPointerObservable(pointerInfo) is not reporting a mesh in pointerInfo.pickInfo.pickedMesh when the canvas is in the zoomed DIV. My guess is that the internal code does use global coordinates and need to scale down with the zoom factor.

12

when you change the zoom factor, which functions do you call on the engine?

13

engine.resize()
I have tried with and without that call, no difference. I shouldn’t have to, right? The engine/canvas size has not changed.

14

you should call resize. And on the canvas itself, do you just resize it?

15

I don’t resize the canvas, that’s the whole idea with a DOM zoom, right? Rendering works great, it’s just the mouse picking code that doesn’t work.

16

Do you know how canvas zoom can interact with scene.pickray @Evgeni_Popov ?

17

I have no idea how the browser zoom can impact the picking… It seems the zoom is not a change of some CSS properties, it’s something internal to the browser(?) I don’t know if we are able to retrieve that zoom value to potentially alter how we are computing mouse coordinates…

After testing it, mouse.pointerX and mouse.pointerY we get in code are divided by the current zoom factor. So, we would need to retrieve this value and multiply by it to get the right mouse coordinates.

It seems window.devicePixelRatio will yield this zoom factor, but maybe not in all browsers and also not for retina display…

See also: Can JavaScript Detect the Browser's Zoom Level? | CSS-Tricks

Maybe @Deltakosh will know more?

18

We can probably do it automatically when we get the mouse coordinates (Simply multiply them by the current zoom)

19

The problem is to get this zoom value: it seems there’s no way to get it reliably for all browsers (according to my researches).

20

Rats…