완성!!!!

WebGLTextureExample.js

@@ -612,6 +612,7 @@ function initialiseBuffer2() {
     gl.bindTexture(gl.TEXTURE_CUBE_MAP, animal_texture);
 
 
+
     var animal_images = [
         { location: gl.TEXTURE_CUBE_MAP_POSITIVE_X, src: cuty_cat_src },
         { location: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, src: cuty_cat_src },
@@ -636,6 +637,7 @@ function initialiseBuffer2() {
         });
     });
 
+
    gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
 
@@ -655,6 +657,9 @@ function initialiseShaders2() {
                 gl_FragColor.a = 1.0 ; 
             }`;
 
+            document.getElementById("descriptionCode2").style.display ="block"
+            document.getElementById("descriptionCode2").innerHTML = "fragment Shader Source code <br><br>" + fragmentShaderSource;
+            
     gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
     gl.shaderSource(gl.fragShader, fragmentShaderSource);
     gl.compileShader(gl.fragShader);
@@ -676,6 +681,9 @@ function initialiseShaders2() {
 				gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(myVertex, 1.0); 
             }`;
 
+            document.getElementById("descriptionCode1").style.display ="block"
+            document.getElementById("descriptionCode1").innerHTML = "vertex Shader Source code <br><br>" + vertexShaderSource;
+
     // Create the vertex shader object
     gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
 
@@ -914,7 +922,7 @@ function onClickBasic(){
 function onClickCubeTexture(){
 
     document.getElementById("basicbtn").style.display = "none";
-
+    document.getElementById("cubeimg").style.display = "inline";
     document.getElementById("descriptionENG").innerHTML = `
     - 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>
     
     `
+    var code = `    var animal_images = [ <br>
+        { location: gl.TEXTURE_CUBE_MAP_POSITIVE_X, src: cuty_cat_src }, <br>
+        { location: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, src: cuty_cat_src }, <br>
+        { location: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, src: cuty_dog_src }, <br>
+        { location: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, src: cuty_dog_src }, <br>
+        { location: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, src: cuty_rabbit_src }, <br>
+        { location: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, src: cuty_rabbit_src }, <br>
+    ]; <br>
+
+    animal_images.forEach(function (animal_image) { 
+        const location = animal_image.location; 
+        const src = animal_image.src; <br>
+
+        gl.texImage2D(location, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255])); <br>
+
+        const image = new Image(); 
+        image.src = src; 
+        image.addEventListener('load', function () { <br>
+            gl.bindTexture(gl.TEXTURE_CUBE_MAP, animal_texture); <br>
+            gl.texImage2D(location, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);<br>
+            gl.generateMipmap(gl.TEXTURE_CUBE_MAP);<br>
+        });<br>
+    }); <br>`
+
+    document.getElementById("addDescriptionCode").style.display="block"
+    document.getElementById("addDescriptionCode").innerHTML = "- texture image defined And bind : <br> " + code
+    document.getElementById("addcode1").style.display="inline"
+    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("descriptionCode1").style.display="block"
+
+    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("descriptionCode2").style.display="block"
+
+    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하기 쉽도록 해준다.
 
     `
 

index.html

@@ -29,8 +29,12 @@
 		<div id="descriptionDiv">
 
 			<img id="basicimage" src="descriptionImage/basic.JPG">
+			<img id="cubeimg" src="descriptionImage/cubeimage.JPG">
 			<h3 id="descriptionENG" style="color:darkblue;"> </h3>
 
+
+			<p id="addDescriptionCode" style="color:palevioletred;"></p>
+			<p id="addcode1"></p>
 			<h3 id="descriptionCode1" style="color:palevioletred;"> </h3>
 			<p id="code1"></p>
 			<h3 id="descriptionCode2" style="color:palevioletred;"> </h3>

style.css

@@ -49,9 +49,24 @@
     display: none;
 }
 
+#addDescriptionCode{
+    width: 800px;
+    height: 450px;
+    border: 2px solid green;
+    border-radius: 4px;
+    display: none;
+}
+
 #basicimage{
     width: 600px;
     height: 400px;
     margin-left: 300px;
     display: none;
 }
+
+#cubeimg{
+    width: 600px;
+    height: 400px;
+    margin-left: 300px;
+    display: none;
+}