Textures blurry on mobile

This topic has 17 replies, 4 voices, and was last updated 3 years, 8 months ago by web.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
2020-07-09 at 1:16 pm #29890

web
Customer

I got some textures which look quite blurry on mobile devices but not on desktop.

I already played with the screenscale and set it to the native one, but this doesnt seem to have an impact.

Is there maybe another internal max resolution setting for mobile devices?

2020-07-09 at 2:11 pm #29896

jem
Customer

@web, do the anisotropic filtering settings make any difference on the mobile device? Also, what mobile device are you testing? Thanks.

Jeremy Wernick

2020-07-09 at 7:54 pm #29924

satpreetsingh04
Participant

I am also looking for the same. It might be due to the fact that the GPU of the pc/laptop is more powerful than a mobile device, but there must be a method to solve this problem.

2020-07-10 at 8:12 am #29947

web
Customer

@jem
I havent yet played with the anisotropic setting, but will test it.
I tested that particular application on a S10 and an iPhone 11, both got the same “issue”.

2020-07-10 at 2:40 pm #29960

Alexander Kovelenov
Staff

Maybe you’re using the non-power-of-two textures (with pixel size not equal to 256, 512, 1024, 2048)? NPOT textures are not supported on iOS and always resized during the scene load.

Soft8Soft Tech Chief
X | FB | LinkedIn

2020-07-10 at 3:55 pm #29965

web
Customer

Oh, yeah this really could be the issue.
Some textures are not power of two. Thx for the hint, will take a look.

Just to be clear. When I have a non square texture, is it sufficient to just have a power of two for the longest side? So is 486x2048px okay? Or do you need to have 512x2048px?

2020-07-10 at 4:11 pm #29967

jem
Customer

@web, the WebGL 1.0 spec says that both the length and the width must be powers of two, so 2^x by 2^y is okay.

Non-powers of two textures (NPOTs) are supported by WebGL 2.0, but Apple does not support them.

IMHO, you should scale the images yourself before you post them. This gives you control over how the final image looks. If you don’t scale the images yourself, either the Verge3D engine or the video driver will do it and the outcome is not under your control.

Jeremy Wernick

2020-07-13 at 8:01 am #30002

web
Customer

Thx for clearing that up. Will keep that in mind for the future.

2020-07-23 at 9:31 am #30501

web
Customer

Sorry guys, to bring up that issue again.

I did some more testing on an android 10 device and the problem still persists that textures look blurry on a mobile device when they are viewed at a distance.
When I zoom in on the texture its getting much better, but still not as sharp as on my screen.

I tried upping anisotropy to 16. I set the pixelratio to window.devicePixelRatio
I messed around with minFilter. But I just cant get the texture sharp!
I think this is some general quality thing on mobile, cause the 3d object itself doesnt look as sharp as on my desktop.

2020-07-23 at 2:37 pm #30532

Alexander Kovelenov
Staff

Hi,
That strange! Setting devicePixelRatio should improve the situation a lot in most cases. Are you using puzzles to do that?

Soft8Soft Tech Chief
X | FB | LinkedIn

2020-07-23 at 3:05 pm #30538
web
Customer
Nope I’m doing it via JavaScript:
```
var pixelRatio = window.devicePixelRatio;
app.renderer.setPixelRatio(pixelRatio);
```
Maybe I should create a test file for you.
2020-07-23 at 4:00 pm #30543

web
Customer

I created a testfile. See attachment.

When viewing on desktop and fully zoomed out, pretty sharp. On mobile (S10 Android10) zoomed out, pretty blurry. Zoomed in sharp.

2020-07-23 at 4:31 pm #30546

jem
Customer

@web, I tried your test scene on a Google Pixel 3 (running Adreno 630 GPU, with Android 10 with July patch level) and noticed something interesting. The 3D texture is blurry when you zoom out, just as you said. But if I pop it full screen, the texture is suddenly sharp (see screenshots), and this sharpness persists even when I return to non-full-screen mode. I don’t know if this helps.

Jeremy Wernick

2020-07-24 at 7:47 am #30585

web
Customer

@jem
Thx for the testing. I can confirm the same behaviour. I could also see that as soon as I enter the fullscreen mode, the performance drops quite heavy on my device. And this problem also stays when exiting fullscreen mode.

It also seems that the fullscreen mode is not correctly exited, because I just got a black bar at the bottom and cant see the browser bar anymore.

Can you confirm this behaviour too?

2020-07-24 at 3:27 pm #30609

jem
Customer

@web, yes, I can confirm the behaviour that you have described. I did try this in Firefox for Android also. On FF, the blur behaviour is the same as on Chrome, but the browser bar issue is not present. I suspect that the black bar issue is a bug in Chrome for Android.

Jeremy Wernick
Author

Posts