在 WebGL 中旋转 2d

Question

如何在 WebGL 中旋转和缩放 2d 对象？我认为我们将对“vPostion”部分进行更改，但我无法完全设置它。 javascript:

function render() {

    tMatrix = mat4();
    tMatrix = translate(0,0,1);
}

Answer 1

你已经有了一个变换矩阵，所以只需旋转这个矩阵。

先写一个旋转矩阵m的函数，如下：

  function rotateX(m, angle) {
        var c = Math.cos(angle);
        var s = Math.sin(angle);
        var mv1 = m[1], mv5 = m[5], mv9 = m[9];

        m[1] = m[1]*c-m[2]*s;
        m[5] = m[5]*c-m[6]*s;
        m[9] = m[9]*c-m[10]*s;

        m[2] = m[2]*c+mv1*s;
        m[6] = m[6]*c+mv5*s;
        m[10] = m[10]*c+mv9*s;
     }

首先缩放（您目前没有进行任何缩放），翻译第二，轮换第三。

因此您的代码应如下所示：

transformationMatrix = mat4();
scale(transformationMatrix, 1, 1, 1);
rotateX(transformationMatrix, Math.PI/4);
translate(transformationMatrix, xPos, yPos, zPos);

您可能还会看到其他编码器编写（取决于他们的设置）：

modelMatrix.scale(1,1,1).rotateX(Math.PI/4).translate(xPos,yPos,zPos);

来源： https://www.tutorialspoint.com/webgl/webgl_cube_rotation.htm https://gamedev.stackexchange.com/questions/16719/what-is-the-correct-order-to-multiply-scale-rotation-and-translation-matrices-f

在 WebGL 中旋转 2d

Rotating 2d in WebGL

javascript

html

webgl