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.
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.
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.
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.
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.
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.