Repeated textures with WebGL

I need to repeat a texture开发者_JS百科 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!

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.

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.