Unexpected stretched texture

Question

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 -- my 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 -- my 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.

Answer 1

I changed my texture coordinate to the following:

Code: var texCoords = new Float32Array( // [ 1, 1, 0, 1, 0, 0, 1, 0]
[ 100, 100, -100, 100, -100, -100, 100, -100]
);

It matches the big polygon coordinate. It shows the details of the original small texture on the big polygon.

Please see Khronos WebGL Forum for more detailed discussion