SvenFrankson Posted August 19, 2017 Share Posted August 19, 2017 Hi everyone, I'm currently makind VR apps with BabylonJS, and try to solve the issue of the canvas resolution. I've already found some discussions about this topic, oddly none seems to concern the same issue as I do (it's not about anti-aliasing, as far as I understand, it's more about hardware pixel and css pixel) If I open this playground in my phone : https://www.babylonjs-playground.com/#JPJB3A#2 (not VR, the question is the same for mobile VR and mobile non-VR applications) The pixels are too large. When watching the phone through Google Cardboard it's even worse. This playground https://www.babylonjs-playground.com/#JPJB3A#1 is much better, with hardwareScaling set to 0.25 It's fairly logical, because my phone has 4 hardware pixels per "layout pixel". 1) I'm using a ZTE Axon 7 phone, with 2500*1080 screen. A full screen canvas has width = 900px, height=450px in my browser. Do you encounter the same issues with your phone ? 2) Is there already an automatic built-in way to set the canvas resolution ? Like with the <meta> or something ? (ie : without adding resizing code in the app) 3) If no, should not we add some code to recognize the screen dpi an set the hardwareScaling accordingly ? So it work "out of the box" on mobile. Or is it to CPU-intensive to enforce x16 resolution ? Thanks a lot for you inputs ! Have a nice week-end PS : I've also tried the scenes from @davrous -interesting- article here : https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-webvr-experiences-with-babylon-js-on-all-platforms/ , I'm 90% sure I have the same issues with the examples like Sponza scene, also the fact there are some textures ad lightning make it less obvious. Quote Link to comment Share on other sites More sharing options...
brianzinn Posted August 19, 2017 Share Posted August 19, 2017 I tried it out on a OnePlus One and an S8. Both rendered good with round edges on the sphere. I bumped up the subdivs to 64 to make it more rounded. I'm building also a VR game targeting mobile devices, so interested in these types of issues. Cheers. SvenFrankson 1 Quote Link to comment Share on other sites More sharing options...
SvenFrankson Posted August 19, 2017 Author Share Posted August 19, 2017 Oh okay then it's only on my phone, too bad ^^, seems like it will be harder to fix ! Thanks for the input anyway Out of curiosity, which browser do you use ? Quote Link to comment Share on other sites More sharing options...
brianzinn Posted August 19, 2017 Share Posted August 19, 2017 I'm using Chrome dev. Was looking at this MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio I didn't look yet in babylon source to see what setHardwareScalingLevel does, but might be a corelation or a way to auto-set? SvenFrankson 1 Quote Link to comment Share on other sites More sharing options...
brianzinn Posted August 19, 2017 Share Posted August 19, 2017 Just checked source and default is set like this: var limitDeviceRatio = options.limitDeviceRatio || window.devicePixelRatio || 1.0; this._hardwareScalingLevel = adaptToDeviceRatio ? 1.0 / Math.min(limitDeviceRatio, window.devicePixelRatio || 1.0) : 1.0; So, you are overriding the _hardwareScalingLevel. Maybe your browser doesn't return window.devicePixelRatio, so it defaults to 1.0? SvenFrankson 1 Quote Link to comment Share on other sites More sharing options...
SvenFrankson Posted August 20, 2017 Author Share Posted August 20, 2017 I've updated the playgrounds, they were identical so the bug could not appear ^^ My phone returns window.devicePixelRatio = 4, but if I do not override the value, _hardwareScalingLevel is 1. Yet, I think I solved it, thanks ! When instantiating the engine, you have to provide the 4th argument adaptToDeviceRatio. constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio = false) In my case, the following instantiation : Main.Engine = new BABYLON.Engine(Main.Canvas, true, {}, true); Did the job ! Thanks a lot for your inputs ! brianzinn and davrous 2 Quote Link to comment Share on other sites More sharing options...
brianzinn Posted August 20, 2017 Share Posted August 20, 2017 Glad you figured it out. Correct me if I'm wrong, but passing in limitDeviceRatio: 0.25 won't have the same experience on all devices. ie: if you left it alone it would automatically be set to 1/4 for your phone. my phone might end up as 1/2, but Math.min(..) would take 0.25, so maybe options should just be {}? Quote Link to comment Share on other sites More sharing options...
SvenFrankson Posted August 20, 2017 Author Share Posted August 20, 2017 Indeed, I made a typo copying the line, it's limiteDeviceRatio = 4, not 0.25, I updated my answer. Quote Link to comment Share on other sites More sharing options...
brianzinn Posted August 20, 2017 Share Posted August 20, 2017 What I meant was if there existed a phone with a devicePixelRatio higher than 4 (ie: 8) then they would still get the issue you had before, so that maybe passing in limitDeviceRatio is not needed in conjunction with adaptToDeviceRatio: true in engine constructor? SvenFrankson and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
SvenFrankson Posted August 21, 2017 Author Share Posted August 21, 2017 You're right. Oddly, when I tried without limitDeviceRatio, I had no scaling at all, so I thought the value was mandatory. But it now works, so I guess it was due to caching issues during my tests. Thanks, I update the answer ! 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.