I have the following code snippets:
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.REPEAT);
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.REPEAT);
My texture dimension is 256x256.
Option 1 – big polygon
const x0 = 100;
const x1 = -x0;
const z0 = x0;
const z1 = -z0;
var vertices = new Float32Array(
[ x0, 0, z1, x1, 0, z1, x1, 0, z0, x0, 0, z0]);
The result: The texture is stretched so I lose the detail.
Option 2 – small polygon (notice that this is a much smaller polygon than option 1)
const x0 = 5;
const x1 = -x0;
const z0 = x0;
const z1 = -z0;
var vertices = new Float32Array(
[ x0, 0, z1, x1, 0, z1, x1, 0, z0, x0, 0, z0]);
The result: I can see the details of my texture.
My understanding is that the REPEAT (TEXTURE_WRAP_S and TEXTURE_WRAP_T) option will give me the details even in Option 1. Why is the texture stretched in option 1? Did I misunderstand it?
This is running WebGL on Chrome Canary build.
What did I do wrong?
Thanks in advance for your help.
Note: Cross post it from opengl es - Unexpected stretched texture - Stack Overflow due to lack of answer