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轴使用纹理图像的边缘值然后会得到下面的效果：