此文上接WebGL系列文章，第一个是基础概念， 这篇文章讲纹理映射的透视纠正，要理解它你可能需要先看看透视投影 和纹理，你也需要知道可变量以及它的用处，但是我还会简短的介绍一下。

在"工作原理"中我们讲过了可变量的工作原理， 顶点着色器可以声明可变量并给它赋值，一旦顶点着色器被引用 3 次就会画一个三角形。 绘制这个三角形的每个像素都会调用片段着色器获得像素颜色， 在三个顶点之间的点会得到插值之后的可变量。

回到我们的第一篇文章，在裁剪空间中绘制一个三角形， 没有数学运算，只是传入裁剪空间坐标到一个简单的顶点着色器，像这样

  // 属性从缓冲中获取数据
  attribute vec4 a_position;

  // 所有的着色器都有一个 main 函数
  void main() {

    // gl_Position 是着色器需要设置的一个特殊的变量
    gl_Position = a_position;
  }

还有一个简单的片段着色器提供固定的颜色

  // 片段着色器没有默认的精度，
  // 中等精度是个不错的默认值
  precision mediump float;

  void main() {
    // gl_FragColor 是片段着色器需要设置的一个特殊变量
    gl_FragColor = vec4(1, 0, 0.5, 1); // 返回红紫色
  }

让我们在裁剪空间绘制两个矩形，为每个顶点传递X, Y, Z, 和 W。

var positions = [
  -.8, -.8, 0, 1,  // 第一个矩形的第一个三角形
   .8, -.8, 0, 1,
  -.8, -.2, 0, 1,
  -.8, -.2, 0, 1,  // 第一个矩形的第二个三角形
   .8, -.8, 0, 1,
   .8, -.2, 0, 1,

  -.8,  .2, 0, 1,  // 第二个矩形的第一个三角形
   .8,  .2, 0, 1,
  -.8,  .8, 0, 1,
  -.8,  .8, 0, 1,  // 第二个矩形的第二个三角形
   .8,  .2, 0, 1,
   .8,  .8, 0, 1,
];

这是结果

再添加一个浮点型可变量，并把它从顶点着色器直接传递到片段着色器

  attribute vec4 a_position;
+  attribute float a_brightness;

+  varying float v_brightness;

  void main() {
    gl_Position = a_position;

+    // 直接传递亮度到片段着色器
+    v_brightness = a_brightness;
  }

在片段着色器中使用可变量设置颜色

  precision mediump float;

+  // 顶点着色器的值插值后传入这里
+  varying float v_brightness;  

  void main() {
*    gl_FragColor = vec4(v_brightness, 0, 0, 1);  // 红色
  }

我们需要给可变量提供数据，创建一个缓冲放入一些数据，每个顶点一个值， 我们将设置左边亮度为 0，右边亮度为 1。

  // 创建缓冲并放入 12 个亮度值
  var brightnessBuffer = gl.createBuffer();

  // 绑定到 ARRAY_BUFFER
  gl.bindBuffer(gl.ARRAY_BUFFER, brightnessBuffer);

  var brightness = [
    0,  // 第一个矩形的第一个三角形
    1, 
    0, 
    0,  // 第一个矩形的第二个三角形
    1, 
    1, 

    0,  // 第二个矩形的第一个三角形
    1, 
    0, 
    0,  // 第二个矩形的第二个三角形
    1, 
    1, 
  ];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(brightness), gl.STATIC_DRAW);

还需要在初始化阶段找到 a_brightness 的位置

  // 找到顶点数据的输入位置
  var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+  var brightnessAttributeLocation = gl.getAttribLocation(program, "a_brightness");

然后在渲染阶段设置属性

  // 启用属性
  gl.enableVertexAttribArray(brightnessAttributeLocation);

  // 绑定位置缓冲
  gl.bindBuffer(gl.ARRAY_BUFFER, brightnessBuffer);

  // 告诉属性如何从缓冲中读取数据
  var size = 1;          // 每次迭代读取一个单位数据
  var type = gl.FLOAT;   // 数据类型是 32 位浮点型
  var normalize = false; // 不用单位化
  var stride = 0;        // 每次迭代需要移动的距离
  var offset = 0;        // 从缓冲的起始处开始
  gl.vertexAttribPointer(
      brightnessAttributeLocation, size, type, normalize, stride, offset);

