0

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?).

Community
  • 1
  • 1
Kasper Peeters
  • 1,580
  • 2
  • 18
  • 37
  • 1
    WebGL supports repeating for mipmapped textures just fine. It's only limit is the textures must be a power of 2 in each dimension. Texture that are not a power of 2 can't be mipmapped or repeated period. Proof a repeated mipmap support is [here](http://webglfundamentals.org/webgl/webgl-3d-textures-mips-tri-linear.html). Did I misunderstand your question? – gman Jun 24 '14 at 02:41

1 Answers1

0

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.

starmole
  • 4,974
  • 1
  • 28
  • 48
  • Aargh, originally got stuck on the POT issue, then misread the specs to say that I couldn't have repeat with mipmap at all... You're right, it does work... – Kasper Peeters Jun 24 '14 at 08:01