在WebGL中有一项很重要的技术 —— 纹理映射。所谓纹理映射，就是将一张图片映射到一个几何图形的表面上去（就像孩童时喜欢在胳膊、手背上贴贴纸一样） 将“贴纸”贴到一个矩形上之后，这个矩形表面看上去就像是一张图片，而此时，这张图片又可以称为纹理图像或纹理。

纹理映射的作用，就是根据纹理图像为之前光栅化后的每个片元涂上适当的颜色，组成纹理图像的像素又被称为纹素，每一个纹素的颜色都使用RGB或RGBA格式编码。如图：

图中的每个小方块都是一个纹素（图片来源）。

纹理映射

问：在WebGL中进行纹理映射，分为几步？

答：4步。

第一步 - 准备纹理图像

作为一名龙珠的爱好者，在此我就准备了一张悟空的图片（图片来源）：

第二步 - 为几何图形配置映射方式

指定映射方式就是确定“几何图形的某个片元”的颜色如何决定。我们利用图形的顶点坐标来确定屏幕上哪部分被纹理图像覆盖，使用纹理坐标来确定纹理图像的哪部分将覆盖到几何图形上。纹理坐标是一套新的坐标系统，下面将会对纹理坐标进行简单的介绍。

纹理坐标

纹理坐标是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色。WebGL系统中的纹理坐标系统是二维的，为了将纹理坐标和我们平时使用的坐标系统区分开来，WebGL中使用s和t命名纹理坐标系统（st坐标系统）：

如图，在纹理坐标系中，纹理图像的左下角为(0.0, 0.0)，右上角为(1.0, 1.0)。不要与WebGL的坐标系统搞混哦！

将纹理映射到几何图形

来看看这张图：

这张图是将纹理图像的顶点映射到WebGL坐标系统中的四个顶点处，有小伙伴可能会想到“将这个长方形的图片映射到一个正方形的区域，图片岂不是会变形”，要注意在WebGL坐标系统中我们使用的(0.5, 0.5, 0.0)这种坐标是一个相对的坐标值，如果我们的canvas是个正方形，那么上图中对应的映射区域就是个正方形，如果是长方形，同理映射区域就是个长方形。下面来看看我们的着色器如何编写：

// 顶点着色器
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;

void main() {
  gl_Position = a_Position;
  v_TexCoord = a_TexCoord;
}

顶点着色器中多声明了一个vec2变量，用来接收纹理图像的坐标，而在片元着色器会在稍后介绍。再修改一下initVertexBuffers方法：

function initVertexBuffers (gl) {
  const verticesTexCoords = new Float32Array([
    // 顶点坐标    纹理坐标
    -0.5, 0.5,    0.0, 1.0, 
    -0.5, -0.5,   0.0, 0.0,
    0.5, 0.5,     1.0, 1.0,
    0.5, -0.5,    1.0, 0.0,
  ]);
  const n = 4;
  
  // 创建缓冲区对象
  const vertexTexCoordBuffer = gl.createBuffer();
  
  // ...
  // 将顶点坐标写入缓冲区
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
  
  // ...
  // 将纹理坐标分配给a_TexCoord并开启它
  const a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
  
  // ...
  return n;
}

上面代码在之前的文章中写过很多遍，主要是添加了纹理坐标，就不再赘述。这样就在顶点着色器中接收到了纹理坐标，并光栅化后传给片元着色器；随后，片元着色器根据片元的纹理坐标，从纹理图像中抽取出纹素颜色，赋给当前片元，并设置顶点的纹理坐标（initVertexBuffers()）。

第三步 - 加载纹理图像

加载纹理图像要使用我们的Image对象来完成：

function initTexture (gl, n) {
  const texture = gl.createTexture(); // 创建纹理对象
  
  // 获取 u_Sampler 的存储位置（会在第四步中介绍）
  const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
  const image = new Image();
  
  // 注册图像加载事件响应函数
  image.onload = function () {
    loadTexture(gl, n, texture, u_Sampler, image);
  };
  image.src = '...';
  
  return true;
}