现在渲染后得到会得到两个矩形，左边 brightness 是 0 右边是 1， 中间的部分是插值（或可变量）。

在透视投影的文章中我们知道WebGL会将放入 gl_Position 的值除以gl_Position.w。

在上方的顶点中我们提供的 W 值为 1，但是我们知道WebGL会除以 W， 所以做如下修改应该结果不变。

  var mult = 20;
  var positions = [
      -.8,  .8, 0, 1,  // 第一个矩形的第一个三角形
       .8,  .8, 0, 1,
      -.8,  .2, 0, 1,
      -.8,  .2, 0, 1,  // 第一个矩形的第二个三角形
       .8,  .8, 0, 1,
       .8,  .2, 0, 1,

      -.8       , -.2       , 0,    1,  // 第二个矩形的第一个三角形
       .8 * mult, -.2 * mult, 0, mult,
      -.8       , -.8       , 0,    1,
      -.8       , -.8       , 0,    1,  // 第二个矩形的第二个三角形
       .8 * mult, -.2 * mult, 0, mult,
       .8 * mult, -.8 * mult, 0, mult,
  ];

如上所示我们将第二个矩形右边的点的 X 和 Y 都乘以 mult， 同时设置 W 为 mult。由于WebGL会除以 W 所以我们应该得到相同的结果对么？

这是结果

注意两个矩形和上一个例子位置相同，事实是 X * MULT / MULT(W) 还是 X， Y 也一样，但颜色却不同，为什么？

事实是WebGL使用 W 实现纹理映射或者可变量插值的透视投影。

如果将片段着色器改成这样就更容以看出效果

gl_FragColor = vec4(fract(v_brightness * 10.), 0, 0, 1);  // 红色

将 v_brightness 乘以 10 就会是值的范围为 0 到 10，fract 会保留小数部分所以结果还是 0 到 1之间， 但是总共是 10 次 0 到 1 了。

现在应该更容易看出透视效果。

线性插值应该是这样的公式

 result = (1 - t) * a + t * b

t 的范围是 0 到 1，表示 a 到 b 之间的位置，0 表示在 a 点，1 表示在 b 点。

可变量经过 WebGL 的插值时使用这个公式

 result = (1 - t) * a / aW + t * b / bW
          -----------------------------
             (1 - t) / aW + t / bW

aW 表示 a 点的 W 值，也就是 gl_Position.w 的值，而不一定等于缓冲中的值， 同理 bW 是设置在 b 点的 gl_Position.w。

为什么这个很重要？这有一个简单的纹理，使用纹理文章的例子， 并调整了 UV，每个面使用整张纹理，是一个 4×4 像素的纹理。

现在将例子中的顶点着色器做一些修改，手工除以 W，只增加了一行代码

attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
  // 将位置和矩阵相乘
  gl_Position = u_matrix * a_position;

+  // 手工除以 W
+  gl_Position /= gl_Position.w;

  // 将纹理坐标传到片段着色器
  v_texcoord = a_texcoord;
}

除以 W 意味值 gl_Position.w 始终为 1，X, Y, 和 Z 不会有什么影响，因为WebGL也会默认做除法，这是结果。

我们还是得到了一个立方体，但是纹理变得扭曲了，这是因为没有传入 W WebGL就不能正确的实现纹理的透视纠正，或者更准确地说， WebGL就不能正确的对可变量的插值实现透视。

如果你还记得的话 W 就是透视矩阵中的 Z， 当 W 始终为 1 时WebGL做的就是一个简单的线性插值， 事实上如果你拿着上述的等式

 result = (1 - t) * a / aW + t * b / bW
          -----------------------------
             (1 - t) / aW + t / bW

设置所有的 W 为 1 就会得到

 result = (1 - t) * a / 1 + t * b / 1
          ---------------------------
             (1 - t) / 1 + t / 1

除以 1 等于什么也没做，所以简化成这样

 result = (1 - t) * a + t * b
          -------------------
             (1 - t) + t

(1 - t) + t = 1，继续简化

 result = (1 - t) * a + t * b

就和上方提到的线性插值一样了。

现在就清楚为什么WebGL要使用 4x4 的矩阵和包含 X, Y, Z, 和 W 四个值的向量了吧。 X 和 Y 除以 W 得到裁剪空间坐标，Z 除以 W 也得到裁剪空间的 Z 坐标， W 同时还为纹理映射的透视纠正提供了帮助。