2D Skew Matrix

Started by
0 comments, last by mathematical 7 years, 11 months ago

Hi guys,

I'm working on a 2D demo and am trying to create a skew matrix, to achieve effects similar to those authored in flash.

As far as i understand, the actual skew matrix is created like so:


float xSkew = 0.0; // Some Angle
float ySkew = 0.0; // Some Angle

mat3 trans = mat3(
  1.0       , tan(xSkew), 0.0,
  tan(ySkew), 1.0,        0.0,
  0.0       , 0.0,        1.0
);

But i'm not sure where in the matrix multiplication order skew would come in. My best guess is Scale-Rotate-Skew-Translate but skewing before the translation might not work the way i expect it. Does anyone have any insight to this? Maybe some links to some good articles, i couldn't find anything in-depth on google.

Advertisement

After coding it out, it seems like the order is to skew first, scale second, then rotate and finally translate.


private void OnSetTransform(ControlBase control) {
    Matrix4 translate = Matrix4.Translate(new Vector3(tX.Value, tY.Value, tZ.Value));
    Matrix4 pitch = Matrix4.XRotation(rX.Value);
    Matrix4 yaw = Matrix4.YRotation(rY.Value);
    Matrix4 roll = Matrix4.ZRotation(rZ.Value);
    Matrix4 scale = Matrix4.Scale(new Vector3(sX.Value, sY.Value, sZ.Value));

    // SRT: scale first, rotate second, translate last!
    Matrix4 rotate = roll * pitch * yaw;
    Matrix4 model = translate * rotate * scale;

    Matrix4 skewMatrix = new Matrix4(
        1f, (float)System.Math.Tan(wX.Value * rads), 0f, 0f,
        (float)System.Math.Tan(wY.Value * rads), 1f, 0f, 0f,
        0f, 0f, 1f, 0f,
        0f, 0f, 0f, 1f);

    renderMatrix = model * skewMatrix;
}

This for now seems to do what i want it to. But if anyone has anything to add here, i'd really appreciate that.

PS, i came to the above conclusion after reading this:

http://www.sector12games.com/skewshear-vertex-shader/

Which lead me to a nifty resource, this:

http://www.senocular.com/flash/tutorials/transformmatrix/

This topic is closed to new replies.

Advertisement