Jump to content

Using 10 ScreenSpaceCanvas2D classes vs using 1


Raitch
 Share

Recommended Posts

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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);

	};

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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).

 

OwAbqeH.png

Link to comment
Share on other sites

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. 

Screenshot from 2017-03-09 13-26-15.png

this can't be the value after setHardwareScalingLevel was called, what is the resolution of your screen? FullHD I presume, not near 4K?

Link to comment
Share on other sites

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%;
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...