Opengl es 意外拉伸纹理

我有以下代码片段：

    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);

我的纹理尺寸是256x256

选项1——我的多边形

    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]);

结果：纹理被拉伸，因此我丢失了细节

选项2——我的多边形（请注意，这是一个比选项1小得多的多边形）

结果：我可以看到我的纹理细节

我的理解是，重复（纹理包裹和纹理包裹）选项将为我提供选项1中的细节。为什么在选项1中拉伸纹理？我误解了吗

这是在Chrome Canary build上运行WebGL

我做错了什么

---

提前感谢您的帮助。

我将纹理坐标更改为：

代码： var texCoords=new Float32Array( //[1,1,0,1,0,0,1,0]
[100,100，-100,100，-100，-100,100，-100]
);

它匹配大多边形坐标。它显示大多边形上原始小纹理的细节

---

有关更详细的讨论，请参见

是否设置顶点的纹理坐标并在着色器中使用它们？

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]);