Repeated textures with WebGL

Question

I need to repeat a texture within a single element. Is it even possible in WebGL?

I tried either of the following but had no luck.

ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);

ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.REPEAT);
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.REPEAT);

Thanks for any help!

Sayles

Answer 1

It's important to know that these parameters are something that you have to set on each texture, they're not global settings. So your code should probably look something like this:

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
// Set up more texture state, like filter modes...

Of course, you don't have to do it when you call teximage2D, the important part is that you've bound the appropriate texture first. If you're setting the wrap this way and it's still not working, you may be looking at a driver bug.

That said, as I recall the default texture wrap mode should be REPEAT anyway, so I'm not sure why you would be having problems.

Middendorf

Answer 2

Some browser-OS-GPU combos only let you set gl.REPEAT on power-of-two textures. That's still the case for Safari-El Capitan-HD4000 as of 2016.

Solidarity