Raitch Posted March 8, 2017 Author Share Posted March 8, 2017 Is that PG the same as the latest release by the way ? I copied your version of the PG code and it seems as it it instead gets "stuck" at half width and half height due to `engine.setHardwareScalingLevel(2);`. Still not covering the entire screen, neither my own stuff nor the red/green rectangle. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 8, 2017 Share Posted March 8, 2017 I was checking that and the PG is using the latest preview, you should check in your babylon.canvas2d.js is you have occurences of getHardwareScalingLevel, you should have 3, if it's not the case, then you don't have the latest version. I'm looking at my source code right now trying to figure what could be wrong. so far I don't find anything Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 8, 2017 Author Share Posted March 8, 2017 I have 3 cases of `getHardwareScalingLevel` in my babylon.canvas2d.js. I could link you my entire project with debugging switched on perhaps if that would help? Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 8, 2017 Share Posted March 8, 2017 yep, do it in PM if you want to keep it private Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 8, 2017 Share Posted March 8, 2017 Ok, I got it, what you have to realize is calling setHardwareScalingLevel will resize the HTMLCanvas' size. If you set the scalingLevel to 4 it will divide the width and height by four. In your code here: var setup = function(paraCallback) { isSetUp = true; screenGroup = new BABYLON.Group2D({ 'parent' : screenCanvas, 'id' : 'IntroCanvas', 'size' : new BABYLON.Size(helper.getWidth(100), helper.getHeight(100)), 'x' : 0, 'y' : 0, }); you call helper.getWidth/Height(100) but unfortunately it returns the shrink size of your canvas, not the original one. So the effect of that is it's creating a Group2D with 0.25 time the size of what you expected. And as I also apply a 0.25 scale factor on your whole Canvas, that's why you have this result. Do you want the Group2D to take the whole size of the Viewport? Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 Yes, but if I multiply with 4 it gets quite laggy. Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 When I console.log the canvas height and the canvas width they don't look like they are divided by 4, if that's what you mean. They look as if they have their actual sizes so your scaling down to 0.25 is the cause I guess. But how would I ideally position everything in that case? I tried settings scale to 4 on ScreenCanvas but that didn't help and as mentioned multiplying everything by 4 causes a lot of lag I never experienced in 2.4. @Nockawa (hope I'm not over-tagging you) what should I change this into to get desired result, if possible? var getWidth = function(percentage) { return (percentage / 100 * canvasWidth); }; Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 9, 2017 Share Posted March 9, 2017 you must do return (percentage / 100 * canvasWidth * engine.getHardwareScalingLevel()); Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 Multiplying by engine.getHardwareScalingLevel() or 4 causes me to experience major lag to the point of my browser getting stuck. It's as if the computer needs to manage a 4x bigger resolution than usual and *then* scale it down. It is as laggy to force `engine.setHardwareScalingLevel(1)`. Perhaps something else is causing great lag for me but I'm not sure what that might be which is unaffected in earlier Canvas2D version. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 9, 2017 Share Posted March 9, 2017 Look like we can't understand each other. Let's put an example: you have a HTMLCanvas with an initial size of 800x600. If you call setHardwareScalingLevel(4), the engine will resize the internal canvas to 200x150 (but still display it in a 800x600 window). On the Canvas2D side, I always consider that you're dealing with a 800x600 canvas, I use the "window size" if you want, not the rendering size. So if you create a Group2D/Canvas2D with a size of 200x150, don't expect it to fill the entire canvas: it won't happen, because I'll apply a 1/4 scale on the given size (1/getHardwareScalingLevel) and you'll end up with a very small surface. Shorter version: you have to ignore the canvas.width/height (canvas being an instance of HTMLCanvas) when the hardware scaling was applied. If I remember you have access to other properties that will return you the window size and not the rendering size, these are the properties you should use. The Canvas2D will be rendered with the same "resolution"/"precision"/"pitch" than the 3D scene, the same amount of pixels will be processed by the fragment shader of your graphic card. Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 I'm quite sure I follow. My canvas.width value in this scenari is 800, but it's rendered as 200. If I multiply it with `engine.getHardwareScalingLevel()` I use the value 3200 and it's rendered as 800, which seems to put on a big stress on my browser. Is there perhaps a setting somewhere I need to switch? Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 9, 2017 Share Posted March 9, 2017 No, when I debugged your code the size that were used to create the Canvas were very small, like the 460x221 that appears in this screenshot right to the canvas HTML Element and not the size that appears in the box model at the right which is 1842x887. The canvas2D lib needs 1842x887 but internally I will apply a 1/4 scale factor, ending with a rendering size of 460x221. Debug your app, look at the numbers you use during the creation of Canvas2D primitives (Canvas2D, Group2D, etc). Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 I applied your latest version but can't find the debug variable. It used to be at 889, but moved away somewhere. Ctrl + f'ing "debug" doesn't make me much wiser. Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 Mine doesn't seem to get shrinked but I still have to scale up to over 4k pixels in width in Canvas2D. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 9, 2017 Share Posted March 9, 2017 1 minute ago, Raitch said: Mine doesn't seem to get shrinked but I still have to scale up to over 4k pixels in width in Canvas2D. this can't be the value after setHardwareScalingLevel was called, what is the resolution of your screen? FullHD I presume, not near 4K? Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 Yeah, it's not near 4K. Just around FullHD. The Canvas was running when I took the screenshot. When is setHardwareScalingLevel() usually set? Maybe it's wrong of me to use: #renderCanvas { height: 100%; touch-action: none; width: 100%; } Quote Link to comment Share on other sites More sharing options...
Nockawa Posted March 9, 2017 Share Posted March 9, 2017 Man I did everything I could, debug your project, using the max files of bjs and c2D, put breakpoint in the methods get/setHardwareScalingLevel, put breakpoints in the parts of your project that create the prims, and see what's going on. You've updated the version you shared yesterday, the code is different now, but yesterday you were clearly trying to create Primitives with the scaled down size and not the window size. Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 Thanks for the efforts. The really weird thing for me is that when I run the project I give you it runs on fine, but when I try locally it lags a bunch. I'm having a hard time determining why they would differ; they never have before. I tried to delay functions with setTimeout, assuming that my local files were loading "too" fast or something. It's not a cache issue either. Just confirmed by opening my project in Incongnito. Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 The one I sent you still has `<canvas id="renderCanvas" width="1140" height="786" tabindex="1"></canvas>` set however. I guess the difference is that my local version uses scaling 4 and the one I share uses scaling 1. Quote Link to comment Share on other sites More sharing options...
Raitch Posted March 9, 2017 Author Share Posted March 9, 2017 Uhhh. So I may somehow have permanently have had zoom in my browser without noticing it and it somehow was saved in every instance I opened by local url on. Seems like a ctrl + 0 fixed the issue. I tried debugging the `window.innerWidth` value and it was above 4k px so there's that. Sorry for this silly issue. Never crossed my mind that the zoom was on nor could cause issues and it wasn't really noticeable in the screen either. This also explain why it worked on your link and not my local version. Sorry once again and thanks for your help! Perhaps it's worth considering how zoom should affect the canvas? 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.