Skip to content
Snippets Groups Projects
Commit d788acfb authored by 201221016Kim Haeram's avatar 201221016Kim Haeram
Browse files

fix README.md

parent 8c76d8a9
No related branches found
No related tags found
No related merge requests found
...@@ -57,7 +57,7 @@ const GRID = "data:image/png;base64,/*...*/" ...@@ -57,7 +57,7 @@ const GRID = "data:image/png;base64,/*...*/"
### View matrix ### View matrix
- gl-matrix.mat4.lookAt() function 사용 - `gl-matrix.mat4.lookAt()` function 사용
```js ```js
var view_eye = [5,5,5]; var view_eye = [5,5,5];
...@@ -67,7 +67,9 @@ mat4.lookAt(view_matrix,view_eye,[0,0,0],[0,0,-1]); ...@@ -67,7 +67,9 @@ mat4.lookAt(view_matrix,view_eye,[0,0,0],[0,0,-1]);
``` ```
- WebGL의 view matrix 기본값은 `view_eye=[0,0,0]`이고 `up=[0,1,0]`이지만, - WebGL의 view matrix 기본값은 `view_eye=[0,0,0]`이고 `up=[0,1,0]`이지만,
view_eye는 HTML input element를 이용해 조정하도록 하였고 view_eye는 HTML input element를 이용해 조정하도록 하였고
익숙한 xyz좌표계와 비슷한 시점을 구현하기 위해 `up=[0,0,-1]`으로 설정 익숙한 xyz좌표계와 비슷한 시점을 구현하기 위해 `up=[0,0,-1]`으로 설정
...@@ -98,7 +100,8 @@ viewZ.oninput = () => { view_eye[2] = viewZ.value; viewtext.innerHTML = view_eye ...@@ -98,7 +100,8 @@ viewZ.oninput = () => { view_eye[2] = viewZ.value; viewtext.innerHTML = view_eye
- XYZ planes model matrix: 4*4 identity matrix 사용 - XYZ planes model matrix: 4*4 identity matrix 사용
- Arrows: HTML button element를 이용해 조작된 transform이 적용(상단 snapshot 참고) - Arrows: HTML button element를 이용해 조작된 transform이 적용(상단 snapshot 참고)
transform은 gl-matrix.mat4 library 내의 function을 사용
각 transform은 [gl-matrix.mat4 library](<http://glmatrix.net/docs/module-mat4.html>) 내의 function이 사용됨
```HTML ```HTML
<-- HTML --> <-- HTML -->
...@@ -158,7 +161,9 @@ if(animstatus){ ...@@ -158,7 +161,9 @@ if(animstatus){
### Logging ### Logging
- Arrow의 model matrix의 특정 값들을 이용해 cube의 center position과 delta를 표시해 - Arrow의 model matrix의 특정 값들을 이용해 cube의 center position과 delta를 표시해
transform에 따라 model matrix가 어떻게 계산되는지 확인 transform에 따라 model matrix가 어떻게 계산되는지 확인
- center position: - center position:
```js ```js
...@@ -180,9 +185,10 @@ var dz = [mov_matrix[8],mov_matrix[9],mov_matrix[10]].map(i => i.toFixed(2)); ...@@ -180,9 +185,10 @@ var dz = [mov_matrix[8],mov_matrix[9],mov_matrix[10]].map(i => i.toFixed(2));
### Others ### Others
- Fragment/vertex shader codes: [here](./shader.js) - Fragment/vertex shader codes: [here](./shader.js)
- Depth test: Less than or equal to(LEQUAL) 적용 - Depth test: Less than or equal to(`LEQUAL`) 적용
Stencil, Blending 미적용 Stencil, Blending 미적용
- Projection matrix: gl-matrix.mat4.perspective() function 사용 - Projection matrix: `gl-matrix.mat4.perspective()` function 사용
```js ```js
// POV: 180 degree, aspect ratio: 1.0, z-near: 1, z-far: 15 // POV: 180 degree, aspect ratio: 1.0, z-near: 1, z-far: 15
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment