webgl纹理

效果图：

操作步骤：

1.创建HTML5 canvas

2.获取画布 canvas 的 ID

3.获取WebGL

4.编译着色器，合并程序

//顶点着色器程序
    var VSHADER_SOURCE =
        "attribute vec4 a_Position;" +
        "attribute vec2 a_TextCoord;" + // 接受纹理坐标
        "varying vec2 v_TexCoord;" +    // 传递纹理坐标
        "void main() {" +
            //设置坐标
        "gl_Position = a_Position; " +  // 设置坐标
            //设置纹素
        "v_TexCoord = a_TextCoord; " +  // 设置纹理坐标
        "} ";

    //片元着色器
    var FSHADER_SOURCE =
        "precision mediump float;" +  //需要声明浮点数精度，否则报错No precision specified for (float)
        "uniform sampler2D u_Sampler;" + // 取样器
        "varying vec2 v_TexCoord;" +  // 接受纹理坐标
        "void main() {" +
            //设置颜色
        "gl_FragColor = texture2D(u_Sampler, v_TexCoord);" +  // 设置颜色
        "}";

解释：在顶点着色器中为每个顶点指定纹理坐标，然后在片元着色器中根据每个片元的纹理坐标从纹理图像中抽取纹素颜色

5.使用缓冲区对象向顶点传入多个顶点数据

function initBuffers(gl, shaderProgram) {
    //顶点坐标和颜色
    var vertices = new Float32Array([