Css scale and scene picking

Questions
#1

My first post in this brand new forum! I like the framework you have chosen! I think it will make it easier for anyone to create, search and view a topic.

My problem is the following, my canvas is in div which I need to scale (using transform css attribute) for test purpose. But in that case, the scene picker does not manage to get the real mouse position depending on this scale. See in this playground, the pointer do not appear when you are over the sphere but beside: Babylon.js Playground

I tried some stuff like engine.setSize or engine.setHardwareScalingLevel but it doesn’t change anything.

Thanks for your help

1 Like
#2

Do you specially have to use the transform CSS attribute ? Because by changing CSS canvas width and height, the problem is solved : https://www.babylonjs-playground.com/#GYSD2P#1
I don’t think that BJS handles the transform attribute but I may be wrong.

#3

I use css transform because I want to show what the scene will be like on bigger screen. So I set the width and height corresponding on the screen size I want to test and then I use css scale so that it fits with my current real screen.
If you know another way to do that and which guarantees what babylon will render on other screen size I will be happy to try! :wink:

1 Like
#4

Not sure to get why changing width and height of the canvas will look different

#5

I assumed that on a bigger screen you will be able to see more stuff, but you say that it doesn’t matter @Deltakosh?
Only the width/height ratio can change what you can see or not then?

Thus I won’t need to scale the canvas but just apply the width/height ratio corresponding to the screen I want to test right.

1 Like
#6

Correct only ratio matters