WebGL中的纹理映射：为虚拟世界穿上华丽的外衣

妍思码匠

于 2024-09-18 13:23:14 发布

阅读量617

点赞数 8

分类专栏：妍思码匠的前端乐园文章标签： webgl 前端 javascript 3d

本文链接：https://blog.youkuaiyun.com/wjs0406/article/details/142330671

版权

妍思码匠的前端乐园专栏收录该内容

46 篇文章

订阅专栏

引言

想象一下，如果你可以给你的乐高模型贴上精美的贴纸，让它不再是一堆单调的彩色块，而是变成一艘逼真的宇宙飞船或者一座古老的城堡。这就是WebGL中的纹理映射所实现的效果——它不仅增加了视觉的真实感，还能极大地提升3D场景的艺术性和沉浸感。今天，我们就来深入探讨这一技巧，看看它是如何工作的，以及如何应用到实际项目中去。

纹理映射是什么？

纹理映射，简单来说，就是在3D模型表面添加图像的过程，类似于你在墙上挂一幅画。在WebGL中，我们可以加载一张图片作为纹理，然后将其“粘贴”到3D几何体的表面上，这样，原本单一颜色的模型就变得丰富多彩起来，就像你把一块素面的蛋糕装饰成一件艺术品一样。

如何在WebGL中加载和应用纹理？

首先，我们需要创建一个<img>标签来加载我们的纹理图片，然后将这个图片绑定到WebGL的纹理单元上，最后，在着色器中引用这个纹理，以完成映贴过程。

代码示例：

let texture;
let image = new Image();
image.src = 'path/to/your/texture.jpg';
image.onload = function() {
  texture = gl.createTexture();
  
  // 绑定纹理到默认的纹理单元（通常为0）
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // 上传纹理数据
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
                gl.RGBA, gl.UNSIGNED_BYTE, image);

  // 设置纹理参数，例如重复模式和过滤方式
  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);
};

接下来，需要修改顶点和片段着色器来支持纹理坐标和纹理采样。

GLSL中的着色器代码详解：

顶点着色器 (Vertex Shader)

// 定义顶点的位置属性，对应于3D模型的顶点坐标
attribute vec3 a_position;

// 定义纹理坐标的属性，用于指定每个顶点对应的纹理位置
attribute vec2 a_texCoord;

// 变量v_texCoord将在顶点着色器中被赋值，并传入片段着色器供后续处理
varying vec2 v_texCoord;

// 主函数，所有顶片着色器都必须有此函数
void main(void) {

  // 设置顶点的最终位置，这里的vec4表示齐次坐标
  gl_Position = vec4(a_position, 1.0);
  
  // 将纹理坐标传递给片段着色器
  v_texCoord = a_texCoord;
}

片段着色器 (Fragment Shader)：

// 精度说明符，确保浮点数运算精度适中
precision mediump float;

// 定义纹理采样器，用于读取外部纹理资源
uniform sampler2D u_texture;

// 接收来自顶点着色器的纹理坐标
varying vec2 v_texCoord;

// 主函数，所有片段着色器都必须有此函数
void main(void) {

  // 根据纹理坐标从u_texture中读取颜色
  gl_FragColor = texture2D(u_texture, v_texCoord);
}