在网格上投影图像

// 假设我们有一个简单的平面网格和一个纹理图像
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');

// 初始化着色器程序、缓冲区等
// ...

// 加载纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
const level = 0;
const internalFormat = gl.RGBA;
const width = 1;
const height = 1;
const border = 0;
const srcFormat = gl.RGBA;
const srcType = gl.UNSIGNED_BYTE;
const pixel = new Uint8Array([0, 0, 255, 255]); // 蓝色
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// 在渲染循环中使用纹理
function render() {
  // 清除画布
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // 使用着色器程序
  gl.useProgram(shaderProgram);

  // 绑定顶点缓冲区和纹理
  // ...

  // 绘制网格
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, numVertices);

  requestAnimationFrame(render);
}

render();