（十五）WebGL中gl.texImage2D函数使用详解

news2025/1/20 13:04:21

在 WebGL 中，gl.texImage2D 是一个非常关键的函数，用于将图像数据上传到 WebGL 上下文中并作为纹理对象的一部分。它允许你将图像、视频、画布等作为纹理源。理解如何使用 gl.texImage2D 是在 WebGL 中处理纹理的核心之一。

文章目录

- - `gl.texImage2D` 的基本概念
  - 具体场景和代码示例
  - - 示例：使用 `gl.texImage2D` 加载和使用纹理
    - 1. HTML 文件
    - 2. JavaScript 部分：加载纹理并应用
  - 3. 代码解析
  - 4. 总结

`gl.texImage2D` 的基本概念

gl.texImage2D 函数的作用是将图像或像素数据上传到 WebGL 中作为纹理。纹理是 2D 图像，通常用于给 3D 模型的表面贴图，以实现更真实的渲染效果。

其语法如下：

gl.texImage2D(target, level, internalFormat, format, type, image);

target：纹理目标，通常使用 gl.TEXTURE_2D。
level：纹理的细节层级，通常设置为 0（基础纹理层），大于0的值会使用到纹理的多级渐远纹理（mipmap）功能。
internalFormat：纹理的内部格式，指定 WebGL 如何存储纹理数据，常见的值有 gl.RGB、gl.RGBA、gl.LUMINANCE 等。
format：纹理数据的格式，定义从图像源中提取的数据类型。通常使用 gl.RGB 或 gl.RGBA，这与图像的颜色深度相关。
type：指定数据类型，通常使用 gl.UNSIGNED_BYTE（8 位无符号整数）或其他格式，如 gl.FLOAT。
image：图像数据源，可以是一个 <img> 元素、<canvas> 元素、<video> 元素，或者是一个 ImageData 对象。

具体场景和代码示例

示例：使用 `gl.texImage2D` 加载和使用纹理

在这个例子中，我们将一个图片加载为纹理，并将其应用到一个立方体的表面上。这里会展示如何使用 gl.texImage2D 来将图片数据上传为纹理。

1. HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebGL - texImage2D 示例</title>
</head>
<body>
  <canvas id="webgl-canvas" width="500" height="500"></canvas>
  <script src="main.js"></script>
</body>
</html>

2. JavaScript 部分：加载纹理并应用

// 获取 WebGL 上下文
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');

// 立方体的顶点数据
const vertices = new Float32Array([
  -0.5, -0.5, -0.5, // Front face
   0.5, -0.5, -0.5,
   0.5,  0.5, -0.5,
  -0.5,  0.5, -0.5,
  -0.5, -0.5,  0.5, // Back face
   0.5, -0.5,  0.5,
   0.5,  0.5,  0.5,
  -0.5,  0.5,  0.5,
]);

// 立方体的纹理坐标数据 (u, v)
const texCoords = new Float32Array([
  0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Front face
  0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Back face
  0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Left face
  0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Right face
  0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Top face
  0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Bottom face
]);

// 立方体的索引
const indices = new Uint16Array([
  0, 1, 2, 0, 2, 3,
  4, 5, 6, 4, 6, 7,
  0, 1, 5, 0, 5, 4,
  1, 2, 6, 1, 6, 5,
  2, 3, 7, 2, 7, 6,
  3, 0, 4, 3, 4, 7
]);

// 创建缓冲区并绑定顶点数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 创建纹理坐标缓冲区并绑定
const texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);

// 创建索引缓冲区并绑定
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

// 编写着色器程序
const vertexShaderSource = `
  attribute vec4 a_position;
  attribute vec2 a_texCoord;
  varying vec2 v_texCoord;

  void main() {
    gl_Position = a_position;
    v_texCoord = a_texCoord;
  }
`;

const fragmentShaderSource = `
  precision mediump float;
  varying vec2 v_texCoord;
  uniform sampler2D u_texture;

  void main() {
    gl_FragColor = texture2D(u_texture, v_texCoord);
  }
`;

// 编译着色器并链接程序
function compileShader(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('Shader compilation failed', gl.getShaderInfoLog(shader));
  }
  return shader;
}

const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  console.error('Program linking failed', gl.getProgramInfoLog(shaderProgram));
}

gl.useProgram(shaderProgram);

// 获取属性和统一变量的位置
const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position');
const texCoordLocation = gl.getAttribLocation(shaderProgram, 'a_texCoord');
const textureLocation = gl.getUniformLocation(shaderProgram, 'u_texture');

// 绑定顶点数据
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

// 绑定纹理坐标数据
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(texCoordLocation);

// 创建纹理对象并绑定
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 使用 texImage2D 上传图片
const image = new Image();
image.onload = () => {
  // 图片加载完成后将图像上传为纹理
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
  gl.generateMipmap(gl.TEXTURE_2D);  // 生成mipmap纹理
  
  // 绘制
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.enable(gl.DEPTH_TEST);
  gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
};
image

.src = 'your-texture-image.jpg';  // 这里替换为你的纹理图像路径

3. 代码解析

gl.createTexture：创建一个纹理对象。
gl.bindTexture(gl.TEXTURE_2D, texture)：将创建的纹理对象绑定为当前活动的纹理。
gl.texImage2D：将图片上传为纹理，image.onload 确保在图片加载完成后才会上传到 WebGL 中。这里将图片的像素数据传给 WebGL。
- 第一个参数 gl.TEXTURE_2D：指定纹理目标为 2D 纹理。
- 第二个参数 0：纹理的细节层级，通常设置为 0 表示基础纹理。
- 第三个参数 gl.RGB：纹理的内部格式（存储格式）。
- 第四个参数 gl.RGB：纹理的像素格式（图像格式）。
- 第五个参数 gl.UNSIGNED_BYTE：指定数据类型，这里是 8 位无符号整数。
- 第六个参数 image：图片元素，作为纹理数据源。
gl.generateMipmap：生成多级渐远纹理，提升纹理渲染性能并防止远离摄像机时纹理过于模糊。
纹理渲染：在片元着色器中，texture2D 函数根据纹理坐标从上传的纹理中采样像素并进行渲染。