如何為縮放動畫設置關鍵幀並從webGL多維數據集的錨點旋轉？

Question

我已經在WebGL中創建了一個多維數據集。 我有一個動畫，但正在努力使其融合在一起。

完整的代碼大約是150 lns代碼，因此這是一個工作示例： 工作的Plunkr代碼

這是動畫的視頻線框，我正在嘗試實現： https : //youtu.be/sZeBm8EM3mw

1-動畫將錨點設置到多維數據集的左下方。

2-動畫從錨點縮放立方體。

3-動畫從錨點旋轉立方體大約到比例的一半。

着色器：（頂點）

attribute vec4 coords;
attribute float pointSize;
uniform mat4 transformMatrix;
attribute vec4 colors;
varying vec4 varyingColors;
uniform mat4 perspectiveMatrix;
void main(void) {
    gl_Position = perspectiveMatrix * transformMatrix  * coords;
    gl_PointSize = pointSize;
    varyingColors = colors;
}

（分段）

precision mediump float;
uniform vec4 color;
varying vec4 varyingColors;
void main(void) {
    gl_FragColor = varyingColors;
}

我正在使用gl-matrix進行矩陣轉換

轉換將在繪圖fn中進行，並使用gl-matrix mat4。

function draw() {

  var transformMatrix = gl.getUniformLocation(shaderProgram, "transformMatrix");
  gl.uniformMatrix4fv(transformMatrix, false, matrix);
  // mat4.rotateY(matrix, matrix, 0.01); // This is example of rotations
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_BYTE, 0);
  requestAnimationFrame(draw);
}

Answer 1

您必須在轉換中添加所謂的“數據透視”。 通常和簡單的轉換定義如下：

transform = scale * rotate * translate;

哪里：

scale =      |  rotate =    |  translate = 

Sx  0  0  0  |  Xx Xy Xz 0  |  1  0  0  0
0   Sy 0  0  |  Yx Yy Yz 0  |  0  1  0  0
0   0  Sz 0  |  Zx Zy Zz 0  |  0  0  1  0
0   0  0  1  |  0  0  0  1  |  Tx Ty Tz 1

要圍繞樞軸點（錨點）執行旋轉/縮放，必須添加描述樞軸位置（相對於對象中心）的樞軸矩陣：

pivot = 

1  0  0  0
0  1  0  0
0  0  1  0
Px Py Pz 1

您的轉換公式如下：

transform = inverse(pivot) * scale * rotate * pivot * translate;

問題是，盡管scale * rotate * translate易於優化（簡化以避免實數矩陣乘法），但通過樞軸旋轉，優化變得更加棘手。

注意：您也可以從此文檔 （Maya API轉換類文檔）中獲得啟發， 該文檔提供了“過度殺傷”轉換公式。 我過去曾用它來了解轉換的工作原理。