function loadTexture (gl, n, u_Sampler, image) {
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); //翻转纹理图像的 y 轴
  gl.activeTexture(gl.TEXTURE0); // 开启 0 号纹理单元
  gl.bindTexture(gl.TEXTURE_2D, texture); // 向 target 绑定纹理对象
  
  // 配置纹理参数
  gl.texParameteri(gl.TEXTRUE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  // 配置纹理图像
  gl.texImage2D(gl.TEXTURE_2D, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
  
  gl.uniform1i(u_Sampler, 0); // 将 0 号纹理传递给着色器
  
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // 绘制矩形
}

initTexture函数中应该比较好理解，下面将直接介绍loadTexture函数。首先在我们的WebGL系统中有8个纹理单元分别是gl.TEXTURE0到gl.TEXTURE7，这每一个纹理单元都与gl.TEXTURE_2D相关联，而后者就是绑定纹理时的纹理目标：

当调用gl.createTexture后，WebGL系统中就会存在一个纹理对象：

坐标轴翻转

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)函数是WebGL中的图像预处理函数，第一个参数是处理方式，第二个参数为处理方式的参数。

WebGL中的纹理坐标系统的t轴方向与PNG/BMP/JPG等格式图片的坐标系统的y轴方向是相反的。所以只有先将图像的y轴进行反转，才能将图像正确地映射到图形上：

激活纹理单元

WebGL通过一种叫做纹理单元的机制来同时使用多个纹理。每个纹理单元有一个单元编号来管理一张纹理图像，一些其他系统支持的个数更多。内置变量gl.TEXTURE0到gl.TEXTURE7各代表一个纹理单元。

在使用纹理单元之前，需要调用gl.activeTexture(gl.TEXTURE0)来激活它（下图中激活的是TEXTURE0）：

绑定纹理对象

接下来，我们还要告诉WebGL系统纹理对象使用的是哪种类型的纹理。在对纹理对象操作之前，我们需要绑定纹理对象，这里会发现这一系列的操作和缓冲区很相似：在对缓冲区对象进行操作之前，也需要绑定缓冲区对象。WebGL支持两种类型的纹理：gl.TEXTURE_2D和gl.TEXTURE_CUBE_MAP，分别为二维纹理和立方体纹理。当调用gl.bindTexture后：

这样我们就指定了纹理对象的类型（gl.TEXTURE_2D）。

配置纹理对象参数

配置纹理对象的参数的目标主要是设置：如何根据纹理坐标获取纹素颜色、以及按哪种方式重复填充纹理。对于gl.texParameteri()方法的参数含义如下图：

gl.TEXTURE_MAG_FILTER和gl.TEXTURE_MIN_FILTER的非金字塔纹理类型常量：

可以赋值给gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T的常量（可以想象一下以往在Windows系统中设置桌面壁纸时的平铺/拉伸等选项）：

将纹理图像分配给纹理对象

使用gl.texImage2D方法将纹理图像分配给纹理对象，同时该函数还允许告诉WebGL系统关于该图像的一些特性。此API参数比较复杂，详细了解请参考MDN texImage2D。

第四步 - 在FS中抽取纹素并赋给片元

将纹理单元传递给片元着色器

首先让我们来看一下片元着色器代码：

// 片元着色器
#ifdef GL_ES
	precision mediump float;
#endif
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;

void main() {
  gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}

我们在示例程序中使用了gl.TEXTURE_2D这种二维纹理，所以在片元着色器中定义的uniform变量的数据类型应该为sampler2D，除此之外还有samplerCube（这种数据类型对应gl.TEXTURE_CUBE_MAP）。

在initTexture函数中，我们获取到了uniform变量u_Sampler的存储地址，并将其作为参数传给loadTexture函数。我们必须通过指定纹理单元编号（即gl.TEXTUREn中的n）将纹理传给u_Sampler。因为我们绑定到了gl.TEXTURE0上，所以调用gl.uniform1i时，第二个参数设为0：

从顶点着色器向片元着色器传输纹理坐标

