From 11223bd0a8a02af27eea32a32a78f1aac35b668c Mon Sep 17 00:00:00 2001
From: SOYKIM <thdl9893@ajou.ac.kr>
Date: Wed, 23 Jun 2021 11:20:21 +0900
Subject: [PATCH] Update README.md
---
README.md | 127 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 127 insertions(+)
diff --git a/README.md b/README.md
index cd024ca..7adb5d4 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,129 @@
# WebGL_Tutorial
+## 주제 및 선정 이유
+
+ 이 코드는 traslate와 rotate를 비교하여 공부하기 위해 제작한 프로젝트이다.
+ 매번 서로 다른 기능을 확인하기 위해 여러번 눌러서 확인하곤 했다. 화면에 한번에 여러 큐브를 띄워놓고 서로 기능을 다르게 주어 비교해보면서 차이점을 직접 비교해보면 더욱 이해가 쉬울 것 같아 2개의 큐브를 사용하였다. 또한, 컴퓨터 그래픽스를 공부하면서 tranlate와 rotate가 굉장히 자주 사용되지만 생각보다 헷갈렸던 부분이었기에 이런 어려움을 겪을 학생들에게 도움을 줄 수 있는 프로그램을 만들도록 했다.
+
+## 기능 설명
+### 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: 중심에 있는 큐브와 모서리 부근에 있는 큐브사이의 거리를 조절
+
+## 코드 설명
+ * 큐브가 원래 각도가 되도록 하는 함수- 양쪽 큐브의 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);
+ }
+```
\ No newline at end of file
--
GitLab