Как я могу использовать матрицу из array3d CSS в шейдере WebGL2? ⇐ CSS

[Anonymous]

Сейчас у меня есть преобразование 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));

Сейчас я застрял в выяснении того, каким должно быть значение матрицы в моем коде. Я пытался прочитать, как устроено преобразование Matrix3d, и перестроить матрицу на основе этого, но безуспешно.
Как я могу использовать matrix3d< /code> здесь преобразование в шейдере WebGL2?

Подробнее здесь: https://stackoverflow.com/questions/786 ... gl2-shader