WebGL graphics quality issue

Graphics Device, Driver, & APIs
,
1

Hello,
this is my first post on this forum, and I hope you will be understanding if I posted it in the wrong section.
After working on many projects for mobile platforms and creating several games for WebGL, I decided to write my first WebGL application. While in games I focused on 3D graphics and other effects, this time I had to focus on the interface.

And here came the problem that I’ve been struggling with for several days:

In the editor, the text and graphics are clear, but after publishing it to the website, they become blurry. I’ve checked all browsers, tested various settings in Unity, and even after publishing, I added JavaScript in the index.html to increase the resolution, pixel count…

But the result is always the same.

Has anyone encountered this issue, and is it solvable?

2

Did those “various settings” include the obvious Quality settings?

3

Which UI system do you use? If it’s UGUI then check the Canvas Scaler. It may be scaling down your content.

If the blurry result is primarily or solely text then make sure to use TextMeshPro as regular (legacy) text is always blurry.

Depending on your use case UI Toolkit may be more suitable so be sure to try that.

4

Zrzut ekranu 2025-02-16 201207
Zrzut ekranu 2025-02-16 201207448×183 11 KB

In the entire project, I’m only using TMP_Text, so that shouldn’t be a problem. Besides, as you can see, the entire image looks like this, even the graphics.

I have the Canvas Scaler set to Constant Pixel Size, because if I set it to Scale With Screen Size, the window enlarges. However, I want the application to behave like a native app—meaning that when I resize the window, a larger area becomes visible rather than just a zoomed-in version of the same area.

5

Not sure I recall correctly what Constant Pixel Size does. Can’t hurt to try the others.

The blurriness isn’t related to quality settings perhaps? The default WebGL quality settings are lower than the usual “Ultra”. It may be using mip level 1 instead of 0 or just a lower (max) texture resolution although that should not affect the text … although, TMP uses a texture atlas.

Be sure to set the game view in the editor to the exact window size in the web build for best comparison. The default window size is relatively small, something like 800x500, and the blurriness may simply be due to that lower resolution.

6

Zrzut ekranu 2025-02-18 113712
Zrzut ekranu 2025-02-18 113712458×195 6.37 KB

Thank you for the suggestions. I changed the resolution as you recommended, but it didn’t help.

Out of curiosity, I switched the project to a desktop version and built it as well. In this case, the quality is the same as in the editor (see attachment). This suggests that it might be due to some specific WebGL settings or… honestly, I’m not sure, because I tested it on the most popular browsers, and the issue is the same everywhere. So, it’s probably not browser settings but rather something in the application itself.

7

The logo above the text is an image, right? That at least would tell that the blurring is of general nature, not just related to text / TMP.

If you take that image and place it as a sprite in the scene, does it look crisp? If so it would narrow the issue down to the GUI.

I’m thinking “bilinear filter” or filtering in general and vaguely recall that there’s a filtering and/or pixel-perfect setting in the GUI canvas (or scaler). If the UI isn’t aligned with pixel coordinates it could get blurry.

8

Hi, I’m really sorry for not getting in touch for so long. I decided to focus on the application’s mechanics and leave this topic for later.

I think I’ve found a solution. Currently, I’m developing a game for a client and working on my own application. The game has great quality, but the application does not. So, I decided to compare the settings in Unity and set everything exactly as it was in the game. However, the result was still the same.

The only difference between the game and the application was that the game ran in a specific window or fullscreen mode, using the default index.html file, while my application was supposed to run in a browser window like a regular website. So, I modified the file.

Today, I checked it again and completely changed the .css file.

Previous version of file

body {
    padding: 0;
    margin: 0;
}

#unity-container {
    position: absolute;
}

#unity-container.unity-desktop {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#unity-container.unity-mobile {
    position: fixed;
    width: 100%;
    height: 100%;
}

#unity-canvas {
    background: #231F20;
}

.unity-mobile #unity-canvas {
    width: 100%;
    height: 100%;
}

#unity-loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#unity-logo {
    width: 154px;
    height: 130px;
    background: url('unity-logo-dark.png') no-repeat center;
}

#unity-progress-bar-empty {
    width: 141px;
    height: 18px;
    margin-top: 10px;
    margin-left: 6.5px;
    background: url('progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full {
    width: 0%;
    height: 18px;
    margin-top: 10px;
    background: url('progress-bar-full-dark.png') no-repeat center;
}

#unity-footer {
    position: relative;
}

.unity-mobile #unity-footer {
    display: none;
}

#unity-webgl-logo {
    float: left;
    width: 204px;
    height: 38px;
    background: url('webgl-logo.png') no-repeat center;
}

#unity-build-title {
    float: right;
    margin-right: 10px;
    line-height: 38px;
    font-family: Arial, sans-serif;
    font-size: 18px;
}

#unity-fullscreen-button {
    cursor: pointer;
    float: right;
    width: 38px;
    height: 38px;
    background: url('fullscreen-button.png') no-repeat center;
}

#unity-warning {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none;
}

New version of the file

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#unity-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#unity-canvas {
    width: 100%;
    height: 100%;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    background: #231F20;
}

#unity-loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#unity-footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

Maybe someone will find this knowledge useful. Thanks for the help and suggestions.