I am tiling a surface in WebGL using a texture that requires mipmap to look good (non-negotiable). Because WebGL does not support a wrapping mode of gl.REPEAT for mipmap'ed textures, I clamp texture coordinates myself using 'fract(texcoord)' in the fragment shader.
As a consequence, I get artifacts at the edge of the texture, since the 'fract(texcoord)' wraps around and hence makes the GPU think that it only needs a low detail mipmap.
If this had been ordinary OpenGL, I could use textureGrad to tell the GPU about the real gradient, but unfortunately this is not available in WebGL.
Any suggestions? I am aware of the 4-tap trick described at http://0fps.net/2013/07/09/texture-atlases-wrapping-and-mip-mapping/ but that seems like a lot of extra overhead and only makes the effect less severe, not go away entirely. I have also seen the suggestion in Threejs Custom Shader - Screen Tearing to use the 'lod' parameter of texture, but that does not quite solve the problem (moreover, the answer is from 2012 so there may be better solutions now?).
WebGL does just fine with repeat. Your texture needs to be a power of two size in each direction - not necessarily the same. The same requirement holds for being able to use mip maps (at all!) also. It is a bit hidden in the spec.