diff --git a/README.md b/README.md index 6f1987fbf03d4fc1b6e2aada03bcd18c3bf7b2c9..6fd69679624bb9aa5f42fa756bddca894b01abea 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ const GRID = "data:image/png;base64,/*...*/" ### View matrix -- gl-matrix.mat4.lookAt() function 사용 +- `gl-matrix.mat4.lookAt()` function 사용 ```js var view_eye = [5,5,5]; @@ -67,8 +67,10 @@ mat4.lookAt(view_matrix,view_eye,[0,0,0],[0,0,-1]); ``` - WebGL의 view matrix 기본값은 `view_eye=[0,0,0]`이고 `up=[0,1,0]`이지만, - view_eye는 HTML input element를 이용해 조정하도록 하였고 -익숙한 xyz좌표계와 비슷한 시점을 구현하기 위해 `up=[0,0,-1]`으로 설정 + +view_eye는 HTML input element를 이용해 조정하도록 하였고 + + 익숙한 xyz좌표계와 비슷한 시점을 구현하기 위해 `up=[0,0,-1]`으로 설정 ```HTML @@ -98,7 +100,8 @@ viewZ.oninput = () => { view_eye[2] = viewZ.value; viewtext.innerHTML = view_eye - XYZ planes model matrix: 4*4 identity matrix 사용 - 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 --> @@ -158,7 +161,9 @@ if(animstatus){ ### Logging - Arrow의 model matrix의 특정 값들을 이용해 cube의 center position과 delta를 표시해 + transform에 따라 model matrix가 어떻게 계산되는지 확인 + - center position: ```js @@ -180,9 +185,10 @@ var dz = [mov_matrix[8],mov_matrix[9],mov_matrix[10]].map(i => i.toFixed(2)); ### Others - 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 미적용 -- Projection matrix: gl-matrix.mat4.perspective() function 사용 +- Projection matrix: `gl-matrix.mat4.perspective()` function 사용 ```js // POV: 180 degree, aspect ratio: 1.0, z-near: 1, z-far: 15