diff --git a/README.md b/README.md index 46b9e770ed79ca2dd8022e38347dced7eb6fad69..fc2e3369052d3859990350a6522545bffd72cfdc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,33 @@ # WebGL Tutorial +2021-1 Computer Graphics Final Project - *소프트웨어학과 201920739 박지윤* -2021-1 Computer Graphics Final Project +<br> + +# Object +webgl에서 rotate와 view와 관련하여 다양한 함수를 제공하고 있다. +하지만 이는 sin, cos 등의 계산과 여러 행렬의 곱으로 결과가 도출되기 때문에, +머릿속으로 3D 상황에서 rotate, view 등의 결과를 예상하기 어렵다. +따라서 본 Tutorial은 각 x, y, z 축에 따른 rotate, view의 변화를 시각화하여 +webgl을 처음 배우는 사람의 3D에서의 rotate와 view의 개념 이해를 돕고자 하는 것에 있다. + +<br/> + +# How to make? +먼저, [이곳](https://github.com/hwan-ajou/webgl-1.0/blob/main/T09_per-fragment/)에서 이 tutorial의 base가 될 code를 가져옵니다. + +1. rotate를 수동으로 조절할 수 있도록 코드를 추가합니다. +: rotate는 내가 지정한 축을 기준으로 rotate를 합니다. gl-matrix의 rotate 함수를 사용하여 +rotate를 구현할 수 있으나, 이번에는 xrotate, yrotate, zrotate로 내가 원하는 축을 선택하여 +rotate를 할 수 있도록 해보고자 합니다. +여기에서는 MVP 모델을 사용합니다. M은 Model matrix, V는 View Matrix, P는 Projection Matrix입니다. Model Matrix는 3D 공간에서 물체의 이동을 표현할 수 있습니다. View Matrix는 3D 공간에서 카메라의 view를 표현할 수 있습니다. Projection Matrix는 3D 공간에서 일반적인 카메라에서의 표현을 표현할 수 있습니다. + + + + +# License +본 Tutorial은 [MIT License](./LICENSE) 를 따릅니다. + +<br/> # Reference [https://github.com/hwan-ajou/webgl-1.0/blob/main/T09_per-fragment/index.html](https://github.com/hwan-ajou/webgl-1.0/blob/main/T09_per-fragment/index.html) diff --git a/script.js b/script.js index 17b54e53c68acad480ada2e47968e94f5dd0ab9a..be0a8f5b06f322af29c8b030c64ba593c3630e61 100644 --- a/script.js +++ b/script.js @@ -76,15 +76,6 @@ var vertexData = [ -0.5, 0.5, -0.5, 0.598, 0.786, 0.920, 1.0, -0.5, 0.5, 0.5, 0.598, 0.786, 0.920, 1.0, 0.5, 0.5, 0.5, 0.598, 0.786, 0.920, 1.0, - // X axis - 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, - 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, - // Y axis - 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, - 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, - // Z axis - 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, - 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, ]; function initialiseBuffer() { @@ -438,7 +429,6 @@ function renderScene() { } gl.drawArrays(draw_mode, 0, 36); - gl.drawArrays(1, 36, 43); if (!testGLError("gl.drawArrays")) { return false;