WebGL 理论基础 - 二维缩放

此文上接一系列文章，先从基础概念开始，上一篇是物体旋转。

缩放和平移一样简单。

让我们将位置乘以期望的缩放值，这是前例中的变化部分。

<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_resolution;
uniform vec2 u_translation;
uniform vec2 u_rotation;
uniform vec2 u_scale;
void main() {
  // 缩放
  vec2 scaledPosition = a_position * u_scale;
  // 旋转
  vec2 rotatedPosition = vec2(
     scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
     scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
  // 平移
  vec2 position = rotatedPosition + u_translation;

然后需要在 JavaScript 中绘制的地方设置缩放量。

...
  var scaleLocation = gl.getUniformLocation(program, "u_scale");
  ...
  var scale = [1, 1];
  ...
  // 绘制场景
  function drawScene() {
    ...
    // 设置平移
    gl.uniform2fv(translationLocation, translation);
    // 设置旋转
    gl.uniform2fv(rotationLocation, rotation);
    // 设置缩放
    gl.uniform2fv(scaleLocation, scale);
    // 绘制几何体
    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 18;  // 6 个三角形组成 'F', 每个三角形 3 个点
    gl.drawArrays(primitiveType, offset, count);
  }

现在我们有了缩放，拖动滑块试试。

CodePen 地址

值得一提的是，缩放值为负数的时候会翻转几何体。

希望之前的3篇文章能够帮助你理解平移，旋转和缩放。接下来我们将使用矩阵，这三种操作将包含在一个矩阵中，并表现为一种常用形式。