意外拉伸質地

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更詳細的討論