Proper approach to handle transformation matrix and extract its components

Question

Basically I have a Transformation component object with following structure(pseudo):

TransformComponent{
  Vec3 position;
  Vec3 rotation; //in euler angles
  Vec3 scale; 
  Mat4 worldMatrix; //transformation matrix in world space
  Mat4 localMatrix; //transformation matrix relative to parent transform
  Mat4 worldToLocal; //Matrix to convert children worldMatrix in localMatrix
  TransformComponent parent;

  /* calculates worldMatrix using position,rotation & scale. 
   * Also calculates inverse of worldMatrix and stores it in worldToLocal;
   */
  void CalculateWorldMatrix(); 

}

Then I do some transformations like:

    transform.position = [1,1,1]; //set new position

    transform.CalculateWorldMatrix(); //recalculate worldMatrix with new translation coordinates.

    //Multiply worldToLocal with worldMatrix in order to get localMatrix.
    localMatrix = transform.parent.worldToLocal * transform.worldMatrix; 

After that, I have localMatrix with position, rotation etc relative to parent transform. But I can't figure out how to get components(position,eualerAngles,scale) out of localMatrix.

As far as I googled I found some really difficult solutions, which I couldn't understand, and as I'm writing on JavaScript I hope there is a simple solution.

Maybe I am using wrong structure for transform object?
What is the common approach here?

I read that its preferred to use quaternions, but only advance they give is about gimbal lock, at this moment because of simplicity I would like to stick with euler angles if it's possible.

Answer 1

I think your approach is backwards. You maintain data (like position and Euler angles) to produce matrices. Why try to extract that data from the matrix? (That isn't really how to use a matrix anyway; I will explain in paragraph two.) Use the source data when you need the source data, use the matrix when you need the matrix. Don't try to interchange them back and forth.

As for your question about how to "extract" a position from two multiplied matrices: you multiply your global position vector by the combined transformation matrix. That's it.

You seem to have an incomplete understanding of matrices, what they are and how to use them. I suggest that you dedicate some time to studying this topic on your own. It will make your project that involves a transform hierarchy much more feasible. Also, maybe you'll decide you don't even need to reinvent the wheel, and you can use someone else's js matrix library. Like this guy's or even Apple's.