Problem with actionManager after resize canvas

Questions
1

Hello everyone! I’m working on a clothing designer where you can overlay an image onto the garment. I encountered an issue with different screens and resolutions, for example, there are screens where the model appears blurry. I googled and found a suggestion on this forum to change the canvas size - either to a specific value or to the monitor’s dpi. I implemented it, and in addition, I used an activeManager to create an event on the mesh, so that the texture changes when hovering over it. However, I ran into a problem - when resizing the canvas, the hover area seems to detach from the mesh and ends up in the corner. I’m attaching a video for reference.

Video with bug

To capture the event, I am using the following code

mesh.actionManager = new BABYLON.ActionManager(this.scene);
mesh.actionManager.registerAction(
            new BABYLON.ExecuteCodeAction(
                {
                  trigger: BABYLON.ActionManager.OnPointerOverTrigger,
                  // usePreciseIntersection: true
                },
                () => {
                  if (!this.constructorForm?.hero) {
                    if (this.mixinWindowInnerWidth >= 768) {
                      this.babylon.setHoodieImage({
                        mesh: mesh,
                        imagePath: '/hoodie/back_picked.svg',
                        forInitial: true
                      });
                    }
                  }
                }
            )
2

Hello! Are you setting the size only once, or every time the window resizes?

3

Just once, as shown in the video.

4

how to reproduce bug

5

Can you try to set size on the window resize observable?

6

I wrote the canvas resize code on the resize event, but the area subscribed to the actionManager still shifts.

7

Can you share the code you are using ? as you should not update the size yourself but use the dedicated engine functions.

8

i use only

engine.setSize(myWidth, myHeight, true);
1 Like
9

I unfortunately can not seem to be able to repro :frowning: would you be able to share a way for us to do it ?

10

Actually this is not my main problem, the problem is that I can’t resize canvas. For example, where in this code i need to write engine.setSize(200, 200, true); to resize canvas?

And the second problem - when I change throw the engine the canvas size and then go and get the scene pick Y and X position - then this positions can be much more that canvas size.

11

And, continue, when I use next code

        mesh.actionManager.registerAction(
            new BABYLON.ExecuteCodeAction(
                {
                  trigger: BABYLON.ActionManager.OnPointerOutTrigger,
                  usePreciseIntersection: true
                },
                () => {
                      this.babylon.setHoodieImage({
                        mesh: mesh,
                        imagePath: '/hoodie/plus_on_back.svg',
                        forInitial: true
                      });
                   
                }
            )
        );

this looks on coords in scene that has different size than canvas and we here have a problem.

12

Can you share your actual code?

13

I I replicated the issue in the following scene.

At line 143, I added a timeout that will execute after 1.5 seconds, and then the RenderLoop will start, continuously changing the size using engine.setSize() and rendering the scene. After that, if we hover the mouse over the cubes, there is no event on them, as if the events are in a different layer, going above, in the area shown in the screenshot.

image
image1359×1151 97.6 KB

14

15

This can not work as the engine detects a size change and resize according the the current client width/height set by the css.

Try to control the canvas size by css maybe ?

16

do you want a 200x200 canvas?
setSize rush actionManager area | Babylon.js Playground (babylonjs.com)

1 Like
17

In general, I need to perform the opposite action - I need to enlarge the canvas within the existing size to make the scene bigger. I need to do this because it is the solution I found to improve the clarity of the scene. However, after any manipulation - whether it’s reducing or enlarging the canvas - the object selection in the scene shifts, as shown in the scene above. I am enlarging it because on some Mac, iPhone, and other devices, the scene does not appear clear for some reason. In other words, there are issues with consistent scene rendering across different devices.

18

In this case you need to use setHardwareScalingLevel on the engine. It is a way to adapt to dpi of your screen. You can use window.devicePixelRatio to find the current dpi scale and use engine.setHardwareScalingLevel(1 / window.devicePixelRatio) to adapt to all platforms or use the engine constructor option adaptToDeviceRatio to do that automatically.

19

I tried using adaptToDeviceRatio, but the result was not as satisfactory as when I enlarged the canvas using setSize by 1.25 times. However, I haven’t used setHardwareScalingLevel yet. I will try it now. Thank you for the suggestion.

20

Use 1/1.25 as your parameter in this case.