21 WebGL进一步理解纹理映射

案例查看地址：点击这里

为了更好的对纹理相关的内容的理解，我们修改上一节的案例进行更加深入的了解。

接下来，我们将76行的纹理坐标进行了修改：

        var verticesSizes = new Float32Array([
            //四个顶点的位置和纹理数据
            -0.5,0.5,-0.3,1.7,
            -0.5,-0.5,-0.3,-0.2,
            0.5,0.5,1.7,1.7,
            0.5,-0.5,1.7,-0.2
        ]);

我们修改完坐标以后，纹理的图像不足以覆盖整个矩形，但是空白的那些地方，纹理却重复出现了。这是因为纹理参数的gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T的默认值都是gl.REPEAT，就是默认repeat循环。

那么接下来，我们在案例里面将这两个的值修改一下：

在上一节的案例找到152行代码：

        //配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);

在其代码下面配置纹理参数下，将gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T两个属性的默认值修改掉

        //配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.MIRRORED_REPEAT);//修改x轴为镜像对称式的重复纹理
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);//修改了y轴使用纹理图像的边缘值

然后会得到下面的效果：