My application uses a single engine, multiple canvases, and places a 3D GUI in the scene.
Also, the canvas that is the input source to the engine is set with “engine.inputElement()”.
https://doc.babylonjs.com/features/featuresDeepDive/scene/multiCanvas#performance
As described in the documentation, it is recommended to make the canvases the same size in the case of multi-canvas,
but at the moment, it is Not possible to make all canvases the same size for reasons of placement in my application.
In such usage, there will be a problem with 3D GUI pointer position detection depending on the execution order of “registerView” to the engine.
It’s not a recommended usage, but it gives strange results, so I reproduced it in the playground.
https://playground.babylonjs.com/#9BTUAI#7
https://playground.babylonjs.com/#9BTUAI#9
Currently, it is avoided by executing “registerView” for the canvas set by “engine.inputElement()” at the end.
Is there a better way to do this than changing the order of “registerView” execution with “unRegisterView” + “registerView”?
— The difference between the two playgrounds is -----------------------------------------------
< PG#7>
- Main canvas ( renderCanvas2.style.width =“100%” / .height =“100%” )
- Small canvas (newCanvas.style.width/.height not specified)
< PG#9>
- Main canvas ( renderCanvas2.style.width =“1000px” / .height =“1100px” )
- Small canvas (newCanvas.style.width = “100%” / .height = “100%”)
- Add white square frame
— How to play playground ------------------------------------------------------------------------------
(1) Open the playground.
(2) In the initial state
・The relationship between the ground and the pointer is normal
When the mouse moves over the ground, the cursor changes from an arrow to a pointer.
· It also recognizes that it has moved above the button.
(You can check it in the console output.)
(3)Click the button at this point.
Programmatically change the registration order of registerView after 1 second.
(UnRegisterView “newCanvas” once and registerView “newCanvas” again.)
— For PG#7 —
(4) At this point
・When you move the mouse over the ground, it changes from an arrow to a pointer.
・It will no longer recognize that you have moved over the button.
(Nothing happens when you click the button.)
(5) Now click the mouse on the ground avoiding the button and the sphere.
⇒Go to (6)
— For PG#9 —
(4) At this point
・Even if you move the mouse over the ground, the arrow will not change to a pointer.
・It will not recognize that you moved over the button.
(5) However, when the mouse is moved into the square frame on the upper left of the screen
The mouse cursor will change from an arrow to a pointer.
Click the mouse where the cursor has changed to a pointer.
⇒Go to (6)
— PG#7 and PG#9 —
(6) If you check the console output, it is recognized that you clicked on the ground.
(7) In the playground, if the ground is clicked in (5),
Programmatically change the registration order of registerView.
(Once unRegisterView “renderCanvas2” and registerView “renderCanvas2” again. )
(8) As a result of (7), it returns to the state of (2) and operates normally.
