Blurry alpha maps on planes

[Junisek]

Hello,
I have a glb model with a part that looks like this:

As it is a plane, I have to set

side: THREE.DoubleSide

on the material for the texture to appear on both sides.

The expected look is something like this:

But I get this:

As the model is meshopt compressed, I have to call this to be able to assign any map:

const modelMaterial = node.material;
texture.repeat.copy(modelMaterial.map.repeat);
texture.offset.copy(modelMaterial.map.offset);

I tried to play around with setting different repeat values for hours but the texture either appears cropped, misaligned or otherwise blurry. I get the best results without setting the repeat value at all.

I use alpha maps on different parts of the mesh for hair but they are not planes and it works well. I have one more mesh part that is a plane (eyelashes) and they appear blurry as well but they are so small that it’s almost invisible and it doesn’t bother me that much.
The map resolution is 2048x2048 and I even tried to increase the size with no effect. I believe the UV mapping is done correctly as it looks fine in blender. I don’t mind the occasional stretching but the texture can’t be blurry (altough I understand there may be some limitations in the resolution).

Any suggestions please? Thanks in advance.

[manthrax]

Meshopt does a lot of stuff under the hood with the goal of making it smaller. It may be converting/downsampling your textures. It may be quantizing your UV coordinates.

What meshopt parameters are you using?

Can you try loading the model without running it through meshopt and see if the problem goes away?

[Junisek]

I tried to display the mesh without compression and the issue persists.

[manthrax]

Hmm ok. perhaps you can load it up in a glitch like this: Glitch :･ﾟ✧

and we can experiment with it?

You can “remix” that glitch, then replace the stuff in test.js with your gltfLoader.load( and texture setup…

[Junisek]

There seems to be an error on that prevents me to open the page and remix…

[manthrax]

Hmm ok. If it isn’t working in chrome… Well perhaps you can reproduce your problem in a codepen or something?

[Junisek]

I tried to set up a pen but I struggle importing the file due to crossorigin issues… I never made a codepen with glb files before so I don’t know of good places to host models…

The pen is here, take a look, but it’s a blind copypasta from my local setup. It’s highly possible there are some mistakes or missing code as I can’t see what I’m doing. Thanks!

codepen

[manthrax]

Ahh right. codepen asset uploading is a paid feature.

I copied your stuffs over to glitch and messed with it and got it looking close to what you want:

Maybe try in chrome, make a free account on glitch, then go to this link?

Glitch Code Editor ･ﾟ✧

Your code is in test.js and I uploaded your assets to the “assets” tab, and grabbed their URLs for loading in test.js

To make it look like what you wanted, I had to add:

      alphaMap.repeat.set(1, 4);   //Make the texture repeat 4x on the V axis
      alphaMap.wrapS = alphaMap.wrapT = THREE.RepeatWrapping; // Enable repeat wrapping on texture, otherwise it will only repeat the edges of the texture...

By the way, you may not have to set this stuff up manually and instead, you can export the GLB with the textures and UVs set up in your modelling tool. What modeller are you using? Blender supports exporting GLB with textures embedded etc.

[manthrax]

With some more tweaks:

[Junisek]

Looks like I wasn’t patient enough playing with different values as I interpreted all of them as “bad” - in my setting te camera is more zoomed out and it it didn’t occur to me that it would be a good idea to zoom in to actually see what’s going on. So now it looks very good when zoomed in and weird when zoomed out, so I’ll probably rethink the implementation.
Anyway thank you very much for your time and help. I really appreciate it!

[manthrax]

yeah I tried some different filtering for “minFilter” which is what happens when a texture is zoomed out, but NearestFilter looked really weird. There are some other things worth trying like disabling mipMapping or using custom mipmaps.
Are you trying to duplicate a reference image from a 3d model?

[Junisek]

Yes, I try to match the materials in three as much as possible to the look of the model in blender. I’m aware of some limitations and your suggestions for little tweaks are helpful.

alphaMap.generateMipmaps = false

seems to help a little but I decided to go for a different alpha map with slightly thicker hair strands and it looks a little better.
Thank you!