Problem of pixelation of assets on mobile devices (mipmap enable)

HI!) I ran into the problem of pixelation of assets on mobile devices, advised to enable mipmap levels, how to do it in babylon.js? Thank you in advance )

Mipmaps are automatic when loading a texture unless you are expressly asking not to do it (or if you load a DDS with no mipmap)

Pixelation issue on mobile can come from a smaller than expected resolution. you can try to boost it with engine.setHardwareScalingLevel(0.5) to see if it helps

1 Like

Thanks, I’ll try)

HI, when setting this value, the animations broke ((and everything became a little dull
On a computer without this value everything is ok, but my computer monitor has a lower resolution than on my phone)
Clarification about broken animations, in the same way they will behave if you put too small a value for blendingSpeed
Delivered a value of 0.7, it seems to be tolerant) I’ll try to also use antialiasing, for meshes

1 Like

Hi, as far as I understand, mipmaps are generated only for textures, is it possible to somehow generate them for ordinary pictures? Or go another way using textures for buttons for example. As I understand it, because of this there is a pixelation of resources, but I’m wondering if there is any other way to fix this other than HardwareScalingLevel

Hello, why would you like to generate them for ordinary picture ?

Would be great if you could share a screenshot cause I have the feeling you are discussuing about geometry aliasing and not texture here that mipmap won t solve.

If it looks blocky with steps around the geometry you would need either aliasing at the canvas level or change the hardware scaling level. Another solution might be to rely on FXAA post process to smooth out the eges.

1 Like

I am using this solution now. So far this is at the testing stage.
Everything is fine with animation textures; problems arise with buttons. Maybe everything will work well with this solution)
Here is a screenshot before applying this solution:

A good developer Pixi.js advised, I myself do not really understand this issue)

Unfortunately hard to tell what is texture from what is mesh and where the text is coming from?

but it still looks like your overall res is too tiny so setHardwareScalingLevel might be your best bet. You could easily turn it on only for mobiles by inspecting the user agent ?

Yup the advantage is normally to be stored in DDS or compressed texture to save a bit of memory on the client but it would not fix your particular issue.

1 Like

Now I just check fps, if it is lower than 60 fps, increase scalingLevel) Since there were complaints that the quality is also low on devices
MacBook / iMac
I think everything will be fine, thank you and Deltakosh)

2 Likes