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

Question

Hello,
I am using Unity 2021.1.28, built to WebGL.

What I was trying to do, is to (A) force the render resolution of my WebGL build to be 1280x720, while (B) scaling it to be displayed fullscreen in the browser window. In the html file, I tried to use canvas DOM attributes width/height to do (A) and css style width/height to do (B) alt text
And this is the result: https://youtu.be/zRtoAdZ7mtQ

I wrote a script that prints Screen.width and Screen.height with onGUI(). As you can see in the video, the resolution is fixed at 1280x720, and it is forced to be fullscreen in the browser, which is what I want. (It's stretched and looks blurry, but this is ok in my use case) However, it seems that the UI coordinate is fixed at 1280x720 as well. And it isn't scaling with the browser window. Thus I can't click on the UI correctly and the mouse hover effect doesn't look right.
Neither UGUI nor UI Toolkit works.

I was wondering is it possible to make UI Coordinate scale with CSS style? It would be so great if anyone could shed some light!

Answer 1

Hey! I had A LOT of problems with fixing UI for WebGL and it took me days to figure out a way to scale UI properly for WebGL. I'm gonna share what it did to fix my UI scaling and hope it works for you: 1-go to Project settings=>Player=>Resolution and Presentation . and then set your default width and height. 2- Make 3 canvases like this picture alt text

UI UI2 and UI3

For UI canvas do this : in Canvas Scaler put UI Scale Mode to Scale With Screen Size and then set your reference resolution. Screen Match mode on "Match with width or height" and then pull scroll all the way to the right ( height).

For UI2 make sure that the Canvas's anchor is in the middle.

for UI3 : add a "Aspect ratio Fitter" to the UI3 and then put aspect mode on "fit in parent" and then in aspect ratio put whatever aspect ratio you have.

also make sure in game tab your aspect ratio is fixed and then for adding other ui elements make sure that their canvas is the child of Ui3 (for example take a look at sub canvases here : back Lock1 Lock2. this completely fixed my UI problem in web gl. hope it helps you as well.

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

1 Reply

Your answer

Follow this Question

Related Questions