我们是通过attribute变量a_TexCoord接收顶点的纹理坐标，所以将数据赋值给varying变量v_TexCoord并将纹理坐标传入片元着色器是行得通的。

剩下的工作就是，根据片元的纹理坐标，从纹理图像上抽取出纹素的颜色，然后涂到当前的片元上。

在片元着色器中获取纹理像素颜色

gl_FragColor = texture2D(u_Sampler, v_TexCoord);

我们使用GLSL ES内置函数texture2D()来抽取纹素颜色，该函数使用起来十分方便，只需要传入两个参数——纹理单元编号和纹理坐标，就可以获取到纹理上的像素颜色。

纹理放大和缩小方法的参数将决定WebGL系统将以何种方式内插出片元。我们将texture2D()函数的返回值赋给了gl_FragColor变量，然后片元着色器就将当前片元涂成这个颜色。最后，纹理图像就被映射到了图形上，并最终被画了出来。

下面让我们打开页面看一下效果（因为跨域原因，大家需在本地启用http服务器）：

怎么漆黑一片呢？

别急，先来仔细看一下console信息：

会发现warning中有说到我们的纹理图像无法渲染，可能因为图片尺寸不是2的整数次方，那么让我们把图片裁剪成256 x 256大小的再试一下呢？

完美 我们目前使用的都是WebGL1 .0的特性，在WebGL 2.0中支持了非2的整数次方大小的纹理图像！

我们已经成功展示出一张图片了，但是在WebGL系统中有多个纹理单元，所以我们可以展示多张图片，比如我给悟空图片上再加一张图片：

这里就不详细描述了，给一点提示：片元着色器中texture2D内置函数返回的是vec4类型的color，而对于两张图片的重叠部分：

gl_FragColor = color0 * color1;

可以通过以上方式计算得出！

结束语

纹理部分内容较多，大家可以慢慢学习一下，再次总结一下主要分为四步：

1. 准备纹理图像；
2. 为几何图形配置映射方式；
3. 加载纹理图像：
4. 翻转坐标轴（gl.pixelStorei）；
5. 激活纹理单元（gl.activeTexture）；
6. 绑定纹理对象（gl.bindTexture）；
7. 配置纹理参数（gl.texParameteri）；
8. 配置纹理图像（gl.texImage2D）；
9. 将纹理单元传给着色器。
10. 在FS中抽取纹素并赋给片元（texture2D）。

有趣的纹理映射介绍到这里啦，后续会出更多好玩并且有用的文章分享给大家，欢迎关注公众号：Refactor，感谢阅读！

前言

首先，WebGL并不是一门语言，它是一个标准，它是在OpenGL ES的基础上所建立的一套适用于浏览器的图形学标准；而OpenGL ES则是OpenGL的一个特殊版本（套娃警告 ），ES版本被广泛的应用于手机、家用游戏机等设备。想了解更多关于WebGL标准内容的小伙伴可以进入Khronos Group的网站自行浏览。

WebGL的开发与我们普通的前端开发并没有什么太大差异，一个浏览器的网页一般是由：HTML、 JavaScript、渲染引擎等部分组成，如果我们要开发WebGL的话，还需要什么呢？让我们来思考一下，我们在高中学习几何的时候老师讲过“点动成线，线动成面，面动成体”，那我们就以最基础的点为例，首先点有什么属性么？在屏幕中的位置、点的颜色、点的大小，我们如何定义一个点的这些属性呢？这就要引入GLSL ES(OpenGL Shader Language ES)（后称着色器）了，着色器的写法与C语言语法有些相似，从名字也能看出WebGL与OpenGL ES是有“血缘关系”的！其次，我们还需要的就是浏览器厂商基于WebGL标准提供的API。

WebGL并不像OpenGL一样有繁琐的环境配置的流程，也没有对系统的要求，只要有一个支持WebGL的浏览器即可！

本次我们使用字符串的形式编写着色器，暂时不新建单独的着色器文件​​

给这个“点”一点自由的空间

