In WebGL, is it possible to make UI Coordinate scale with CSS style?

Please go to the new post in WebGL thread
dang I am really really sorry to repost this question in the WebGL thread. But it should be there instead of in this UI thread and I can’t delete this post.

There is currently no link between CSS and what run in WebGL.

Hi!
I was wondering if there’s a way to set a fixed resolution for the canvas & make it fullscreened/stretched to fit in browser window, like what i said in the post .
The reason I want to do this is, I want to limit the resolution for performance, but I also want it to be displayed full in the browser window.

There is some option related to scaling in the PanelSetting of your UIDocument that would allow you to configure how the UI will be adjusted/stretched. With this adjustment, the characteristics of the UI (sizes) are changed, but we are still rendering on the final render target.

I don’t think it is possible for the scaling to affect the performance. The calculations for geometry, matrices, layout, etc will all stay the same. The only difference would be on the GPU itself if there is a lot of overdraw and that you max-out the GPU fill rate (which is possible if you have a lot of elements on top of each other). You could try rendering to an intermediate render texture with a smaller resolution, and then blit the result on all the screen, but in my experience the blit will be more expensive than doing the render at higher resolution on all platform I tested so far.

Can you provide more detail on what you are actually doing to see how could we improve performance?

Hi, thanks for the reply!
Yes the performance is not affected by the UI. It is basically the scene rendering (our game features building with 3d gameobjects) who is affecting the performance.
The performance is generally ok. But some players using Retina or other high resolution screens are experiencing lag and low frame rates. That’s why we want to limit the Unity WebGL canvas resolution to 1920x1080. However we also want the canvas to be fullscreened/stretched to fit in browser window.(I understand that could cause blurry look but it is acceptable for now)

In this case, you have everything you need in the panelSettings!

You can look into theses property of the panelSettings:

match Determines whether Unity uses width, height, or a mix of the two as a reference when it scales the panel area.
referenceDpi The DPI that the UI is designed for.
referenceResolution The resolution the UI is designed for.
scale A uniform scaling factor that Unity applies to elements in the panel before the panel transform.
scaleMode Determines how elements in the panel scale when the screen size changes.
screenMatchMode Specifies how to scale the panel area when the aspect ratio of the current resolution does not match the reference resolution.

There should not be anything blurry with the generated geometry, as the layout engine still align all dimensions with real pixels. This is a bit different when images are involved, as we may be scaling them by a non-whole number.

What you could do to prevent this is to manually set the scale to a whole value that you would have calculated.