Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
W
WebGL Transform Tutorial
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
201221016Kim Haeram
WebGL Transform Tutorial
Commits
d788acfb
Commit
d788acfb
authored
6 years ago
by
201221016Kim Haeram
Browse files
Options
Downloads
Patches
Plain Diff
fix README.md
parent
8c76d8a9
No related branches found
No related tags found
No related merge requests found
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
README.md
+12
-6
12 additions, 6 deletions
README.md
with
12 additions
and
6 deletions
README.md
+
12
−
6
View file @
d788acfb
...
@@ -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
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment