WebGL - 纹理映射

1、纹理映射

纹理映射：纹理映射就是将一张图像映射大盘几何体表面上去，此时这样图片就称为纹理贴图；

纹理映射的作用，就是根据纹理图像，为之前光栅化后的每一个片元涂上合适的颜色，组成纹理图像的像素又被称为 纹素，每一个纹素的颜色都使用 RGB或者 RGBA格式编码

纹素可以简单的理解为一个像素

2、纹理映射四步

• 1、准备纹理图像
• 2、配置集合图形纹理映射方式
• 3、加载和配置纹理图像
• 4、从纹理中抽出纹素赋给片元

3、纹理坐标

纹理坐标：就是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色，webgl系统中的纹理坐标是 二维的；

纹理坐标用来确定纹理图像那部分覆盖到集合图形上，纹理坐标值与图像自身的尺寸无关；

4、映射过程

纹理映射得过程需要顶点着色器和片元着色器二者得配合；

1、初始化着色器

如下着色器代码

顶点着色器

attribute vec4 a_Position;
attribute vec4 a_TexCoord;
varying vec2 v_TexCoord;
void main(){
   
    gl_Position = a_Position;
    v_TexCoord = a_TexCoord;
}

片元着色器

precision mediump float;
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main(){
   
    gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}

2、设置纹理坐标

将纹理坐标传入顶点着色器，与将其他顶点数据（如颜色），传入顶点着色器得方法是一样的；

// 创建顶点坐标和纹理坐标
var verticesTexCoords = new Float32Array([
    // 顶点坐标， 纹理坐标
    -0.5,  0.5,  0.0, 1.0,
    -0.5, -0.5,  0.0, 0.0,
     0.5,  0.5,  1.0, 1.0,
     0.5, -0.5,  1.0, 0.0
]);

3、配置和加载纹理

/* 四、创建纹理对象并调用纹理绘制方法 */
function initTextures(gl, n) {
   

    // 创建纹理对象
    var texture = gl.createTexture();
    if (!texture) {
   
        console.log('创建纹理对象失败！');
        return false;
    }

    // 获取 u_Sampler 的存储位置
    var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
    if (!u_Sampler) {
   
        console.log('获取 uniform 变量 u_Sampler 失败！');
        return false;
    }

    // 创建 Image 对象
    var image = new Image();
    image.onload = function (ev) {
   
        loadTexture(gl, n, texture, u_Sampler, image);
    };

    image.src = '../resources/sky.JPG';

    return true;

}

上面的代码负责配置和加载纹理，首先 创建纹理gl.createTexture()，然后通过 gl.getUniformLocation()从片元着色器中获取 uniform变量 u_Sampler(取样器)的存储位置，用来接收纹理图像;

可以通过 gl.deleteTexture()删除一个纹理对象，注意：如果视图删除一个已经被删除的纹理对象，不会报错也不会产生影响；

4、配置纹理参数

/* 五、设置纹理相关信息 */
function loadTexture(gl, n