意外拉伸质地

Question

我有下面的代码片段：

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

我的纹理尺寸为256×256 。

选项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更小的多边形）

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

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

我的理解是即使在选项1中，重复（TEXTURE_WRAP_S和TEXTURE_WRAP_T）选项也会提供详细信息。为什么纹理在选项1中拉伸？我误解了吗？

这是在Chrome Canary版本上运行WebGL。

我做错了什么？

在此先感谢您的帮助。

Answer 1

我改变纹理坐标为以下：

代码： VAR texCoords =新Float32Array（ // [1，1，0，1，0，0，1，0]
[100 ，100，-100,100，-100，-100,100，-100]
）;

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

请参阅Khronos WebGL Forum更详细的讨论