如何在WebGL2着色器中使用CSS的matrix3d矩阵？

Question

我目前有一个我喜欢的 CSS

matrix3d

变换，让我们以这个为例：

transform: matrix3d(1.3453,0.1357,0.0,0.0003,0.2096,1.3453,0.0,0.0003,0.0,0.0,1.0,0.0,-100.0,-100.0,0.0,1.0);
transform-origin: 0 0;

我正在使用 WebGL2 画布，我希望在其上绘制的图像具有相同的转换。

为了实现这一目标，我相信我需要一个顶点着色器来接收矩阵并将其相乘：

#version 300 es

in vec2 a_position;
in vec2 a_texCoord;
uniform vec2 u_resolution;
out vec2 v_texCoord;

uniform mat4 u_matrix;

void main() {
  vec2 zeroToOne = a_position / u_resolution;
  vec2 zeroToTwo = zeroToOne * 2.0;
  vec2 clipSpace = zeroToTwo - 1.0;

  gl_Position = u_matrix*vec4(clipSpace * vec2(1, -1), 0, 1);
  v_texCoord = a_texCoord;
}

然后我可以在 JavaScript 代码中将矩阵传递给着色器：

const matrixLocation = gl.getUniformLocation(program, "u_matrix");
gl.uniformMatrix4fv(matrixLocation, false, new Float32Array(matrix));

我目前所困的是弄清楚代码中的

matrix

值应该是什么。我尝试阅读

matrix3d

变换的组成方式，并据此重新排列矩阵，但没有成功。

如何在此处的 WebGL2 着色器中使用

matrix3d

变换？

Answer 1

CSS Matrix3d 是一个普通的 4x4 齐次矩阵，元素按行排序，因此第 1 行是

1.3453, 0.1357, 0.0, 0.0003

，第 2 行是

0.2096, 1.3453, 0.0, 0.0003

，第 3 行是

0.0, 0.0, 1.0, 0.0

，第 4 行是

-100.0, -100.0, 0.0, 1.0

。您可以使用 CSS 字符串并将其转换为您需要的任何内容，也可以从该字符串创建一个 DOMMatrix，然后使用它。

例如

const matrixFromCSS = `matrix3d(.....)`;
const matrixAsFloat32Array = new Float32Array(
  matrixFromCDD
    .replace(`matrix3d(`,``)
    .split(`,`)
    .map(v => parseFloat(v)
  )
);

或

const matrixFromCSS = `matrix3d(.....)`;
const matrixAsMatrix = new DOMMatrix(matrixFromCSS);
const matrixAsFloat32Array = matrixAsMatrix.toFloat32Array();