WebGL 正交 3D

在上一篇文章中，我們就學(xué)習(xí)過二維矩陣是如何進(jìn)行工作的。我們談到的平移，旋轉(zhuǎn)，縮放，甚至像素到剪輯空間的投影都可以通過一個矩陣和一些神奇的矩陣數(shù)學(xué)來完成。做三維只是一個從那里向前的一小步。

在我們以前的二維的例子中，我們有二維點（x，y），我們乘以一個 3x3 的矩陣。做三維我們需要三維點（x，y，z）和一個 4x4 矩陣。

讓我們看最后一個例子，把它改為三維，我們將再次使用一個 F，但這一次的三維 'F'。

我們需要做的第一件事就是改變頂點著色來處理三維，這里是舊的著色。

<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

uniform mat3 u_matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
</script>

下面是新的

<script id="3d-vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_position;

uniform mat4 u_matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = u_matrix * a_position;
}
</script>

它甚至更簡單！

然后我們需要提供三維數(shù)據(jù)。

  ...

  gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

  ...

// Fill the buffer with the values that define a letter 'F'.
function setGeometry(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
          // left column
            0,   0,  0,
           30,   0,  0,
            0, 150,  0,
            0, 150,  0,
           30,   0,  0,
           30, 150,  0,

          // top rung
           30,   0,  0,
          100,   0,  0,
           30,  30,  0,
           30,  30,  0,
          100,   0,  0,
          100,  30,  0,

          // middle rung
           30,  60,  0,
           67,  60,  0,
           30,  90,  0,
           30,  90,  0,
           67,  60,  0,
           67,  90,  0]),
      gl.STATIC_DRAW);
}

接下來，我們需要把所有的矩陣函數(shù)從二維變到三維

這是 maketranslation，makerotation 和makescale 的二維（前面的）版本

function makeTranslation(tx, ty) {
  return [
    1, 0, 0,
    0, 1, 0,
    tx, ty, 1
  ];
}

function makeRotation(angleInRadians) {
  var c = Math.cos(angleInRadians);
  var s = Math.sin(angleInRadians);
  return [
    c,-s, 0,
    s, c, 0,
    0, 0, 1
  ];
}

function makeScale(sx, sy) {
  return [
    sx, 0, 0,
    0, sy, 0,
    0, 0, 1
  ];
}

這是更新的三維版本。

function makeTranslation(tx, ty, tz) {
  return [
     1,  0,  0,  0,
     0,  1,  0,  0,
     0,  0,  1,  0,
     tx, ty, tz, 1
  ];
}

function makeXRotation(angleInRadians) {
  var c = Math.cos(angleInRadians);
  var s = Math.sin(angleInRadians);

  return [
    1, 0, 0, 0,
    0, c, s, 0,
    0, -s, c, 0,
    0, 0, 0, 1
  ];
};

function makeYRotation(angleInRadians) {
  var c = Math.cos(angleInRadians);
  var s = Math.sin(angleInRadians);

  return [
    c, 0, -s, 0,
    0, 1, 0, 0,
    s, 0, c, 0,
    0, 0, 0, 1
  ];
};

function makeZRotation(angleInRadians) {
  var c = Math.cos(angleInRadians);
  var s = Math.sin(angleInRadians);
  return [
     c, s, 0, 0,
    -s, c, 0, 0,
     0, 0, 1, 0,
     0, 0, 0, 1,
  ];
}

function makeScale(sx, sy, sz) {
  return [
    sx, 0,  0,  0,
    0, sy,  0,  0,
    0,  0, sz,  0,
    0,  0,  0,  1,
  ];
}

注意，我們現(xiàn)在有3個旋轉(zhuǎn)函數(shù)。在二維中我們只需要一個旋轉(zhuǎn)函數(shù)，因為我們只需要繞 Z 軸旋轉(zhuǎn)?，F(xiàn)在雖然做三維我們也希望能夠繞 X 軸和 Y 軸旋轉(zhuǎn)。你可以從中看出，它們都非常相似。如果我們讓它們工作，你會看到它們像以前一樣簡化

Z 旋轉(zhuǎn)

newX = x * c + y * s;