Very bad quality on webgl builds

Hi my game looks fine on Unity Editor but when i export it to webgl, my build looks terrible on mobile devices.
terrible means like low quality resolution. For example my sprite looks pixelated.

Here is what i checked:
I check quality settings for webgl, and tried as high,very high and ultra
i enabled anti aliasing
also i change texture aniso level


what should i do next?

im using unity 2020.1

 

WebGL is unsupported on mobile devices. It will be forcing them into WebGL 1.0 which is why the graphics look bad

 

thank you for your answer, i'll try to disable autio graphics api and take a look

 

i tried to force it webgl2.0 and nothing changed

 

Thats not what I was saying. I was saying that because of browser + hardware limitations, a lot of devices / browsers will set it to WebGL 1.0 automatically regardless of what you set because that is all they support and you cannot do anything about that. So you will have to adjust the look and feel of your app to match what WebGL is outputting, or abandon WebGL as a target.

I suggest also check the resolution in player settings, its usually set to 900x600px as default. Make it 1080p if you want good quality, but it will also make it rinse your performance and memory.

 

WebGL itself is very well supported on mobile nowadays:
https://caniuse.com/webgl

What's true is that compatibility entirely depends on the GPU. Much older mobile devices are out of luck.

 

WebGL unity is not supported on mobile, the status of WebGL itself on mobile doesnt make much of a difference when the engine itself does not officially support mobile. The unity runtime + WebGL alone makes issues on a lot of mobile devices with less RAM.

I am on a major client project for the last 6 months that uses solely WebGL, and it 100% is more of a headache than necessary. Its better to go pure WebGL with something like three.js than use unity, if you want compatability and performance. We have had numerous issues over the last 6 months getting our large scale project to run across all devices at a good framerate, and due to the way safari only supports very old WebGL, it means we are stuck at that level of quality across the board.

Also, not all versions of safari ios support WASM, meaning you have to support both asm and wasm which is difficult and annoying.

 

I had the same issue and resolved it by changing the config.devicePixelRatio in the index.html file which was set to 1 (WebGL Template). But beware of performance implications.

 

This is actual solution. Thank you!

 

What am i supposed to do in index.html

the config.devicePixelRation is commented out by default

 

Have you tried uncommenting it and setting it?

 

After conducting some research and testing, I have successfully achieved the maximum quality texture for my Unity WebGL build. However, it has resulted in an increase in the build size, but in my particular case, I am not concerned about the size. To accomplish this, I followed several steps:
Firstly, I set the texture compression to ETC2 and the maximum texture size to 2048 in the build settings.

Secondly, I forced the texture compression to remain uncompressed. Afterward, I clicked on "Apply Overrides" to ensure the changes were implemented.

Finally, in my project settings, I set the Quality Anti Aliasing to 8x. If you are using URP, this option can be found in your URP Scriptable Object asset within your hierarchy.

 

I did not attempt that approach. Instead, I discovered alternative methods to enhance the quality of my WebGL build.

 

Would you like to enlighten the rest of us on how you did that?

 

When the Build is Ready or you can see the Below Line in the Index.html File.
config.devicePixelRatio = 1
index.html file Contains this Line You have to do this Just change the value 1 into the 2 and it Work's fine for PC and Android also.

 

After conducting some research and testing, I have successfully achieved the maximum quality texture for my Unity WebGL build. However, it has resulted in an increase in the build size, but in my particular case, I am not concerned about the size. To accomplish this, I followed several steps:
Firstly, I set the texture compression to ETC2 and the maximum texture size to 2048 in the build settings.

Secondly, I forced the texture compression to remain uncompressed. Afterward, I clicked on "Apply Overrides" to ensure the changes were implemented.

Finally, in my project settings, I set the Quality Anti Aliasing to 8x. If you are using URP, this option can be found in your URP Scriptable Object asset within your hierarchy.