WebGL_Tutorial
Topic
이 코드는 traslate와 rotate를 비교하여 공부하기 위해 제작한 프로젝트이다.
매번 서로 다른 기능을 확인하기 위해 여러번 눌러서 확인하곤 했다. 화면에 한번에 여러 큐브를 띄워놓고 서로 기능을 다르게 주어 비교해보면서 차이점을 직접 비교해보면 더욱 이해가 쉬울 것 같아 2개의 큐브를 사용하였다. 또한, 컴퓨터 그래픽스를 공부하면서 tranlate와 rotate가 굉장히 자주 사용되지만 생각보다 헷갈렸던 부분이었기에 이런 어려움을 겪을 학생들에게 도움을 줄 수 있는 프로그램을 만들도록 했다.
Fuction Discription
1. Both Cubes (양쪽 큐브 모두 제어)
- Toggle Animation: 큐브를 모두 회전/ 정지
- Speed: 큐브 회전속도 제어
- Mode: 큐브 draw mode 선택
2. Left Cube
- Toggle Animation: 왼쪽 큐브만 회전/ 정지
- FOV: 왼쪽 큐브만 FOV조절
- Translate: x, y, z값을 입력받아 trasnlate시행 (이때, translate후 rotate할 것인지, rotate한 후 translate할 것인지 선택 가능)
3. Right Cube
- Toggle Animation: 오른쪽 큐브만 회전/ 정지
- FOV: 오른쪽 큐브만 FOV조절
- Translate: x, y, z값을 입력받아 trasnlate시행 (이때, translate후 rotate할 것인지, rotate한 후 translate할 것인지 선택 가능)
- Distance: 중심에 있는 큐브와 모서리 부근에 있는 큐브사이의 거리를 조절
Code Review
- 큐브가 원래 각도가 되도록 하는 함수- 양쪽 큐브의 x, y, z rotation값이 각각 주어졌기 때문에 처리할 때에도 각각 해주어야 한다. 함수에 전달받은 인자 a는 어느 큐브의 각도를 원상복수할 것을 알 수 있게 한다.
function defaultRotate(a) {
if(a == 0) {
xRot = 0.0;
yRot = 0.0;
zRot = 0.0;
xRot2 = 0.0;
yRot2 = 0.0;
zRot2 = 0.0;
left_flag = 1;
right_flag = 1;
} else if(a == 1) {
xRot = 0.0;
yRot = 0.0;
zRot = 0.0;
left_flag = 1;
} else if(a == 2) {
xRot2 = 0.0;
yRot2 = 0.0;
zRot2 = 0.0;
right_flag = 1;
}
}- 큐브가 원래 위치가 되도록 하는 함수- 양쪽 큐브의 x, y, z tranlation값이 각각 주어졌기 때문에 처리할 때에도 각각 해주어야 한다. 함수에 전달받은 인자 a는 어느 큐브의 위치를 원상복수할 것을 알 수 있게 한다.
function defaultTranslate(a) {
if(a == 0) {
translatex1 = 0.0;
translatey1 = 0.0;
translatez1 = 0.0;
translatex2 = 0.0;
translatey2 = 0.0;
translatez2 = 0.0;
} else if(a == 1) {
translatex1 = 0.0;
translatey1 = 0.0;
translatez1 = 0.0;
} else if(a == 2) {
translatex2 = 0.0;
translatey2 = 0.0;
translatez2 = 0.0;
}
}- 큐브가 원래 상태(각도, 위치)가 되도록 하는 함수- 위의 두 함수를 불러 위치와 각도 모두를 원래 상태대로 복구시킨다.
function defaultState(a) {
defaultRotate(a);
defaultTranslate(a);
}- 오른쪽 큐브 중에서 가장 자리에 있는 작은 큐브 그리기- mMat를 saveMat에 저장해두어 반복문에서 4개의 cube를 그릴 수 있게 한다. 센터에 있는 큐브와의 거리를 조절하기 위해서 dist변수를 활용하였다. 위쪽4개의 작은 큐브를 그릴 때에는 +3만큼 translate 하기 때문에 +dist만큼 더 멀어져야 하고, 반대쪽 4개의 작은 큐브를 그릴 때는 -3만큼 translate해서 그리기 때문에 -dist만큼 더 멀어져야한다.
var saveMat = mat4.create();
mat4.copy(saveMat,mMat);
for (var i = 0 ; i < 4 ; i++)
{
mat4.scale(mMat, mMat, [0.2, 0.2, 0.2]);
mat4.rotateY (mMat, mMat, glMatrix.glMatrix.toRadian(90*(i+1)));
mat4.translate(mMat, mMat, [3.0 + dist, 3.0 + dist, 3.0 + dist]);
mat4.rotateY (mMat, mMat, yRot2 * 5.0);
gl.uniformMatrix4fv(mMatLocation2, gl.FALSE, mMat);
gl.drawArrays(draw_mode, 0, 36);
mat4.copy(mMat, saveMat);
}
for (var i = 0 ; i < 4 ; i++)
{
mat4.scale(mMat, mMat, [0.2, 0.2, 0.2]);
mat4.rotateY (mMat, mMat, glMatrix.glMatrix.toRadian(90*(i+1)));
mat4.translate(mMat, mMat, [3.0 + dist, -3.0 - dist, 3.0 + dist]);
mat4.rotateY (mMat, mMat, yRot2 * 5.0);
gl.uniformMatrix4fv(mMatLocation2, gl.FALSE, mMat);
gl.drawArrays(draw_mode, 0, 36);
mat4.copy(mMat, saveMat);
}- 큐브를 translate하고 rotate하고 싶으면 order=0, rotate하고 tranlate하고 싶으면 order=1로두어 renderSence()에서 처리한다.
if(order1 == 0) {
mat4.translate(mMat, mMat, [translatex1, translatey1, translatez1]);
mat4.rotateX(mMat, mMat, xRot);
mat4.rotateY(mMat, mMat, yRot);
mat4.rotateZ(mMat, mMat, zRot);
} else if(order1 == 1) {
mat4.rotateX(mMat, mMat, xRot);
mat4.rotateY(mMat, mMat, yRot);
mat4.rotateZ(mMat, mMat, zRot);
mat4.translate(mMat, mMat, [translatex1, translatey1, translatez1]);
} else {
mat4.rotateX(mMat, mMat, xRot);
mat4.rotateY(mMat, mMat, yRot);
mat4.rotateZ(mMat, mMat, zRot);
}