diff --git a/WebGLTextureExample.js b/WebGLTextureExample.js index e7a40c5452be99e7b383786d4a88b7c2b45941c6..0b0306d3934a45a17ce4f9b8f649bd95f47bd8d6 100644 --- a/WebGLTextureExample.js +++ b/WebGLTextureExample.js @@ -853,6 +853,9 @@ function main2() { function onClickBasic(){ + document.getElementById("cubebtn").style.display = "none"; + document.getElementById("basicimage").style.display = "inline"; + document.getElementById("descriptionENG").innerHTML = `- Example of mapping a texture on a 3D object <br><br> - This is a simple example of mapping a cat image to a 3D object. <br> @@ -889,11 +892,11 @@ function onClickBasic(){ 3. 각 꼭짓점의 좌표를 계산하여 정사각형을 그릴 수 있도록 한다. <br> 4. 정사각형을 그린다음 자연스러운 굴곡이 생길 수 있도록 z 값을 조정해준다. <br><br> - - 이 3D 객체에는 3D객체를 구성하는 삼각형이 많이 때문에 각 삼각형의 vertex에 해당하는 값이 texture의 어느 부분인지 계산하는 것이 중요하다. <br> + - 이 3D 객체에는 3D객체를 구성하는 삼각형이 많이 있기 때문에 각 삼각형의 vertex에 해당하는 값이 texture의 어느 부분인지 계산하는 것이 중요하다. <br> - texture에서의 좌표값을통해 uv vector를 형성하고, 형성한 vector를 통해 texture를 mapping시킬수 있다. <br> - - 완성한 3D객체를 보면 rotate하는 각도에 따라, 고양이의 표정이 변화하는 것을 볼 수있다. <br> + - 또한, 완성한 3D객체를 보면 rotate하는 각도에 따라, 고양이의 표정이 변화하는 것을 볼 수있다. <br> - 삼각형을 더 잘게자른다면, 굴곡이 더욱 자연스러워 질 것이다. <br><br> @@ -910,7 +913,47 @@ function onClickBasic(){ function onClickCubeTexture(){ - document.getElementById("descriptionENG").innerHTML = "- cube texture mapping" + document.getElementById("basicbtn").style.display = "none"; + + document.getElementById("descriptionENG").innerHTML = ` + - Example of different texture mapping on each side of a 3D object, "cube". <br><br> + + - An example of mapping different textures to each side of a cube, one of the representative 3D objects. <br> + + - If you want to map the same texture to each side of the cube, <br> you can do the same thing as the texture mapping you saw earlier when mapping to a cube. <br> + + - However, in order to map different textures on each side of the cube, we use a slightly different method. <br><br> + + - 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> + + ` + + document.getElementById("descriptionKOR").innerHTML = `<br><br> 3D object인 cube의 각 면에 서로 다른 texture mapping한 예제<br><br> + + - 대표적인 3D 객체중 하나인 cube의 각면에 서로 다른 texture를 mapping하는 예제이다.<br> + + - cube의 각 면에 동일한 texture를 mapping해주게 된다면, <br> 정육면체의 한면에 mapping할때 이전에 보았던 texture mapping 방법과 동일하게 진행해주면 된다.<br> + + - 하지만, 정육면체의 각면에 서로 다른 texture를 mapping해주기 위해서는 조금 다른 방법을 사용한다.<br><br> + + - 정육면체의 각면에 서로다른 texture를 mapping하기 위해서 다음과 같은 방법을 사용한다. <br> 예제에서는 3개의 이미지를 가지고 서로 다른 위치에 mapping 하였다. <br> + + 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> + + ` + document.getElementById("canvas").style.display="none" document.getElementById("CubeCanvas").style.display="inline" main2(); diff --git a/descriptionImage/basic.JPG b/descriptionImage/basic.JPG new file mode 100644 index 0000000000000000000000000000000000000000..77e5eb89b41e5ca5393ccdb0c01dd30db39a4953 Binary files /dev/null and b/descriptionImage/basic.JPG differ diff --git a/index.html b/index.html index 4554e71f20fe00b7f7b8e77e866ef884d5de3df4..68d91d57cf46aaf316179e576eea8082657542b3 100644 --- a/index.html +++ b/index.html @@ -23,13 +23,14 @@ <h2> Description</h2> <div> - <button onclick="onClickBasic()" class="click_btn"> basic texture mapping</button> - <button onclick="onClickCubeTexture()" class="click_btn"> Texture mapping to Cube</button> + <button onclick="onClickBasic()" class="click_btn" id="basicbtn"> basic texture mapping</button> + <button onclick="onClickCubeTexture()" class="click_btn" id="cubebtn"> Texture mapping to Cube</button> </div> <div id="descriptionDiv"> + + <img id="basicimage" src="descriptionImage/basic.JPG"> <h3 id="descriptionENG" style="color:darkblue;"> </h3> - - + <h3 id="descriptionCode1" style="color:palevioletred;"> </h3> <p id="code1"></p> <h3 id="descriptionCode2" style="color:palevioletred;"> </h3> diff --git a/style.css b/style.css index be88adec156a1c317b24cd3b29c4392410d875de..18902aac63223177cc7d0aad1dae3f048c1722bb 100644 --- a/style.css +++ b/style.css @@ -48,3 +48,10 @@ border-radius: 4px; display: none; } + +#basicimage{ + width: 600px; + height: 400px; + margin-left: 300px; + display: none; +}