21 WebGL进一步理解纹理映射

案例查看地址:点击这里

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

21 WebGL进一步理解纹理映射_第1张图片

接下来,我们将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循环。

21 WebGL进一步理解纹理映射_第2张图片

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

在上一节的案例找到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轴使用纹理图像的边缘值
然后会得到下面的效果:

21 WebGL进一步理解纹理映射_第3张图片



你可能感兴趣的:(WebGL)