diff --git a/WebGLTextureExample.js b/WebGLTextureExample.js
index 0b0306d3934a45a17ce4f9b8f649bd95f47bd8d6..745c7f1f5c5e8ffa22741959aa4b2bf2328a0353 100644
--- a/WebGLTextureExample.js
+++ b/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);
@@ -654,6 +656,9 @@ function initialiseShaders2() {
gl_FragColor = textureCube(Cube, normalize(texCoord));
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);
@@ -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하기 쉽도록 해준다.
`
diff --git a/descriptionImage/cubeimage.JPG b/descriptionImage/cubeimage.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..178ac3648c6cff087dde2cd63336abfbb9539bea
Binary files /dev/null and b/descriptionImage/cubeimage.JPG differ
diff --git a/index.html b/index.html
index 68d91d57cf46aaf316179e576eea8082657542b3..410aa13d24ab3b072d320598ddecd48713a3adf1 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index 18902aac63223177cc7d0aad1dae3f048c1722bb..05013669b888f68694c787ec88d95851867374f8 100644
--- a/style.css
+++ b/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;
+}