Ericky14 Posted February 15, 2018 Share Posted February 15, 2018 Hello, I have my canvas stretching 100% width and height of the page. When running it in a small resolution screen and in a big resolution screen, the whole thing is scaled up. Is there any simple way to simple increase the radius of the camera based on the device resolution instead of having everything scale up? (Everything stays the same size just like regular html elements) Quote Link to comment Share on other sites More sharing options...
Guest Posted February 15, 2018 Share Posted February 15, 2018 Hello can you make sure you are calling engine.resize() when the canvas is resized? Quote Link to comment Share on other sites More sharing options...
Ericky14 Posted February 15, 2018 Author Share Posted February 15, 2018 I am. But that is not the behavior I want. You can test it with the default playground environment. I am expecting the camera radius to increase rather than the whole scene to scale up just like in game engines such as Unity. (I tested it with my laptop and my tv, the whole scene scales up and the html stuff looks really tiny next to the scene) Quote Link to comment Share on other sites More sharing options...
Guest Posted February 15, 2018 Share Posted February 15, 2018 I'm sorry but I do not understand what you want to achieve We need to adapt the buffer size to align with the new aspect ratio. It is then up to you to move the camera where you want it Quote Link to comment Share on other sites More sharing options...
Ericky14 Posted February 15, 2018 Author Share Posted February 15, 2018 This is what I mean. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 16, 2018 Share Posted February 16, 2018 Yep so you can do that but manually. There is no automatic way to keep the same visual representation as this clearly You are the first to ask but I'm interested to see if more people could use it Why not starting to hack something in the playground to see how we could do that? Wingnut 1 Quote Link to comment Share on other sites More sharing options...
MarianG Posted February 16, 2018 Share Posted February 16, 2018 Hey. I had a similar problem. I solved it using this function when canvas resize. I don't have too much time now, but I'll provide a playground later. Play with it function fitToView() { //component - is an object from the midle of the scene :)) component.computeWorldMatrix(true); let radius = component.getBoundingInfo().boundingSphere.radiusWorld; let aspectRatio = engine.getAspectRatio(scene.activeCamera); let halfMinFov = scene.activeCamera.fov / 2; if (aspectRatio < 1) { halfMinFov = Math.atan( aspectRatio * Math.tan(scene.activeCamera.fov / 2) ); } let viewRadius = Math.abs( radius / Math.sin(halfMinFov)); scene.activeCamera.radius = viewRadius; } Wingnut and Snouto 2 Quote Link to comment Share on other sites More sharing options...
MarianG Posted February 17, 2018 Share Posted February 17, 2018 here we go: http://playground.babylonjs.com/#ZR8GLF GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Ericky14 Posted March 1, 2018 Author Share Posted March 1, 2018 I solved this problem by looking at the "window.devicePixelRatio" variable which is either 2 or 1. And I have "adaptToDeviceRatio" turned on. So, for an orthographic camera, I just change the radius(orthoTop, orthoBottom...) which should be doubled at devicePixelRatio 1. And for perspective camera, I also change the radius, but I set custom values for both 2 and 1 so they would match nicely since doubling didn't work too well. Thanks for the help. GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.