为了使用浏览器提供的WebGL接口，我们需要使用<canvas>来获取WebGL上下文：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Point</title>
</head>
<body onload="main()" style="padding: 0; margin: 0;">
  <canvas id="webgl" width="600" height="400">
    您使用的浏览器不支持 WebGL！
  </canvas>
  <script>
    function main() {
      // get canvas element
      const canvas = document.getElementById("webgl");
      const gl = canvas.getContext('webgl');
    }
  </script>
</body>
</html>

gl就是我们所获取到的WebGL渲染的上下文 让我们给画布填充个背景色吧：

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
  <script>
    function main() {
      // ...
      const gl = canvas.getContext('webgl');
      
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    }
  </script>
  <!-- ... -->
</html>

这样我们要绘制点的画布就拥有了浩瀚宇宙一般深邃的黑色:) 喝点庆祝一下

解释一下gl.clearColor方法是设置清除画布的背景色，形式是RGBA；gl.clear则是调用清除画布的方法，可传递的参数gl.COLOR_BUFFER_BIT是个什么呢 其实该方法继承自OpenGL，OpenGL是基于多缓冲区模型的，清空绘图区域实际上是在清空颜色缓冲区，传递参数gl.COLOR_BUFFER_BIT是在告诉WebGL清空颜色缓冲区；除此之外还有深度缓冲区以及模板缓冲区，可查看此了解。

让距离近一“点”

下面我们开始绘制点 在前面我们分析道一个点有位置、颜色及大小三个属性，下面我们将编写着色器给深邃的画布增添一点色彩

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
  <script>
    function main() {
      // ...
      const VertexShader = `
        void main() {
          gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
          gl_PointSize = 10.0;
        }
      `;
      const FragmentShader = `
        void main() {
          gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
        }
      `;
    }
  </script>
  <!-- ... -->
</html>

上面我们定义了VertexShader和FragmentShader，在WebGL中有两种着色器分别是：顶点着色器和片元着色器：

• 顶点着色器：用来描述顶点的特性的程序，比如位置、大小等。顶点是指二维或三维空间中的一个点，比如二维图形或三维图形的顶点或交点；
• 片元着色器：也称像素着色器，进行逐片的处理过程比如光照。片元可以理解为像素。

同时，每个着色器都有一个main()方法，并且该方法不能指定参数，每行语句结束之后必须有分号！！！ gl_Position、gl_PointSize和gl_FragColor三个变量则是着色器内置的变量，其中gl_PointSize可以不赋值，默认值为1.0。各位注意到，上面赋值语句中我们给的值是0.0而不是0，这是因为这些内置变量是有其变量类型的：

问：明明一个点的坐标只有(x, y, z)，为什么要传4个值呢？
答：这里使用的是齐次坐标的形式，了解齐次坐标可查看我上篇文章《客官，进来看看图形的几何变换？》。
问：使用上面定义的顶点着色器和片元着色器分几步呢？
答：分三步！第一步，创建着色器；第二步，创建着色器程序；第三步，在WebGL上下文中使用着色器程序。

1️⃣创建着色器

为了方便使用我把创建着色器的步骤抽取了一个createShader()方法：

function createShader (gl, type, source) {
  const shader = gl.createShader(type);
  if (shader == null) {
    console.warn('无法创建着色器');
    return null;
  }
​
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
​
  const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!compiled) {
    console.log('编译着色器失败： ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
​
  return shader;
}

gl.shaderSource是将gl.createShader创建的着色器的source设置为我们定义的VertextShader或FragmentShader，剩下的就不解释了，函数名都很表意:)

2️⃣创建着色器程序

也为了更简洁，创建着色器程序的步骤也抽成了createProgram()方法：

function createProgram (gl, vshader, fshader) {
  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
  if (!vertexShader || !fragmentShader) {
    return null;
  }
​
  const program = gl.createProgram();
  if (!program) {
    return null;
  }
​
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
​
  gl.linkProgram(program);
​
  const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    console.warn('Link 着色器程序失败： ' + gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
  }
  return program;
}

