회전 후 버퍼 변환

Question

센터에서 쿼드를 회전시키고 싶습니다. 이렇게하려면 내가 다음 단계에 따라 오전 :

1. 가 번역 (0, 0)
2. 은 대상 지점

나는 점 세 가지에 붙어 다시

이동을 돌립니다. 행렬을 회전 시켰을 때 화면에 비례하여 오른쪽으로 한 포인트 이동하려고하지만 회전 대신 오른쪽으로 한 포인트 이동합니다. 나는이 문제를 해결하려면 어떻게

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]); 

: 여기

내 코드?

Answer 1

당신은 단지에 변환의 순서를 변경해야합니다 : 당신이 번역을 적용해야합니다

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

: 여기

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]); 

는 Context2D를 사용하여 약간의 데모입니다 우리가 "지역 공간"대신에 "세계 공간"이라고 부르는 것. mat4.translate() 함수가 로컬 공간에서 변환을 수행하는 것 같습니다.

더 명확하게 말하자면, 번역 기능은 변환 행렬의 회전/비율 부분에 곱하여 변환합니다.이 변환은 객체의 로컬 축 (즉, 로컬 공간). 이를 막으려면 변환 행렬의 번역 부분에 번역 벡터를 추가해야합니다.

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

:

는 다음의 변환의 4x4 매트릭스 가정하자

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; 

회전/눈금 부 (축) [0]에 내에 정의 된 3 × 3 행렬을 [10] ([3], [7] 및 [11] 제외). 번역 부분은 [12], [13] 및 [14]입니다.

세계 공간에서이 변환 행렬에 번역을 추가하려면, 당신은 단순히이 작업을 수행해야한다 :

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