Dealing with a problem considering magFilter/wrap/mesh size

Questions
, ,
1

Hello, I’m facing an issue with texture handling in three.js and need some assistance. Here are the details:

  • I have a texture, a material, and a mesh.
  • The mesh is square because I’m dealing with map tiles.
  • The texture contains both black and transparent areas for no data.
  • The transparent data is getting manipulated by magFilter , which I’ve set to NearestFilter , and wrap , which I’ve set to ClampToEdgeWrapping . Any other settings make it worse.
  • However, I need to make the black pixels in the texture (indicating no data) also transparent, which exacerbates the issue with magFilter and wrapping.
  • There seems to be no way to set magFilter to none at all; it always defaults to NearestFilter . The same goes for wrap, which defaults to ClampToEdgeWrapping ; there seems to be no way to disable wrapping entirely.
  • I’ve tried several approaches using the fragmentShader of the material, and I can easily select the entire area I want to make transparent. However, when I set those areas to transparent, the problem with magFilter and wrapping gets worse again.
  • I’m looking for any solution, and I’m even willing to modify three.js itself if necessary.
  • An interesting note: if I set the material to wireframe: true , it follows the exact edges I want. As you can see in the images above, with the wireframe on, the artifacts caused by magFilter and wrapping do not occur. Maybe this insight could lead to a solution.

Thank you for your help!

How I wish it would look (without the wireframes ofc, but no artifacts)

howiwishitwouldloo
howiwishitwouldloo794×825 77.8 KB

Original image, top texture, bottom height info
ogimage
ogimage543×941 20.7 KB

How it looks, this changes when I set magFilter to linear, but the problem still exists.
howitslooking
howitslooking886×899 24.9 KB

2

Changing those properties might require a “texture.needsUpdate = true;” to propagate the state change.

Normally if you do those setting before the texture has been rendered it takes immediately, but if the texture has been seen by the renderer, then it might need an update tickle.

edit: also… can’t tell from your post but if you’re using rendertargets, then the texture itself is the renderTarget.texture… so. make sure you’re setting those states on the actual texture…

texture.minFilter = THREE.LinearFilter;
texture.wrapS=texture.wrapT = THREE.ClampToEdgeWrapping;
texture.needsUpdate = true;

edit: Just reread your question and I probably misunderstood what you are trying to do… It sounds like you might be talking about the border parameter in regular GL… to set a color to clamp to? unfortunately that Isn’t available in webgl.
If you want to use clampToEdge to repeat a transparent color, you may have to put a transparent border of pixels in the texture.