z轴与纹理映射：赋予3D模型逼真的生命力

# 1. 3D图形渲染基础**

3D图形渲染是将3D模型转换为2D图像的过程，它涉及到一系列复杂的计算和操作。本章将介绍3D图形渲染的基础知识，包括顶点着色、片段着色和光栅化等关键概念。

顶点着色负责处理3D模型的顶点数据，例如位置、法线和纹理坐标。片段着色则处理每个像素的颜色和深度值，它可以应用纹理、光照和阴影等效果。光栅化是将3D模型投影到2D屏幕的过程，它将多边形分解为像素，并计算每个像素的深度和颜色。

# 2. 纹理映射理论

### 2.1 纹理映射的概念和原理

纹理映射是一种计算机图形技术，用于将二维图像（称为纹理）应用到三维模型的表面，以创建更逼真的视觉效果。它通过将纹理坐标与模型顶点相关联来实现，从而将纹理图像映射到模型表面。

**纹理坐标**

纹理坐标是一组数字，用于指定纹理图像中某个像素的位置。通常使用 (u, v) 坐标系，其中 u 表示水平坐标，v 表示垂直坐标。纹理坐标的范围为 [0, 1]，其中 (0, 0) 表示纹理图像的左下角，(1, 1) 表示右上角。

**纹理过滤**

纹理过滤是一种技术，用于平滑纹理图像中的像素，以防止出现锯齿状边缘。有两种主要的纹理过滤方法：

* **最近邻过滤：**选择纹理图像中与纹理坐标最接近的像素，而不管其与纹理坐标的距离。
* **双线性过滤：**对纹理坐标周围的 4 个像素进行加权平均，以产生更平滑的结果。

### 2.2 纹理坐标和纹理过滤

**纹理坐标生成**

纹理坐标可以通过多种方法生成，包括：

* **平面投影：**将纹理图像投影到模型表面上，并根据模型顶点的 UV 坐标生成纹理坐标。
* **球形投影：**将纹理图像投影到一个球体上，并根据模型顶点的经度和纬度生成纹理坐标。
* **立方体投影：**将纹理图像投影到一个立方体上，并根据模型顶点的法线向量生成纹理坐标。

**纹理过滤参数**

纹理过滤可以通过以下参数进行配置：

* **minFilter：**指定当纹理图像缩小到小于其原始尺寸时使用的过滤方法。
* **magFilter：**指定当纹理图像放大到大于其原始尺寸时使用的过滤方法。
* **wrapS/wrapT：**指定当纹理坐标超出 [0, 1] 范围时如何处理纹理图像。

**代码示例**

以下代码示例演示了如何使用 WebGL 设置纹理坐标和纹理过滤：

// 创建纹理坐标缓冲区
const uvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float