在 WebGL 中解锁纹理映射：入门指南

前端

2024-02-23 23:29:15

使用纹理映射，您可以为模型增添更多细节，让它们栩栩如生。本文将引导您逐步了解 WebGL 中纹理映射的基础知识，让您掌握将其融入自己项目的技巧。

揭开纹理映射的神秘面纱

纹理映射是一种技术，可以将图像或纹理应用于 3D 模型，为其添加逼真的细节和颜色。它是 WebGL 中一种强大的工具，可以显著提升您的场景的视觉吸引力。

纹理：数字画布

纹理本质上是图像，可以是照片、图案或任何其他类型的图像。它们被映射到模型表面，为其赋予颜色、纹理和细节。

映射：连接纹理与模型

映射过程将纹理与模型表面配对。通过纹理坐标，每个模型顶点都与纹理上的特定点相关联。然后，在渲染期间，这些坐标用于确定每个片段的颜色。

WebGL 纹理映射之旅

要开始使用 WebGL 纹理映射，您需要遵循以下步骤：

加载纹理： 从文件中加载纹理图像或使用 WebGL 纹理对象创建新纹理。
绑定纹理： 将纹理绑定到 WebGL 纹理单元。
设置纹理参数： 指定纹理的环绕模式、过滤方式等属性。
创建着色器： 编写片段着色器和顶点着色器，用于应用纹理和变换模型。
渲染场景： 使用 WebGL 绘制调用来渲染场景，纹理将应用于模型。

实践中的纹理映射

让我们通过一个示例来应用纹理映射：

// 创建纹理
const texture = gl.createTexture();

// 绑定纹理
gl.bindTexture(gl.TEXTURE_2D, texture);

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

// 加载纹理图像
const image = new Image();
image.onload = function() {
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};
image.src = "texture.png";

// 使用纹理
gl.useProgram(program);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(glGetUniformLocation(program, "uTexture"), 0);

// 渲染场景
gl.drawArrays(gl.TRIANGLES, 0, 3);