- Example of different texture mapping on each side of a 3D object, "cube". <br><br>
...
...
@@ -926,12 +934,52 @@ function onClickCubeTexture(){
- Use the following method to map different textures on each side of the cube. <br> In the example, three images were mapped to different locations. <br>
step1>
step2>
step3>
step4>
step1> Define triangles on each side of the cube. <br>
step2> Divide each side of the cube into positive + x, negative-x, <br> positive + y, negative-y, positive + z and negative-z. <br>
step3> Define the textures to be placed on each side. <br>
step4> Map the defined textures to the corresponding locations. <br> <br>
- At this time, when mapping a texture to a cube, <br> texture_cube_map can be used to conveniently map various textures to the cube. <br>
- When you look at the completed cube, you can see that the cat, rabbit, and puppy <br> are on different sides on each side while rotating. <br><br><br>
document.getElementById("addcode1").innerHTML=`- texture image definition and binding: <br> Each image is defined as the location of positive x, negative x, positive y, <br>negative y, positive z, and negative z, and the image is loaded at once through the for statement. <br> At this time, it is easy to bind texture using TEXTURE_CUBE_MAP.<br>`
document.getElementById("code1").innerHTML=`<br>The rest is the same texture mapping we saw earlier, <br> but we can see that the dimension of the texture vector is vec3. <br> vec3 should be used because x, y, and z are all required.<br>`
document.getElementById("code2").innerHTML=`<br>In the fragment shader, texture mapping is performed using <br> texture coordinates received from the vertex shader. <br> At this time, it is defined as sampleCube instead of sample2D, <br> so it is easy to map to cube.<br> `
document.getElementById("descriptionKOR").innerHTML=`<br><br> 3D object인 cube의 각 면에 서로 다른 texture mapping한 예제<br><br>
...
...
@@ -950,7 +998,14 @@ function onClickCubeTexture(){
- 이 때, 정육면체에 texture를 mapping 할 때, <br>texture_cube_map을 이용하면, <br>편리하게 cube에 여러가지 texture들을 mapping 할 수 있다. <br>
- 완성된 cube를 보면, 회전하면서 각면에 고양이, 토끼, 강아지가 각각 다른 면에 위치해 있는 것을 볼 수 있다. <br>
- 완성된 cube를 보면, 회전하면서 각면에 고양이, 토끼, 강아지가 각각 다른 면에 위치해 있는 것을 볼 수 있다. <br><br><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하기 쉽도록 해준다.
