So Basically I am using a 23inch display 1920*1080 and the texture quality and the whole scene is perfect , but as soon as switch to any other smaller display or use the same on my phone the scene becomes very blurry.
This happens when my camera is far away
Are you able to share a screenshot?
Here are 2 pictures
the first one is of how it should look , it is from my 23inch display
the following is a cropped screenshot of the scene from playcanvas loaded on my phone
What’s the resolution of your smaller screens/mobile?
Is device pixel ration enabled or disabled? Does enabling it make a difference?
The resolution on smaller screen is 1920*1080
pixel ratio is disabled, enabling it makes no difference
What is the zoom setting on the small screen browser? Are you certain it is set to 100%?
Yes it is probably 100% only
I can’t think of any reason this would happen on a smaller screen.
Can you share a build URL to look at please?
I tried on google pixel 3 and it’s all high res.
Can you please share a screen shot
here’s the screenshot - it’s in portrait mode, the phone rotation does not seems to work. The screen on the phone is 1080 x 2160 pixels
Looks like the project has device pixel ratio disabled hence it looks ‘blurry’ due to the resolution being set at CSS Units. It also looks like that Anti Aliasing may be disabled?
Enabled device pixel ratio, it renders at native resolution and looks ‘sharp’
This page has more information: Device Pixel Ratio | Learn PlayCanvas
It blurs when the camera is far away
It did give me better results but not the quality I need, try to check it on window of size 375*211, thats the size I need it in.
Also I am opening this on another site in an iframe , do you think there can be a problem there?
I’m not sure what the expectation is. If the window size is 375 * 211, it’s going to be rendering at a resolution of 375 * 211 which is very low resolution.
If you take any image of reasonable size and scale it down to 375 * 211, it’s going to look blurry because the resolution is low.
Taking your screenshot from your 23 inch display and downscaling it to a height of 211 pixels in a image editor looks like this which is blurry (the image editor does do some post sampling to make it look a bit better)
The blurriness on the numbers on the table (the blue texture with the 7 in the middle) can be made better by adjusting the anisotropy on the texture asset to be a bit higher
Original
Changing it to 2 makes it look like this:
What does it look like on your phone with device pixel ratio enabled in project settings?