WebGL 2D 圖像伸縮

圖像伸縮和轉(zhuǎn)換一樣簡單。我們只需對需要變換的點乘以我們想要的比例。如下是從以前的代碼改變而來的。

<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;

接著當(dāng)我們需要繪圖時添加必要的 JavaScript 代碼來設(shè)置伸縮比例。

 ...
  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);
  }

現(xiàn)在我們就可以通過拖動滑動條對圖像進行伸縮變換。

需要注意的一件事是如果設(shè)置伸縮比例為負(fù)值，那么幾何圖形就會發(fā)生翻轉(zhuǎn)。

希望這相鄰的三篇文章能夠幫助你理解圖形轉(zhuǎn)換，旋轉(zhuǎn)和伸縮。接下來我們將講解擁有魔力的矩陣，它能夠很容易的將這三種操作集合在一起，而且通常是更有用的形式。