Javascript 如何为缩放设置关键帧并从webGL立方体的定位点旋转？

我在WebGL中创建了一个立方体。我有一个动画的想法，但正在努力使它走到一起

完整代码大约为150 lns，因此这里有一个工作示例：

这是动画的视频线框，我正在尝试实现：

1-动画将定位点设置到立方体的左下角

2-动画从定位点缩放立方体

3-动画将立方体从锚定点旋转大约一半

着色器： （顶点）

（片段）

我用墙做矩阵变换

转换将进入draw fn并使用gl矩阵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);
}

---

您必须在转换中添加所谓的“轴心”。通常和简单的转换定义如下：

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

若要围绕轴心点（定位点）执行旋转/缩放，必须添加轴心矩阵来描述轴心位置（相对于对象中心）：

您的转换公式如下所示：

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

问题是，虽然缩放*旋转*平移很容易优化（简化以避免实际矩阵乘法），但使用pivot时，优化变得更加棘手

---

注意：您还可以从中获得启发，这是Maya API变换类文档，它提供了一个“overkill”变换公式。我过去用它来理解变换是如何工作的。

QQ:gl矩阵中的RotationTranslationScaleOrigin（）是否是正确的变换公式？是的，这似乎是一个经过优化的公式。

out[12]=v[0]+ox

是最后一个

pivot*translate

，而

-（out[0]*ox+out[4]*oy+out[8]*oz）

对应于

反向（pivot）*缩放*旋转

。

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;