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

我的纹理尺寸为<strong> 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]);

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

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

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

我做错了什么？

提前感谢您的帮助。

Answer 1

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

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

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

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

意外的拉伸纹理

1 个答案: