diff --git a/README.md b/README.md
index eecee1d444b96e645e6eab31a1c83e5f788ca3cf..80912b88a04b68de8876a041383dd00e045884f5 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,9 @@
- 이 3D 객체에는 3D객체를 구성하는 삼각형이 많이 있기 때문에 각 삼각형의 vertex에 해당하는 값이 texture의 어느 부분인지 계산하는 것이 중요하다. <br>
- texture에서의 좌표값을통해 uv vector를 형성하고, 형성한 vector를 통해 texture를 mapping시킬수 있다. <br>
+
+ 
+ 
- 또한, 완성한 3D객체를 보면 rotate하는 각도에 따라, 고양이의 표정이 변화하는 것을 볼 수있다. <br>
@@ -59,7 +62,7 @@
### 2. Cube Multiple Texture Mapping
- - 3D object인 cube의 각 면에 서로 다른 texture mapping한 예제 <br>
+- 3D object인 cube의 각 면에 서로 다른 texture mapping한 예제 <br>
- 대표적인 3D 객체중 하나인 cube의 각면에 서로 다른 texture를 mapping하는 예제이다.<br>
- cube의 각 면에 동일한 texture를 mapping해주게 된다면, 정육면체의 한면에 mapping할때 이전에 보았던 texture mapping 방법과 동일하게 진행해주면 된다.<br>
- 하지만, 정육면체의 각면에 서로 다른 texture를 mapping해주기 위해서는 조금 다른 방법을 사용한다.<br><br>
@@ -77,11 +80,53 @@
- 이 때, 정육면체에 texture를 mapping 할 때, texture_cube_map을 이용하면, 편리하게 cube에 여러가지 texture들을 mapping 할 수 있다. <br>
- ![3image]()
-
- - 완성된 cube를 보면, 회전하면서 각면에 고양이, 토끼, 강아지가 각각 다른 면에 위치해 있는 것을 볼 수 있다. <br>
+ 
- - texture 이미지 정의와 바인딩 : 각 이미지를 positive x, negative x, positive y, negative y, positive z, negative z 의 location으로 정의해 놓고 for문을 통해 한꺼번에 이미지를 로딩 시켜준다. 이때, TEXTURE_CUBE_MAP을 이용하여 쉽게 texture를 binding할 수 있다. <br>
+ - 완성된 cube를 보면, 회전하면서 각면에 고양이, 토끼, 강아지가 각각 다른 면에 위치해 있는 것을 볼 수 있다. <br><br>
+
+ ```
+ 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 },
+ { location: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, src: cuty_dog_src },
+ { location: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, src: cuty_dog_src },
+ { location: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, src: cuty_rabbit_src },
+ { location: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, src: cuty_rabbit_src },
+ ]; <br>
+
+ animal_images.forEach(function (animal_image) {
+ const location = animal_image.location;
+ const src = animal_image.src;
+
+ gl.texImage2D(location, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255]));
+
+ const image = new Image();
+ image.src = src;
+ image.addEventListener('load', function () {
+ gl.bindTexture(gl.TEXTURE_CUBE_MAP, animal_texture);
+ gl.texImage2D(location, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+ gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
+ });
+ });
+ ```
+
+ - texture 이미지 정의와 바인딩 : 각 이미지를 positive x, negative x, positive y, negative y, positive z, negative z 의 location으로 정의해 놓고 for문을 통해 한꺼번에 이미지를 로딩 시켜준다.
+ - 이때, TEXTURE_CUBE_MAP을 이용하여 쉽게 texture를 binding할 수 있다.
+
+ ```
+ attribute highp vec3 myVertex;
+ attribute highp vec4 myColor;
+ attribute highp vec2 myUV;
+ uniform mediump mat4 Pmatrix; \
+ uniform mediump mat4 Vmatrix; \
+ uniform mediump mat4 Mmatrix; \
+ varying highp vec3 texCoord;
+ void main(void)
+ {
+ texCoord = normalize(myVertex.xyz);
+ gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(myVertex, 1.0);
+ };
+ ```
- vertex shader source code : 나머지는 이전에 보았던 texture mapping과 같지만, texture의 vector가 vec3로 dimension이 늘어난 것을 확인할 수 있다. x,y,z 가 모두 필요하기 때문에 vec3를 사용하여야한다.