WebGL 2D 图像伸缩

图像伸缩和转换一样简单。我们只需对需要变换的点乘以我们想要的比例。如下是从以前的代码改变而来的。

<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() {
// Scale the positon
vec2 scaledPosition = a_position * u_scale;

// Rotate the position
vec2 rotatedPosition = vec2(
 scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
 scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);

// Add in the translation.
vec2 position = rotatedPosition + u_translation;

接着当我们需要绘图时添加必要的 JavaScript 代码来设置伸缩比例。

 ...
  var scaleLocation = gl.getUniformLocation(program, "u_scale");
  ...
  var scale = [1, 1];
  ...
  // Draw the scene.
  function drawScene() {
    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Set the translation.
    gl.uniform2fv(translationLocation, translation);

    // Set the rotation.
    gl.uniform2fv(rotationLocation, rotation);

    // Set the scale.
    gl.uniform2fv(scaleLocation, scale);

    // Draw the rectangle.
    gl.drawArrays(gl.TRIANGLES, 0, 18);
  }

现在我们就可以通过拖动滑动条对图像进行伸缩变换。

需要注意的一件事是如果设置伸缩比例为负值，那么几何图形就会发生翻转。

希望这相邻的三篇文章能够帮助你理解图形转换，旋转和伸缩。接下来我们将讲解拥有魔力的矩阵，它能够很容易的将这三种操作集合在一起，而且通常是更有用的形式。