Calcul de la matrice CSS

Question

J'ai essayé de résoudre ce problème pendant quelques jours et je ne suis pas sûr si la matrice CSS est différente des matrices graphiques standard, ou si j'ai quelque chose de mal (probablement j'ai quelque chose de mal).

J'essaie principalement de comprendre comment tourner sur les axes X et Y. Quand j'utilise "transformer: rotateX (2deg) rotateY (2deg) translate3d (0px, -100px, 0px);" et j'utilise javascript pour saisir le style de la matrice, c'est ce que je suis capable de produire.

0.9993908270190958, -0.001217974870087876, -0.03487823687206265, 0, 
0,     0.9993908270190958, -0.03489949670250097, 0, 
0.03489949670250097, 0.03487823687206265, 0.9987820251299122, 0, 
0,     -99.93908270190957,  3.489949670250097, 1 

Mais si j'essaie de calculer la matrice en utilisant javascript (avec 2 degrés sur X et Y) Je reçois

0.9993908270190958, 0,     -0.03489949670250097, 0, 
-0.001217974870087876, 0.9993908270190958, -0.03487823687206265, 0, 
0.03487823687206265, 0.03489949670250097, 0.9987820251299122, 0, 
0.1217974870087876, -99.93908270190957,  3.487823687206265, 1 

Maintenant, alors que plusieurs chiffres sont différents dans le second, je crois un nombre provoque le problème. Notez les numéros dans la rangée 1/colonne 2 et dans la rangée 2/colonne 1, pour les deux matrices. Le "-0.001217974870087876" semble être commuté. Et si je comprends comment tout est calculé, cela risque de rejeter tous les autres nombres.

Voici le code que je utilise pour créer la deuxième matrice

var basematrix = [ 
    [1, 0, 0, 0], 
    [0, 1, 0, 0], 
    [0, 0, 1, 0], 
    [0, -100, 0, 1] 
]; 
function RotateWorld(y, x) 
{ 
    var halfrot = Math.PI/180; 

    var xcos = Math.cos(x * halfrot); 
    var xsin = Math.sin(x * halfrot); 

    var ycos = Math.cos(y * halfrot); 
    var ysin = Math.sin(y * halfrot); 

    var ymatrix = [ 
     [ycos, 0, -ysin, 0], 
     [0, 1, 0, 0], 
     [ysin, 0, ycos, 0], 
     [0, 0, 0, 1] 
    ]; 

    var xmatrix = [ 
     [1, 0, 0, 0], 
     [0, xcos, xsin, 0], 
     [0, -xsin, xcos, 0], 
     [0, 0, 0, 1] 
    ]; 

    var calcmatrix = MatrixMultiply(ymatrix, basematrix); 

    calcmatrix = MatrixMultiply(xmatrix, calcmatrix); 

    calcmatrix = TransMultiply(calcmatrix); 

    for (var i = 0; i < 4; i++) 
    { 
     for (var j = 0; j < 4; j++) 
     { 
      document.getElementById('info').innerHTML += calcmatrix[i][j] + ', '; 
     } 
    } 
} 

function MatrixMultiply(matrixa, matrixb) 
{ 
    var newmatrix = []; 
    for (var i = 0; i < 4; ++i) 
    { 
     newmatrix[i] = []; 
     for (var j = 0; j < 4; ++j) 
     { 
      newmatrix[i][j] = matrixa[i][0] * matrixb[0][j] 
        + matrixa[i][1] * matrixb[1][j] 
        + matrixa[i][2] * matrixb[2][j] 
        + matrixa[i][3] * matrixb[3][j]; 
     } 
    } 

    return newmatrix; 
} 
function TransMultiply(matrix) 
{ 
    var newmatrix = matrix; 
    var x = matrix[3][0]; 
    var y = matrix[3][1]; 
    var z = matrix[3][2]; 
    var w = matrix[3][3]; 

    newmatrix[3][0] = x * matrix[0][0] + y * matrix[1][0] + z * matrix[2][0]; 
    newmatrix[3][1] = x * matrix[0][1] + y * matrix[1][1] + z * matrix[2][1]; 
    newmatrix[3][2] = x * matrix[0][2] + y * matrix[1][2] + z * matrix[2][2]; 
    newmatrix[3][3] = x * matrix[0][3] + y * matrix[1][3] + z * matrix[2][3] + newmatrix[3][3]; 
    if (newmatrix[3][3] != 1 && newmatrix[3][3] != 0) 
    { 
     newmatrix[3][0] = x/w; 
     newmatrix[3][1] = y/w; 
     newmatrix[3][2] = z/w; 
    } 
    return newmatrix; 
} 

Mon code est un peu bavard que je suis juste en train d'apprendre comment travailler avec la matrice CSS. Mais j'espère que quelqu'un pourra m'aider à mettre ce numéro au bon endroit.

Modifier Je déteste cogner un poste mais je suis à court d'endroits à poser, donc j'espère un peu plus de gens vont le voir avec une chance d'obtenir une réponse. J'ai essayé toutes les recherches possibles pour comprendre cela (les questions uniques ne sont pas classées très haut dans Google). J'ai probablement lu plus de 20 articles sur le travail avec des matrices et ils ne cèdent rien. Si j'ai besoin d'ajouter plus d'informations s'il vous plaît faites le moi savoir. Aussi, s'il y a un meilleur endroit à demander, faites-le moi savoir. Je suppose que maintenant plusieurs personnes ont regardé le code et le code doit être correct, peut-être mon hypothèse que CSS est le coupable est une possibilité, si oui, comment peut-on suivre cela?

Answer 1

Jetez un oeil à this page, il explique comment css 3dmatrix fonctionne. En outre here vous avez une implémentation dans l'objet JS de CSSMatrix, très similaire à WebKitCSSMatrix qui est déjà inclus dans votre navigateur (webkit) pour votre usage.

Answer 2

Vous avez un bogue dans l'implémentation de function TransMultiply(matrix) { .. }

var newmatrix = matrix; 

Ce n'est pas cloner votre matrice, c'est la mise en newmatrix de se référer à votre matrice originale! Tout ce qui utilise cette méthode va avoir la matrice originale et la nouvelle matrice foiré. Vous pouvez utiliser une méthode qui crée de nouveaux matricies 4x4, comme:

function new4x4matrix(){ 
    return [[0, 0, 0, 0], 
      [0, 0, 0, 0], 
      [0, 0, 0, 0], 
      [0, 0, 0, 0]]; 
} 

et partout où vous avez besoin d'une nouvelle matrice, faire:

var newmatrix = new4x4matrix(); 

Edit: err , mais vous pouvez avoir besoin d'une méthode de clonage: bien.

function cloneMatrix(matrixa) 
{ 
    var newmatrix = []; 
    for (var i = 0; i < 4; ++i) 
    { 
     newmatrix[i] = []; 
     for (var j = 0; j < 4; ++j) 
     { 
      newmatrix[i][j] = matrixa[i][j]; 
     } 
    } 

    return newmatrix; 
} 

et au lieu, pour faire TransMultiply:

var newmatrix = cloneMatrix(matrix);