I’m using the Render scale setting URP to render my game at 0.5 scale using the Nearest-Neighbour setting for the Upscale Filter. This works fine in the Editor and on windows but in Browser it looks blurry like it’s ignoring the Upscale Filter setting entirely. I’ve set the scale to 0.25 in the screenshots just to demonstrate the difference clearly.
Nice sharp scaling in Windows/Editor
Horrible blurry scaling in Browser
Settings
WebGL does not support HDR. You may have to turn that off.
WebGL also defaults to using a different (medium) quality setting. Check if the desktop build looks as blurry in the quality level used by WebGL respectively set WebGL to use the same quality level as the desktop build.
Thank you for the response! My project only has a single quality setting that’s the same for both Windows and Browser, which I renamed “standard”. I’ve also tried toggling HDR on and off and all that does in Browser is turn the post effects on and off. I’m not at my computer at the moment but I’ll take a screenshot of my full quality setting when I am.
Hmm upscaling with pixelation in URP definitely worked for me last year, I mean without blurring/filtering.
Try disabling all post effects and just focus on the settings required to make the pixelized effect. It’s likely just some setting. Oh and check if the blurring goes away when you enter fullscreen in the browser. And check if browser zoom is 100%. Filtering might be caused by upscaling the Unity frame by other means.
I disabled Post Processing in the Universal Render Data settings and now it’s blurry in the editor/windows too. What’s strange is all other post processing effects are working in browser apart from the Upscale Filter. Blurring remains when I go into fullscreen and the zoom is 100%.
Added some screenshots of my settings in case I’ve done something wrong in there.
Try the Forward+ render path.
And try enabling Anisotropic textures, that’s about the only thing related to texture filtering that might make a difference.
You should also set up a new Camera and use the default settings just for a test to quickly rule out if any non-default Camera setting may cause this issue.
There is an entry in the issue tracker for this and it’s marked “by design”. The resolution note seems to suggest that it’s working which makes me think this might be a problem with the browser. It’s also possible it’s working correctly with just the version they tested: 2021.3.32.
I wonder if it makes a difference whether the texture filtering mode is set to bilinear vs point/nearest in the Inspector?
Still have a hunch that the browser somehow upscales the content view and while doing so applies a fullscreen bilinear filter. If a pixel perfect textmesh label is also getting blurred I tend to assume that this might be the case.
The UI elements render fine with no blurring, I don’t know if that helps rule out it being something to do with the browser distorting things?
edit : Tested with Anisotropic Textures enabled and a Fresh camera, no difference. Setting it to Forward+ made it so the game wouldn’t load in Browser.
Yes, in that case it’s definitely Unity rendering that applies the smoothing. It could still be a browser bug but if all major browsers show the same blurring I would assume it’s likely a URP issue or just a setting.
Have you tried upscaling in a new, empty project? If that works, the issue is within your project. If it also blurs, it’s likely an issue with URP + Web. In that case a newer editor and/or URP package version might be the only possible fixes.
Thanks again for the help! Created a new project, in both the latest version of Unity and the 2021.3.32 version Ryiah suggested, and both are still crisp in windows/editor and blurring in browser.
Which browser? There’s more than one and you need to test all major ones when you have an issue or before publishing a release. WebGL builds are what I call “double-cross-platform” because each Browser+OS combo has to be treated as a separate target platform.
Not doing so may double-cross you because one fix for a particular issue needs to be tested on all Browser+OS combo again or else that targeted fix might just break for the others.
On Windows at least Chrome, Firefox and Edge need to be tested, all others only have fractions of a percent market share (figuratively speaking, perhaps one of them has like 2% 
).
Already been testing on Chrome, Edge and Firefox, all having the same blurring issue. I noticed turning off post processing causes it to ignore the Nearest-Neighbour upscaling in the Editor/Windows too, so possibly an issue with post processing?
Just ended up drawing the camera to a render texture and displaying that as a raw image with point scaling. Gives the same effect and performance boost, with the added benefit of actually working in browser. Hopefully the other method gets fixed soon!
I have just stumbled upon the same issue. Game pixely at Unity but blurred at browser. Screen space UI getting blurred aswell (it set to be rendered AfterRenderingPostProcessing). What a workaround you found, interesting, let’s hope it will get fixed.
What Color Format have you used? I am trying different things out but always getting this thingie at webgl
everything works fine at Editor, it’s render texture on the material on the UI image
Sorry just seen this! Don’t know how much you’ve already done so I’ll just go through the whole process then if anyone else needs it it’s here.
So I created a Render Texture with these settings -
The size needs to be set to your final display size divided by how pixelated you want it. For example my game displays at 1280 x 720, so I divided that by 2 to get 640 x 360, which makes the pixels on screen twice the size.
I set the Colour Format to R16G16B16A16_UNORM, to get some decent colour range, but R8G8B8A8_UNORM and R32G32B32A32_SFLOAT will also work, 8 will give you a more “retro” look, 32 is probably overkill haha.
You can set Depth Stencil Format to none if you don’t need it, same with the Mip Maps, toggle than on if you use them.
Finally make sure the Filter Mode is set to Point, this will give you the sharp pixel scaling you’re after.
Then drop the Render Texture into your main camera here -
Next you need to create a UI > Raw Image in your scene
In the Raw Image inspector you need to set the Anchor Preset to stretch to fill the display. Do this by clicking the icon in the top left of the Rect Transform dropdown, holding Alt, and selecting the stretch on both axes setting in the bottom right of the popup window.
Lastly in the Raw Image dropdown drag your Render Texture into the Texture slot.
Hope that works for you, let me know if you have any issues with it!
Oh, so you were using Raw Image, I forgot this thing even exists. I instead made a material with render texture for an image and that didn’t work at WebGL build. Raw Image works fine, thanks for telling me!
I wonder if I should set the size of rendering also smaller for performance or just shrinking the texture does all the trick.
And about resizing the image, I used this ugly suboptimal but working solution for supporting any resolution, since for me for WebGL that’s an essence to support weird resolutions
public void OnChangingResolution()//called on changing resolution
{
if (isRescaling)
{
renderTexture.Release();
renderTexture.width = Mathf.CeilToInt(Screen.width * pixelizationCoeff);
renderTexture.height = Mathf.CeilToInt(Screen.height * pixelizationCoeff);
renderTexture.Create();
mainCam.enabled = false;
mainCam.enabled = true;
}
}
That made some of my UI broke so I had to fix it
My Screen Space camera canvas scaling had to be fixed
public void SetScale()//also called when resolution changing
{
if (isPixelating)
{
scaler.scaleFactor = SaveObject.instance.hudScale * Rescaler.instance.HeightResolutionKoeff * Faker.instance.pixelizationCoeff;
}
else
{
scaler.scaleFactor = SaveObject.instance.hudScale * Rescaler.instance.HeightResolutionKoeff;
}
}
Camera.WorldToScreenPoint refused to work properly in my MarkerManager, so had to also fix it
screenLocation = Cam.WorldToScreenPoint(ActiveMarkers[i].Location.position);
if (isPixelating)
{
float recalcualted = 1 / Faker.instance.pixelizationCoeff;
screenLocationReal = new Vector3(screenLocation.x * recalcualted, screenLocation.y * recalcualted, screenLocation.z);
}
else
{
screenLocationReal = screenLocation;
}
//there is more, that's just the main part
So much for just simple pixelating
As a side note, I don’t see the performance boost at all (rendering 1.0 and pixelating x 0.7)
Edit: well maybe +4 FPS (110%). Testing on a potato’s integrated graphics.
It seems like that bit of extra rendering the image consume some performance, which might be negligible but still here, while smaller rendering overcompensate that if it’s squished enough; not up for profiling to check how all that work, at least for now, however.