Skip to content
Snippets Groups Projects
Commit 31a90d49 authored by 채성희's avatar 채성희
Browse files

Update README.md

parent 934510bd
No related branches found
No related tags found
No related merge requests found
...@@ -59,6 +59,32 @@ ...@@ -59,6 +59,32 @@
### 2. Cube Multiple Texture Mapping ### 2. Cube Multiple Texture Mapping
- 3D object인 cube의 각 면에 서로 다른 texture mapping한 예제 <br>
- 대표적인 3D 객체중 하나인 cube의 각면에 서로 다른 texture를 mapping하는 예제이다.<br>
- cube의 각 면에 동일한 texture를 mapping해주게 된다면, 정육면체의 한면에 mapping할때 이전에 보았던 texture mapping 방법과 동일하게 진행해주면 된다.<br>
- 하지만, 정육면체의 각면에 서로 다른 texture를 mapping해주기 위해서는 조금 다른 방법을 사용한다.<br><br>
- 정육면체의 각면에 서로다른 texture를 mapping하기 위해서 다음과 같은 방법을 사용한다.
- 예제에서는 3개의 이미지를 가지고 서로 다른 위치에 mapping 하였다.
1. 정육면체를 그릴 각 면을 삼각형들로 정의한다. <br>
2. 정육 면체의 각 면을 positive +x, negative -x, positive +y, negative -y, positive +z, negative -z로 나눈다. <br>
3. 각 면에 위치시킬 texture들을 정의한다.<br>
4. 정의한 texture들을 해당위치에 mapping한다. <br>
- 이 때, 정육면체에 texture를 mapping 할 때, <br>texture_cube_map을 이용하면, <br>편리하게 cube에 여러가지 texture들을 mapping 할 수 있다. <br>
- 완성된 cube를 보면, 회전하면서 각면에 고양이, 토끼, 강아지가 각각 다른 면에 위치해 있는 것을 볼 수 있다. <br>
- texture 이미지 정의와 바인딩 : 각 이미지를 positive x, negative x, positive y, negative y, positive z, negative z 의 location으로 정의해 놓고 for문을 통해 한꺼번에 이미지를 로딩 시켜준다. 이때, TEXTURE_CUBE_MAP을 이용하여 쉽게 texture를 binding할 수 있다. <br>
- vertex shader source code : 나머지는 이전에 보았던 texture mapping과 같지만, texture의 vector가 vec3로 dimension이 늘어난 것을 확인할 수 있다. x,y,z 가 모두 필요하기 때문에 vec3를 사용하여야한다.
- fragment shader source code :
fragment shader에서는 vertex shader로 부터 받은 texture coordinate를 이용하여 texture mapping을 한다. 이때, sample2D로 정의하지않고, sampleCube로 정의해 주어 cube에 mapping하기 쉽도록 해준다.
`
> 참고문헌 > 참고문헌
[webglfundamentals](https://webglfundamentals.org/webgl/lessons/webgl-cube-maps.html "webglfundamentals") [webglfundamentals](https://webglfundamentals.org/webgl/lessons/webgl-cube-maps.html "webglfundamentals")
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment