Merge branch 'master' of git.ajou.ac.kr:ChaeSungHee014/webgl_final_project

README.md

@@ -19,23 +19,13 @@
 
      - texture에서의 좌표값을통해 uv vector를 형성하고, 형성한 vector를 통해 texture를 mapping시킬수 있다. <br>
      
+     ![round_cat](http://git.ajou.ac.kr/ChaeSungHee014/webgl_final_project/raw/master/descriptionImage/round_cat.JPG)
+     ![round_cat](http://git.ajou.ac.kr/ChaeSungHee014/webgl_final_project/raw/master/descriptionImage/round_cat2.JPG)
+
      - 또한, 완성한 3D객체를 보면 rotate하는 각도에 따라, 고양이의 표정이 변화하는 것을 볼 수있다. <br>
 
      - 삼각형을 더 잘게자른다면, 굴곡이 더욱 자연스러워 질 것이다. <br><br>
      
-    ```
-		varying mediump vec2 texCoord;
-		uniform sampler2D sampler2d; 
-		void main(void) 
-		{ 
-            gl_FragColor = texture2D(sampler2d, texCoord); 
-            gl_FragColor.a = 1.0 ; 
-        }
-    ```
-        
-    - Vertex shader source code : attribute로 현재 vertex의정보와 각 vertex에서의 color및 texture의 uv vector정보가 있다. 또한, vertex들의 이동을 통해 object를 trasnformation 할 수 있는데, 이때  matrix의 곱의 형태로 사용되어진다. <br>texture의 uv vector는 varying으로 fragment에 전해진다. <br><br>
-
-          
     ```
 		attribute highp vec3 myVertex; 
 		attribute highp vec4 myColor; 
@@ -53,6 +43,19 @@
         }
     ```
         
+    - Vertex shader source code : attribute로 현재 vertex의정보와 각 vertex에서의 color및 texture의 uv vector정보가 있다. 또한, vertex들의 이동을 통해 object를 trasnformation 할 수 있는데, 이때  matrix의 곱의 형태로 사용되어진다. <br>texture의 uv vector는 varying으로 fragment에 전해진다. <br><br>
+
+   
+    ```
+		varying mediump vec2 texCoord;
+		uniform sampler2D sampler2d; 
+		void main(void) 
+		{ 
+            gl_FragColor = texture2D(sampler2d, texCoord); 
+            gl_FragColor.a = 1.0 ; 
+        }
+    ```
+    
     - Fragment shader source code : vertex fragment로부터 varing을 통해 전달받은 texture의 uv vector를 통해 uniform 으로 선언된 texture를 mapping 할 수 있게 된다. <br>
 
     
@@ -77,18 +80,72 @@
     - 이 때, 정육면체에 texture를 mapping 할 때, texture_cube_map을 이용하면, 편리하게 cube에 여러가지 texture들을 mapping 할 수 있다. <br>
     
     
-    ![3image]()
+    ![3image](http://git.ajou.ac.kr/ChaeSungHee014/webgl_final_project/raw/master/descriptionImage/3image.JPG)
+
+    - 완성된 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);
+        });
+    }); 
+    ```
     
-    - 완성된 cube를 보면, 회전하면서 각면에 고양이, 토끼, 강아지가 각각 다른 면에 위치해 있는 것을 볼 수 있다. <br>
+    - texture 이미지 정의와 바인딩 : 각 이미지를 positive x, negative x, positive y, negative y, positive z, negative z 의 location으로 정의해 놓고 for문을 통해 한꺼번에 이미지를 로딩 시켜준다. 
+    - 이때, TEXTURE_CUBE_MAP을 이용하여 쉽게 texture를 binding할 수 있다. 
     
-    - texture 이미지 정의와 바인딩 : 각 이미지를 positive x, negative x, positive y, negative y, positive z, negative z 의 location으로 정의해 놓고 for문을 통해 한꺼번에 이미지를 로딩 시켜준다. 이때, TEXTURE_CUBE_MAP을 이용하여 쉽게 texture를 binding할 수 있다. <br>
+    ```
+            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를 사용하여야한다. 
 
+    ```
+        precision mediump float; 
+        varying highp vec3 texCoord; 
+        uniform samplerCube Cube; 
+		void main(void) 
+		{ 
+            gl_FragColor = textureCube(Cube, normalize(texCoord)); 
+            gl_FragColor.a = 1.0 ; 
+        }
+    ```
+    
+    
     - fragment shader source code :
     fragment shader에서는 vertex shader로 부터 받은 texture coordinate를 이용하여 texture mapping을 한다. 이때, sample2D로 정의하지않고, sampleCube로 정의해 주어 cube에 mapping하기 쉽도록 해준다.
 
-    `
+    
 
 > 참고문헌
 [webglfundamentals](https://webglfundamentals.org/webgl/lessons/webgl-cube-maps.html "webglfundamentals")