gl.attachShader是将创建好的着色器attach到我们着色器程序上，然后调用gl.linkProgram方法将program整合起来。

3️⃣在上下文中使用着色器程序

function initShaders(gl, vshader, fshader) {
  const program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.warn('创建着色器程序失败！');
    return false;
  }
​
  gl.useProgram(program);
  gl.program = program;
​
  return true;
}

这里就很简单啦，就不做过多介绍了！然后在main()中调用此方法初始化着色器：

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
  <script>
    function main() {
      const canvas = document.getElementById('webgl');
      const gl = canvas.getContext('webgl');
​
      if (!initShaders(gl, VertexShader, FragmentShader)) {
        return alert('初始化着色器失败');
      }
​
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.POINTS, 0, 1);
    }
    // createShader
    // createProgram
    // initShaders
  </script>
  <!-- ... -->
</html>

gl.drawArrays的第一个参数是指定绘制方式，第二个参数是从哪个顶点开始绘制，第三个参数是指定绘制要用到多少个顶点。这样我们就能在黑色的画布上的正中心看到一个蓝色的点：

但是，小朋友你是否有很多的问号？

明明定义的点的位置在(0, 0, 0)，为什么点会出现在<canvas>的正中央呢？WebGL相对于<canvas>的位置如下图：

中间的是WebGL相对于<canvas>的坐标，而canvas的坐标则是相对于屏幕的！WebGL相对于<canvas>的坐标并不是绝对的像素值，而是相对的[-1.0, 1.0]。 举个例子：我们展示的点在canvas的正中央，如果我们把点的坐标设置为(1.0, 0.0, 0.0, 1.0)，那么点就会出现在canvas的最右侧，同理设置为(-1.0, 1.0, 0.0, 1.0)，点则展示在canvas的左上角:P

渲染这个点经历了什么？

就这么结束了？

怎么可能就这么结束！让我们给绘制点的程序升级一下，现在我们的位置、大小都是在着色器中定义好的。当然WebGL也为我们提供了方法让我们可以从外部传入相应参数值。让我们对着色器改造一下：

const VertexShader = `
  attribute vec4 a_Position;
  void main() {
    gl_Position = a_Position;
    gl_PointSize = 10.0;
  }
`;

attribute是一种GLSL SE变量，被用来从外部向顶点着色器内传数据，只有顶点着色器可以使用；同时还有一种变量类型uniform，uniform变量传输的是对于所有顶点都相同（或与顶点无关）的数据。上面是着色器代码中，我们将从外部获取到的a_Position和a_PointSize分别赋值给gl_Position和gl_PointSize。怎么通过JavaScript向着色器的attribute变量传值呢？

function main () {
  // ...
  if (!initShaders(gl, VertexShader, FragmentShader)) {
    return alert('初始化着色器失败');
  }
​
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttrib3f(a_Position, 1.0, 0.0, 0.0);
  // ...
}

使用vertextAttrib3f方法就可以将使用getAttribLocation获取到的attribute变量赋值，vertexAttrib3f方法会将齐次坐标的最后一个值默认赋值为1.0，当然使用vertexAttrib4f也是可以的:)

再加点功能

当我在canvas上点击的时候，就在点击canvas的地方展示一个点，这就需要我们给canvas绑定方法了：

canvas.onmousedown = function (e) {
  click(e, gl, canvas, a_Position);
};

在此就不给详细代码了，canvas绑定事件方式如上，并简单说一下思路：当点击之后获取鼠标在canvas点击的坐标值；然后将坐标转换为WebGL相对于canvas的[-1.0, 1.0]形式的坐标；然后清空画布，在重新绘制点。坐标转换的代码如下：

let x = e.clientX;
let y = e.clientY;
const rect = e.target.getBoundingClientRect();
​
x = (x - rect.left - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - y + rect.top) / (canvas.height / 2);

比如还能再给每个点设置不同的颜色，提示：使用 uniform 变量。

结束语

使用原生WebGL绘制一个“简单的点”就讲到这里啦:)我自己也在不断的学习中，后续会出更多关于WebGL的文章。