意想不到的拉伸纹理答案

【问题标题】：Unexpected stretched texture意想不到的拉伸纹理
【发布时间】：2010-12-13 19:16:03
【问题描述】：

我有以下代码sn-ps：

    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。

我做错了什么？

提前感谢您的帮助。

【问题讨论】：

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

标签： opengl-es textures webgl

【解决方案1】：

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

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

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

更多详细讨论请见Khronos WebGL Forum

【讨论】：