0

我有以下代码片段：

    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 小得多的多边形）

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

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

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

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

我做错了什么？

在此先感谢您的帮助。

4

1 回答 1

0

我将纹理坐标更改为以下内容：

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

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

请参阅Khronos WebGL 论坛以获得更详细的讨论

于 2010-12-17T14:15:25.273 回答