1、创建纹理对象

纹理对象主要用于存储纹理图像数据

const texture = gl.createTexture():

可以通过gldeleteTexture(textrue)来删除纹理对象

2、进行Y轴翻转

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);

3、开启(激活)纹理单元

gl.activeTexture(gl.TEXTUREO);

Webgl是通过纹理单元来管理纹理对象，每个纹理单元管理一张纹理图像。

4、绑定纹理对象

gl.bindTexture(type, texture)

type参数有以下两种

gl.TEXTURE 2D:二维纹理
gl.TEXTURE_CUBE_MAP:立方体纹理

texture: 纹理对象

5、处理放大缩横向纵向的逻辑

gl.texParamteri(type, pname, param)

type参数同上

pname:纹理参数有四个选项

gl.TEXTURE_MAG_FILTER 放大
gl.TEXTURE_MIN_FILTER 缩小
gl.TEXTURE_WRAP_S 横向(水平填充)
gl.TEXTURE_WRAP_T纵向( 垂直填充)

param：

赋值给gl.TEXTURE_MAG_FILTER和gI.TEXTURE_MIN_FILTER

glNEAREST使用像素颜色值
gl.LINEAR使用四周的加权平均值

赋值给gl.TEXTURE_WAP_S和gl.TEXTURE_WRAP_T

glREPEAT平铺重复
gl.MIRRORED_REPEAT 镜像对称
gl.CLAMP_TO_EDGE 边缘延伸

6、配置纹理图像

gl.texImage2D(type, level,internalformat, format,dataType, image )

type 同上

level为0即可

internalformat(图像的内部格式)：

gl.RGB
gl.RGBA
gl.ALPHA
gl.LUMINANCE 使用物体表面的红绿蓝分量的加权平均值来计算
gI.LUMINANCE_ALPHA

format(纹理的内部格式)，必须和internalformat 相同

dataType(纹理数据的数据类型)

gl.UNSIGNED_BYTE
gl.UNSIGNED_SHORT_5_6_5
gl.UNSIGNED_SHORT_4_4_4_4
gl.UNSIGNED_SHORT_5_5_5_1

image 图片对象

代码

let webglDiv = document.getElementById('practice');
  let webgl = webglDiv.getContext('webgl');

  /*着色器*/
  // 顶点着色器
  const VERTEX_SHADER_SOURCE = `
        //  attribute 只能用于传递定点数据
       attribute vec4 aPosition ;
       attribute vec4 aTex;
        varying vec2 vTex;
        void main(){
          // 要绘制的点的坐标
          gl_Position = aPosition;
          vTex = vec2(aTex.x,aTex.y);
          // 点的大小
          gl_PointSize = 20.0;
        }
  `;
  // 片元着色器
  const FRAGMENT_SHADER_SOURCE = `
      precision lowp float;
      uniform sampler2D uSampler;
      varying vec2 vTex;
        void main(){
          //gl_FragColor = vec4(1.0,0.0,0.0,1.0);
          gl_FragColor = texture2D(uSampler,vTex);
        }
  `;
  const program =  initShader(webgl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);



  // 获取变量
  const aPosition = webgl.getAttribLocation(program,'aPosition');
  const aTex = webgl.getAttribLocation(program,'aTex');
  const uSampler = webgl.getUniformLocation(program,'uSampler');
  // 变量赋值
  const points = new Float32Array([
    -0.5,-0.5,0.0,0.0,
    0.5,-0.5,1.0,0.0,
    -0.5,0.5,0.0,1.0,
    0.5,0.5,1.0,1.0
   ]);
  const BYTES = points.BYTES_PER_ELEMENT;
  const buffer = webgl.createBuffer();
  webgl.bindBuffer(webgl.ARRAY_BUFFER,buffer);
  webgl.bufferData(webgl.ARRAY_BUFFER,points,webgl.STATIC_DRAW);

  webgl.vertexAttribPointer(aPosition,2,webgl.FLOAT, false, BYTES*4, 0);
  webgl.enableVertexAttribArray(aPosition);

  webgl.vertexAttribPointer(aTex,2,webgl.FLOAT, false, BYTES*4, BYTES*2);
  webgl.enableVertexAttribArray(aTex);
  const img = new Image();
  img.onload = function (){
    // 创建纹理对象
    const texture = webgl.createTexture();
    //翻转 图片 Y轴
    webgl.pixelStorei(webgl.UNPACK_FLIP_Y_WEBGL,1);
    //开启一个纹理单元
    webgl.activeTexture(webgl.TEXTURE0);
    //绑定纹理对象
    webgl.bindTexture(webgl.TEXTURE_2D,texture);
    //处理放大缩小的逻辑
    webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_MAG_FILTER,webgl.LINEAR);
    webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_MIN_FILTER,webgl.LINEAR);
    //横向、纵向 平铺的方式
    webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_WRAP_S,webgl.CLAMP_TO_EDGE);
    webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_WRAP_T,webgl.CLAMP_TO_EDGE);
    //配置文理的图像
    webgl.texImage2D(webgl.TEXTURE_2D,0,webgl.RGB,webgl.RGB,webgl.UNSIGNED_BYTE,img);
    // 0代表当前使用的纹理单元是哪一个
    webgl.uniform1i(uSampler,0);
    // 执行绘制
    // drawArrays(绘制的图形，从哪个点开始，使用几个顶点)
    webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4);
  };
  img.src = require('@/assets/cesium/b3dm.png');
}

八、给图形添加背景图