Tampon de traduction après rotation

Question

Je souhaite pouvoir faire pivoter un quadruple à partir du centre. Pour ce faire, je suis, procédez comme suit:

1. Traduire en (0, 0)
2. faites pivoter
3. revenir au point de destination

Je suis coincé au point trois. Quand j'ai fait pivoter la matrice, je veux la déplacer d'un point vers la droite par rapport à l'écran, mais elle se déplace d'un point vers la droite par rapport à la rotation à la place.

Voici mon code:

var moveBackX = ((-usedSprite.originX)/usedViewWidth); 
var moveBackY = (((usedSprite.originY)))/usedViewHeight; 
//The translation is already at (0, 0, 0) 
mat4.rotateZ(mvMatrix, mvMatrix, rotation); 
mat4.translate(mvMatrix, mvMatrix, [(moveBackX)/scaleX, moveBackY/scaleY, 0.0]); 

mat4.translate(mvMatrix, mvMatrix, [((xPos)/scaleX), (-(yPos)/scaleY), 0.0]); 

Comment puis-je résoudre ce problème?

Answer 1

Il vous suffit de changer l'ordre des transformations:

mat4.rotateZ(mvMatrix, mvMatrix, rotation); 
mat4.translate(mvMatrix, mvMatrix, [(moveBackX)/scaleX, moveBackY/scaleY, 0.0]); 

mat4.translate(mvMatrix, mvMatrix, [((xPos)/scaleX), (-(yPos)/scaleY), 0.0]); 

Voici une petite démonstration en utilisant Context2D:

const ctx = maincanvas.getContext('2d'); 
 

 
maincanvas.width = 320; 
 
maincanvas.height = 240; 
 

 
function drawRect(color) { 
 
    ctx.strokeStyle = color; 
 
    ctx.beginPath(); 
 
    ctx.rect(0, 0, 50, 50); 
 
    ctx.stroke(); 
 
} 
 

 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
 
ctx.translate(100, 0); 
 
drawRect('#ff8888'); 
 
ctx.rotate(Math.PI/12); 
 
drawRect('#ff0000'); 
 

 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
 
ctx.rotate(Math.PI/12); 
 
drawRect('#88ff88'); 
 
ctx.translate(100, 0); 
 
drawRect('#00ff00');

canvas { 
 
    width: 320px; 
 
    height: 240px; 
 
    border: 1px solid black; 
 
}

<canvas id='maincanvas'></canvas>

Answer 2

Vous devez appliquer la traduction ce que nous appelons "l'espace du monde" au lieu de "l'espace local". Il semble que votre fonction mat4.translate() effectue la traduction dans l'espace local. Pour être plus clair, ce qui se passe avec votre fonction de traduction, c'est que le vecteur de traduction est multiplié par la partie rotation/échelle de la matrice de transformation, qui produit cette translation le long des axes locaux de votre objet (ie espace). Pour éviter cela, vous devez simplement ajouter le vecteur de traduction à la partie traduction de votre matrice de transformation.

laisse supposer la matrice 4x4 de transformation suivante:

Xx Xy Xz 0 // <- X axis 
Yx Yy Yz 0 // <- Y axis 
Zx Zy Zz 0 // <- Z axis 
Tx Ty Tz 1 // <- Translation 

Où: à [10]

mat4[ 0] = Xx; mat4[ 1] = Xy; mat4[ 2] = Xz; mat4[ 3] = 0; 
mat4[ 4] = Yx; mat4[ 5] = Yy; mat4[ 6] = Yz; mat4[ 7] = 0; 
mat4[ 8] = Zx; mat4[ 9] = Zy; mat4[10] = Zz; mat4[11] = 0; 
mat4[12] = Tx; mat4[13] = Ty; mat4[14] = Tz; mat4[15] = 1; 

la rotation/partie d'échelle (axes) est la matrice 3x3 définie dans [0] (à l'exclusion de [3], [7] et [11]). La partie traduction est [12], [13] et [14].

Pour ajouter une traduction à cette matrice de transformation dans l'espace mondial, il vous suffit de le faire:

mat4[12] += TranslationX; 
mat4[13] += TranslationY; 
mat4[14] += TranslationZ;