@@ -11,24 +11,30 @@ Projection Matrix, View Matrix, Move Matrix를 직접 수정해보며 의미를
## 최상단
#### 좌측 canvan 화면
마우스 드래그를 통해 화면을 움직일 수 있다.(시점에 따라 view matrix가 바뀐다.)
캔버스 위에 포인터를 올리고 마우스 드래그와 휠을 통해 카메라를 움직일 수 있다.
수평 드래그 : y 회전
수직 드래그 : x 회전
마우스 휠 : 줌 인, 줌 아웃
(시점에 따라 view matrix가 바뀐다.)
#### 우측 source 화면
vertex, fragment shader source code로 위의 apply버튼을 통해 소스코드 적용이 가능하다.
랜더링 시간(초단위)로 직접 입력 가능하다.
랜더링 시간(초단위)로 직접 입력 가능하다. 0이하일 경우 랜더링을 멈춘다.
## 중단
#### 좌측 Projection matrix
FOV값과 Near, Far의 값을 계산하여 projection matrix에 반영시킬 수 있고 calculate을
끄면 직접 projection matrix를 수정할 수 있다.
FOV값과 Near, Far의 값을 계산하여 projection matrix에 반영시킬 수 있고
calculate체크박스를 끄면 직접 projection matrix를 수정할 수 있다.
하지만 calculate하는 것을 추천한다.
#### 우측 view_matrix, move matrix
view_matrix의 경우 위의 캔버스를 드래그하여 시점을 옮기면 계산되어 반영된다.
또는 사용자가 직접적으로 수정할 수 있다.
view_matrix의 경우 위의 캔버스를 드래그, 휠을 통해 시점을 옮기면 계산되어 반영된다.
또는 사용자가 직접적으로 수정할 수 있다. 캔버스 위에 드래그, 휠동작을 추천한다.
move matrix의 경우 하단의 회전 또는 이동버튼을 통해 수정된 move matrix가 반영되며
위의 pause & change를 체크하면 애니메이션이 잠시 멈추고 직접 수정할 수 있다.
위의 pause & change를 체크하면 big square의 애니메이션이 잠시 멈추고 값을 직접 수정할 수 있다.
## 하단
...
...
@@ -40,12 +46,24 @@ Rot버튼은 각 축에 대해 회전속도 증가 버튼이다.
#### 우측 small squares
큰 정육면체 4개의 모서리에 존재하는 정육면체에 대한 액션버튼들이다.
위의 big square과 같다.
동작은 위의 big square과 같다.
# 프로젝트 의도
컴퓨터 그래픽스 과목을 처음에 재미삼아 수강신청을 하였고 교수님께서는 이 과목에서 수학적인 지식은 행렬 곱과 벡터연산정도만 알고 있으면 충분하다 말씀하셨다. 수학적인 지식은 확실히 말씀하신 부분만 알고 있다면 됐었지만 강의를 들으면서 매트릭스를 쓰는 요소(View, Projection, Move)에서 x,y,z의 3차원 배열을 쓰지 않고 4차원의 Homogeneous coordinates를 사용한다. translate나 perspective transform, rotation의 이유로 사용하지만 Homogeneous coordinates의 각 요소가 무엇을 의미하고 해당 값을 바꾸면 우리가 보는 도형이 어떻게 변화하는지 상상이 잘 안 갔다. 마침 기말 프로젝트로 WebGL 학습 Contents를 제작하는 것이 존재하여 각각의 Projection과 View, Move의 Homogeneous coordinates을 쓰는 것을 만들어 매트릭스의 각 값을 수정, 반영되게 작성을 하여 캔버스 내의 큰 사각형 하나와 윗면의 각 모서리에는 작은 사각형이 존재하는 도형이 어떻게 보이는지 확인할 수 있다.
컴퓨터 그래픽스 과목을 처음에 재미삼아 수강신청을 하였고 교수님께서는
이 과목에서 수학적인 지식은 행렬 곱과 벡터연산정도만 알고 있으면 충분하다
말씀하셨다. 수학적인 지식은 확실히 말씀하신 부분만 알고 있다면 상관없었지만
강의를 들으면서 매트릭스를 쓰는 요소 MVP(각각 Move, View, Projection)에서
x,y,z의 3차원 배열을 쓰지 않고 4차원의 Homogeneous coordinates를 사용한다.
행렬은 결합법칙이 성립하여 복합행렬을 단일 행렬로 바꿔두고 계산하기 때문에
성능향상과 perspective transform의 경우 차원이 하나 더 필요한 이유로
사용하지만 Homogeneous coordinates의 각 요소가 무엇을 의미하고 해당 값을
바꾸면 우리가 보는 도형이 어떻게 변하는지 상상이 잘 안 갔다. 마침 기말
프로젝트로 WebGL 학습 Contents를 제작하는 것이 과제이므로 Projection과
View, Move의 Homogeneous coordinates을 쓰는 것을 만들어 매트릭스의 각 값을
