WebGL编程指南 - 颜色与纹理续

设置纹理坐标（initVertexBuffers()）

从缓冲区到 attribute 变量的流程：

javascript 复制代码

// 顶点坐标
function initVertexBuffers(gl) {
  // 数据准备
  let 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,
  ])
  let n = 4
  // 创建缓冲区
  let vertexTexCoordBuffer = gl.createBuffer()
  if (!vertexTexCoordBuffer) {
    console.log('Failed to create vertexTexCoordBuffer')
    return -1
  }
  // 绑定缓冲区
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer)
  // 缓冲区存储数据
  gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW)

  // 顶点坐标相关配置
  let FSIZE = verticesTexCoords.BYTES_PER_ELEMENT
  ...

  // 纹理坐标相关配置
  let a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord')
  if (a_TexCoord < 0) {
    console.log('Failed to get the storage location of a_TexCoord')
    return -1
  }
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2)
  gl.enableVertexAttribArray(a_TexCoord)
  
  ...
}

配置和加载纹理（initTextures()）

javascript 复制代码

// 初始化纹理
function initTextures(gl, n) {
  // 创建纹理对象
  let texture = gl.createTexture()
  if (!texture) {
    console.log('Failed to create texture')
    return
  }
  // 获取u_Sampler（纹理图像）的存储位置
  let u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler')
  if (!u_Sampler) {
    console.log('Failed to get the storage loaction of u_Sampler')
    return
  }
  // 创建一个image对象
  let image = new Image()
  // 注册图像加载事件的响应函数
  image.onload = function () {
    loadTexture(gl, n, texture, u_Sampler, image)
  }
  // 浏览器加载图像
  image.src = '../image/sky.jpg'

  return true
}

创建对象，获取地址，配置

gl.TEXTURE0 到 gl_TEXTURE7 是管理纹理图像的 8 个纹理单元，每一个都与 gl.TEXTURE_2D 相关联，而后者就是绑定纹理时的纹理目标

删除一个纹理对象

获取着色器中u_Sampler变量的地址

uniform 变量 u_Sampler 常被称为取样器，在示例中，该变量被用来接收纹理图像，所以我们需要获取它的地址用于后续配置

javascript 复制代码

  // 获取u_Sampler（纹理图像）的存储位置
  let u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler')
  if (!u_Sampler) {
    console.log('Failed to get the storage loaction of u_Sampler')
    return
  }

参考：【《WebGL编程指南》读书笔记-颜色与纹理】_webgl warning: texsubimage: texture has not been i-CSDN博客