Add description

Author: xiaohk

project9/index.html

@@ -190,10 +190,12 @@
         vec3 temp_color = texColor.xyz;
         vec3 back_color = phong(dir, temp_color);
 
+        // Glass's ior is around 1.3333
         const float l = 1.0;
         const float ior = 1.33333;
         const float size = 3.0;
 
+        // Comput the hitting point
         vec3 r = normalize(fPosition);
         vec3 n = normalize(fNormal);
         float cos_theta1 = dot(-r, n);
@@ -204,6 +206,8 @@
         vec3 out_r = normalize(cos_theta2 * (-n) + sin_theta2 * p);
         float d = (l - fPosition.z) / out_r.z;
         vec3 hit_point = fPosition + d * out_r;
+
+        // Map to ground texture
         vec4 color = texture2D(texSampler, vec2(hit_point.x, hit_point.y));
         gl_FragColor = color;
     }
@@ -521,37 +525,23 @@ <h1> Description</h1>
         <a ><img src="https://i.imgur.com/gEIubUe.jpg"/></a> 
         <br><br>
         So, I try to implement some of the "brokebackish" features: Tent, Campfire, Cowboys, Sheeps, Pine trees, and some Trunks.
-
-        <h1> Implementing comments: Project 7</h1>
-        <h2> Models Created by Me </h2>
-        <ul>
-
-        <li> <b> Campfire: </b> I added randomness to generate the size of stones around the campfire, so it looks more natural and asymmetric. The design of middle woods is also used in the framework of the tent. </li>
-        <li> <b> Tent: </b> I added some poles around the tent to make it more like the one in the movie. I also added a special shader (High specular light) to the pole, for its metallic looking.</li>
-        <li> <b> Pine trees: </b> I am very proud that I designed a dynamic way to draw different pine trees. If you look the trees in detail, you will find each tree is special, in terms of the shape, layer and height.</li>
-        <li> <b> Trunks: </b> They are just basic cylinders.</li></ul>
-        
-
-        <h2> Models Found on Web </h2>
-        <ul>
-        <li> <b> Cowboy: </b> Still need to figure out how to map the texture.</li>
-        <li> <b> Sheep: </b> I added a path and animation for the sheeps.</li></ul>
-        
-        <h1> Project 8</h1>
-        <h2> Models Created by Me </h2>
-        <ul>
-
-        <li> <b> Campfire: </b> I kept the randomness of the size, and added a texture for the stone, to make them more stone-like. I decided not to add trunk texture to the wood in the campfire, because they are too small to show the detail of the texture.</li>
-        <li> <b> Tent: </b> I added a canvas cloth texture to the tent, I thought about making a entrance for the tent, but it was too hard to draw it on the texture image.</li>
-        <li> <b> Pine trees: </b> I could add trunk texture to the trees, but i decided not to, because they are too small to show the texture.</li>
-        <li> <b> Trunks: </b> I figured out a way to wrap texture to the side of a cylinder! To make the texture look real, I make the width height ratio of the image as 2*pi*ratio : height, then compress it to a 2^k * 2^k square. It looks great. Also I added randomness to generate the top circle texture, to make it look cool. <b>I love randomness!</b></li></ul>
-        
-
-        <h2> Models Found on Web </h2>
-        <ul>
-        <li> <b> Cowboy: </b> There is a texture image given with the .obj file, after studying that image. <b>I created two texture images </b> to match the hat color, clothing style of Jack and Ennis.</li>
-        <li> <b> Sheep: </b> I used the given texture with the sheeps.</li></ul>
 
+        <h1> Project 9</h1>
+        <h2> Cubemap Skybox </h2>
+        I added a cubemap skybox texture to create environment for the scene.
+        <h2> Normal Mapping </h2>
+        I added 4 different normal mapping to make the texture for the vent more realistic, and textures of sheeps more diverse.
+        <br><br>
+        <a ><img src="https://i.imgur.com/O7LNlDx.png", height="300"/></a> 
+        <a ><img src="https://i.imgur.com/JmE7aEv.png", height="300"/></a> 
+        <a ><img src="https://i.imgur.com/2Wc52NW.png", height="300"/></a>
+        <br>
+        <h2> Glass Effect </h2>
+        I also tried to simulate the fraction degree to make a glass texture effect. After computing the hitting point going though the glass bottle, I map it directly to the ground texture, although the "correct" way requires 2-pass rendering. Since the bottle is relatively small, you might want to use "Drive" mode to see the effect.
+        <br><br>
+        <a ><img src="https://i.imgur.com/rRQSS1Q.png", height="300"/></a> 
+        <a ><img src="https://i.imgur.com/hYf6mfJ.png", height="300"/></a> 
+        <a ><img src="https://i.imgur.com/Jdvyzno.png", height="300"/></a> 
     </p>
 </body>
 </html>