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.
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.
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!
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.
Hello, i’m facing the same issue. We provide a devtool that lets users add BJS powered 3D scenes into their app and one of our clients requires the use of css scale transform. So we want to find a way to support it.
I’d be keen to understand if the fix suggested by @brightMoon would potentially be introduced straight into the BJS codebase, as I’d prefer to keep away from a local implementation that may not be in line with future features/fixes? I’m open to help on a PR but i’m not sure how complex that would be, and might need guidance.
I think we should either support the transform or not but there are a lot of cases and you know… css
I wonder if we could add a callback for user to inject an extra matrix but I do not think a half supported transform should be in core. This should have 0 impact in the current code.
Just trying to understand the request - Is it really only about using the client rect vs. the rendering width? This will work only for some parts of css transforms (for example will still fail when rotating).
Adding a flag to the createPickingRay is more than possible, but this won’t change the internal picking happening on each frame (internal in the scene).
This seems a bit out of my zone of understanding unfortunately. Is @brightMoon’s suggestion a good work around? Can it be done in userland or must it be in the engine? Ideally I’d like to avoid replacing a whole chunk of code and lose compatibility with future changes. Anything I could do to help?
