We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Textures blurry on mobile

Home Forums General Questions Textures blurry on mobile

  • This topic has 17 replies, 4 voices, and was last updated 3 months ago by Avatarweb.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #29890
    Avatarweb
    Licensee

    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?

    #29896
    Avatarjem
    Licensee

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

    #29924

    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.

    #29947
    Avatarweb
    Licensee

    @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”.

    #29960

    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.

    Co-founder and CTO at Soft8Soft
    FB | Twitter | VK

    #29965
    Avatarweb
    Licensee

    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?

    #29967
    Avatarjem
    Licensee

    @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.

    #30002
    Avatarweb
    Licensee

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

    #30501
    Avatarweb
    Licensee

    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.

    #30532

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

    Co-founder and CTO at Soft8Soft
    FB | Twitter | VK

    #30538
    Avatarweb
    Licensee

    Nope I’m doing it via JavaScript:

    Maybe I should create a test file for you.

    • This reply was modified 3 months, 1 week ago by Avatarweb.
    #30543
    Avatarweb
    Licensee

    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.

    Attachments:
    You must be logged in to view attached files.
    #30546
    Avatarjem
    Licensee

    @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.

    Attachments:
    You must be logged in to view attached files.
    #30585
    Avatarweb
    Licensee

    @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?

    #30609
    Avatarjem
    Licensee

    @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.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.