47 | WebGL介绍（十一）：在3D绘制中使用纹理材质-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 47 | WebGL介绍（十一）：在3D绘制中使用纹理材质

在WebGL的广阔世界中，从基础的2D图形绘制到复杂的3D场景构建，每一步都充满了探索的乐趣与挑战。本章节，我们将深入探索WebGL在3D绘制中的一个重要方面——纹理材质（Texture Mapping）的应用。纹理材质不仅能够极大地增强3D模型的真实感与细节度，还能通过色彩、图案的灵活应用，为场景增添丰富的视觉效果。

#### 一、纹理材质基础

**1.1 纹理的概念**

在图形学中，纹理通常指的是附着在物体表面上的图像，这些图像可以是照片、图案或任何形式的二维图形。通过纹理映射（Texture Mapping）技术，我们可以将这些二维图像“贴”到三维模型的表面上，模拟出如木纹、石纹、金属光泽等复杂表面效果。

**1.2 纹理的作用**

- **增强真实感**：纹理能够显著提升3D模型的视觉真实度，使得虚拟世界中的物体看起来更加逼真。
- **增加细节**：在模型几何结构复杂度受限的情况下，通过纹理可以添加更多的细节信息，减少模型的多边形数量，提高渲染效率。
- **情感传达**：不同的纹理能够传达不同的情感和氛围，为游戏、动画、建筑设计等领域提供丰富的视觉语言。

#### 二、WebGL中的纹理处理

**2.1 WebGL纹理创建流程**

在WebGL中，使用纹理材质主要包括以下几个步骤：

1. **加载纹理图像**：通常使用HTML的`<img>`元素或`XMLHttpRequest`（对于非同源图像或需要更细致控制的场景）来加载纹理图像。
2. **创建WebGL纹理对象**：通过调用`gl.createTexture()`方法创建一个WebGL纹理对象。
3. **绑定纹理对象**：使用`gl.bindTexture()`方法将创建的纹理对象绑定到目标纹理类型（如`gl.TEXTURE_2D`）上。
4. **配置纹理参数**：如纹理的环绕模式（`gl.CLAMP_TO_EDGE`, `gl.REPEAT`等）和过滤模式（`gl.LINEAR`, `gl.NEAREST`等），这些参数影响纹理的显示效果。
5. **上传图像数据**：通过`gl.texImage2D()`方法将加载的图像数据上传到GPU，完成纹理的初始化。
6. **使用纹理**：在着色器程序中，通过uniform变量传递纹理采样器给片段着色器，并在片段着色器中使用纹理坐标（Texture Coordinates）对纹理进行采样。

**2.2 纹理坐标系统**

纹理坐标（Texture Coordinates），也称为UV坐标，是一个二维坐标系统，用于在纹理图像上定位像素点。WebGL中的纹理坐标范围通常从(0,0)到(1,1)，其中(0,0)对应于纹理图像的左下角，(1,1)对应于右上角。通过定义模型顶点的纹理坐标，WebGL可以在渲染时根据这些坐标从纹理图像中取出相应的像素值，并将其映射到模型表面上。

#### 三、纹理映射技术进阶

**3.1 多级纹理（Mipmapping）**

当3D模型距离观察者较远时，使用高分辨率的纹理图像不仅没有必要，还会浪费GPU资源。多级纹理技术通过预先生成纹理图像的一系列不同分辨率的版本（称为mipmap链），并在渲染时根据物体与观察者的距离选择合适的纹理级别，从而在保证视觉质量的同时提高渲染效率。

**3.2 纹理压缩**

为了进一步优化内存使用和传输效率，WebGL支持多种纹理压缩格式，如S3TC（DXT系列）、PVRTC、ETC等。这些压缩格式能够在不显著降低图像质量的前提下，大幅度减少纹理数据的大小。

**3.3 法线贴图与高度贴图**

法线贴图（Normal Maps）和高度贴图（Height Maps）是两种特殊的纹理技术，它们不直接改变模型的外观颜色，而是通过模拟表面的法线方向或高度信息来增强模型的细节和光影效果。法线贴图常用于增加表面的凹凸感，而高度贴图则常用于地形渲染等场景。

**3.4 立方体贴图（Cube Maps）**

立方体贴图是一种特殊的纹理类型，它由六张二维纹理图像（分别对应立方体的六个面）组成，用于模拟环境反射或天空盒等效果。在WebGL中，立方体贴图常用于实现反射贴图或天空盒背景，增强场景的真实感和沉浸感。

#### 四、实战案例：为3D模型添加纹理材质

假设我们有一个简单的3D立方体模型，现在想要为其添加一张木质纹理图像。以下是实现这一功能的基本步骤：

1. **加载纹理图像**：
   ```javascript
   const textureImage = new Image();
   textureImage.onload = function() {
       // 纹理加载完成后执行的操作
   };
   textureImage.src = 'wood_texture.jpg';
   ```

2. **创建并配置WebGL纹理对象**：
   ```javascript
   let texture;
   function initTexture() {
       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_MIPMAP_LINEAR);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 上传图像数据
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
       gl.generateMipmap(gl.TEXTURE_2D);
   }
   ```

3. **在着色器中使用纹理**：
   在顶点着色器中，定义并传递顶点的纹理坐标；在片段着色器中，通过纹理采样器对纹理进行采样，获取颜色值。

```glsl
   // 顶点着色器
   attribute vec2 aTexCoord;
   varying vec2 vTexCoord;

void main() {
       vTexCoord = aTexCoord;
       // 其他顶点变换代码
   }

// 片段着色器
   uniform sampler2D uSampler;
   varying vec2 vTexCoord;

void main() {
       gl_FragColor = texture2D(uSampler, vTexCoord);
   }
   ```

4. **绘制模型**：
   在渲染循环中，绑定纹理对象，设置相应的uniform变量，并调用`gl.drawArrays()`或`gl.drawElements()`绘制模型。

通过以上步骤，我们就成功地为3D立方体模型添加了木质纹理材质，使其看起来更加逼真且具有细节感。

#### 五、总结

在WebGL的3D绘制中，纹理材质是不可或缺的一部分。通过合理利用纹理映射技术，我们可以极大地提升3D场景的真实感和视觉效果。本章节从纹理的基本概念出发，详细介绍了WebGL中纹理的创建、配置、使用以及一些高级纹理技术的应用，并通过实战案例展示了如何为3D模型添加纹理材质。希望这些内容能够帮助读者更好地理解并掌握WebGL在3D绘制中的纹理处理技巧。

该分类下的相关小册推荐：

微信小程序与云开发(下)

微信小程序与云开发(中)

微信小程序全栈开发实战(下)

微信小程序底层框架实现原理

微信小程序全栈开发实战(中)

微信小程序与云开发(上)