Hello all,
I am working on a project that uses high resolution PNG (2048x2048) textures from a poster. For some reason, the textures have all these artifacts and look awful. Everything is clear and sharp in Blender, but BJS seems to be doing something here that is a miss for me. The textures are set to Texture.CLAMP_ADDRESSMODE for wrapU and wrapV to avoid nasty seams, but even if Iet it wrap the textures still look awful. Much of the text is illegible. Any ideas?
Side note: What’s that maximum [or average high res.] res. people use for repeating textures? Does texture size hurt performance on modern mobile web?
In general, max texture size is GPU dependent. My understanding is that most mobiles can do up to 4096x4096 but its safer to go with 2048x2048 (which is what I did). My original image as seen above is something like 6001x3788 so I sliced it up to 2048x2048’s with some alpha at the edges. Of course this is not a repeating image, but rather a single plane with 6 materials (each carrying a texture). For repeating images, I believe it matters how much detail you want. The more you want the details to be seen the larger the image should be. If its a dirt pattern though for the ground smaller is probably better.
Side note: The other problem I have encountered with my setup is that on my mobile device (LG Zone 4) none of the images show up. They are all black. On my laptop (old HP Aspire 15v), old iPad, and my wife’s newer Android everything works fine. I suspect my scene is using too many attributes (capped at 16 on some mobiles) and therefore it doesn’t work.
Hi, @primesoftware ,
Just trying to pinpoint the issue here: are you having texture display problems on mobile devices only or everywhere (both mobile and desktop)?
If possible, can you specify the “awfulness”: is it blurry, bloby (chunky hues), bandy (lack of bit depth), jagged (poor AA), having visible seams, low-resolution, or something else?
In my experience, 2K textures shouldn’t be a problem on most devices (similar to or better than iphone 6).
A PlayGround will be even better to have a closer look at it.
Side note: 2GB of shared RAM on LG Zone 4 might be too small to handle multiple 2K textures and the multitudes of attributes you mentioned, since both cpu and gpu are sharing the RAM. The browser might be very brittle.
Just being curious, what would everyone consider to be an average “modern moble device”. I guess based on different target audiences, this might vary a lot.
Interestingly, the problem seems to be worse on desktop. The text is blurry and almost looks like there is a block shadow underneath. Some of the larger font is jagged. I tried enabling FXAA but that just made everything much more blurry illegible. There is a screenshot attached to the OP. I will try and get a playground setup today.
I figure anything that still gets browser updates is modern mobile and aim for the lower end.
Does the size of the mesh make a difference? Does a world-space 1x1x1 cube achieve full 2048x2048 glory?
The only textures that show up (not as black) on my mobile btw have only emissive and ambient properties (lighting is not supported).
Hi, prime,
Just did a little experiment myself:
2K PNG + default engine settings:
Text seems to be normal.
Might need a PG from you to pinpoint the issue.
Note: the forum auto-compress screenshots, images look better in the original browser rendering.
You may want to play with samplingModes, or even disable mipmapping.
Also make sure to use power of two textures so there is no rescale done by the system
Excellent suggestions. I will give them a try. One question though regarding these settings. The images I have are loaded from a glTF file. How do I set the noMipmap option prior to loading the glTF file since the option is readonly?
not sure the mipmap is the main problem
Just curious, how do you guys share PGs with externally loaded files to get around CORS? I am creating a PG but my glb file can’t load from my domain bc of CORS.
GLB if anyone is interested…
I think you were right. I discovered the BJS sandbox and loaded my glTF file. When I set the sampling mode to linear its looks beautiful. Now I just have to figure out how to get Blender to do that on export…or before I load in the glTF in BJS.
Hi, I have been using Github for that.
I have to update this doc’ page about github (I use a different method than this one): Using External Assets - Babylon.js Documentation, and I also should move this Dropbox tips I wrote here Available Meshes to Import - Babylon.js Documentation to the doc page linked above, but I guess you’ll be able to link your custom assets by reading this.
1 Like