45. HTML5 WebGL教程：从零开始学习纹理映射和着色器编程

在Web开发中，使用HTML5的WebGL技术可以实现复杂的3D图形和动画效果。而要实现这些效果，我们需要掌握一些重要的技术，包括纹理映射和着色器编程。本文将介绍如何从零开始学习这两个技术，并给出一个简单的示例代码。

首先，让我们来了解什么是纹理映射和着色器编程。

1. 纹理映射（Texture Mapping）

纹理映射是把一个图像或颜色贴到一个物体的表面的过程。在WebGL中，我们可以使用纹理对象（Texture Object）来实现这个功能。纹理对象是一个包含图像数据的对象，可以通过设置纹理参数来控制图像的显示方式。

2. 着色器编程（Shader Programming）

着色器是一种用于编写程序的脚本语言，它可以用来控制GPU的渲染过程。在WebGL中，我们可以使用着色器语言（GLSL）来编写着色器程序。着色器程序可以对顶点数据进行处理，生成最终的像素颜色输出。

现在，让我们来学习如何使用WebGL进行纹理映射和着色器编程。

第一步，我们需要获取一个canvas元素和一个WebGL上下文对象。可以在HTML文件中添加以下代码：

<canvas id="myCanvas" width="800" height="600"></canvas>
&ltscript&gt
  var canvas = document.getElementById("myCanvas");
  var gl = canvas.getContext("webgl");
&lt/script&gt

第二步，我们需要加载一张图片作为纹理。可以使用XMLHttpRequest对象来异步加载图片文件，并在加载完成后将其设置为纹理对象的属性值。以下是示例代码：

var image = new Image();
image.onload = function() {
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};
image.src = "texture.jpg";

第三步，我们可以使用纹理对象来对物体进行贴图处理。可以使用gl.texCoord函数来指定纹理坐标，然后使用gl.uniform1i函数来设置纹理单元。以下是示例代码：

var vertices = [..., ...]; // 顶点数据数组
var vertexBuffer = gl.createBuffer(); // 创建顶点缓冲对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // 绑定顶点缓冲对象到ARRAY_BUFFER目标上
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 向缓冲区写入数据（顶点坐标）
var texture = gl.createTexture(); // 创建纹理对象
gl.bindTexture(gl.TEXTURE_2D, texture); // 绑定纹理对象到TEXTURE_2D目标上
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); // 设置纹理图像源数据
// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); // 设置横向重复边缘模式为CLAMP_TO_EDGE
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // 设置纵向重复边缘模式为CLAMP_TO_EDGE
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // 设置缩小滤波方式为线性过滤模式；放大滤波方式为最临近过滤模式（NEAREST）
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); // 设置缩小滤波方式为线性过滤模式；放大滤波方式为最临近过滤模式（NEAREST）
// 绘制几何体（这里省略了绘制代码）