diff --git a/README.md b/README.md
index a903608..2f3ba34 100644
--- a/README.md
+++ b/README.md
@@ -3,26 +3,34 @@ WebGL Clustered Deferred and Forward+ Shading
 
 **University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 5**
 
-* (TODO) YOUR NAME HERE
-* Tested on: (TODO) **Google Chrome 222.2** on
-  Windows 22, i7-2222 @ 2.22GHz 22GB, GTX 222 222MB (Moore 2222 Lab)
+* JuYang
+* ### Tested on: Windows 7, i7-4710MQ @ 2.50GHz 8GB, GTX 870M 6870MB (Hasee Notebook K770E-i7)
 
-### Live Online
+Well after almost 2 weeks, I decided to give up on this project. 
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+The only thing that has the right result is the forward+ glsl. Currently it can extract light clusters in a right way, and I added a "toon" shader which is not toon at all. 
 
-### Demo Video/GIF
+![result](a.png)
 
-[![](img/video.png)](TODO)
+If you wanna see this feature, you can de-comment the "TEST GLSL" part in culster.js, line 193.
 
-### (TODO: Your README)
+Other from that, the cluster.js is where the problem is. 
 
-*DO NOT* leave the README to the last minute! It is a crucial part of the
-project, and we will not be able to grade you without a good README.
+What I think is to divide the space using angels instead of positions. 
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
+All positions are world based, and I can calculate which cluster the light is using angles*segments/(2*FOV);
 
+![result](cluster.png)
+
+Well, in javascript, I don't have something that's as accurate as int, float or vec3, vec4. 
+
+All I have is var or let, which is unstable and unperdictable. 
+
+I have to open the web page and debug each line to see if there's some trouble, for example, passing data from light.position(Float32 Array) into a vec3 or vec4. 
+
+Besides, in webgl, it is not real glsl, we don't have %, and not while (That's necessery for light looping, my way is to give a large int in for loop, and break when we met the condition). Even a basic goto would be better, I think. 
+
+After this bad experience using javascript and webgl, I'm not suprised if people tell me that they don't like webgl, nor do I like it. 
 
 ### Credits
 
diff --git a/a.png b/a.png
new file mode 100644
index 0000000..3982f30
Binary files /dev/null and b/a.png differ
diff --git a/cluster.png b/cluster.png
new file mode 100644
index 0000000..180f6db
Binary files /dev/null and b/cluster.png differ
diff --git a/src/renderers/clustered.js b/src/renderers/clustered.js
index 9521fbd..2c43dd4 100644
--- a/src/renderers/clustered.js
+++ b/src/renderers/clustered.js
@@ -1,9 +1,13 @@
 import { mat4, vec4, vec3 } from 'gl-matrix';
 import { NUM_LIGHTS } from '../scene';
 import TextureBuffer from './textureBuffer';
+import {camera} from "../init";
 
 export const MAX_LIGHTS_PER_CLUSTER = 100;
 
+const pos=vec3.create();
+const light_pos4=vec4.create();
+
 export default class ClusteredRenderer {
   constructor(xSlices, ySlices, zSlices) {
     // Create a texture to store cluster data. Each cluster stores the number of lights followed by the light indices
@@ -17,16 +21,213 @@ export default class ClusteredRenderer {
     // TODO: Update the cluster texture with the count and indices of the lights in each cluster
     // This will take some time. The math is nontrivial...
 
-    for (let z = 0; z < this._zSlices; ++z) {
-      for (let y = 0; y < this._ySlices; ++y) {
-        for (let x = 0; x < this._xSlices; ++x) {
-          let i = x + y * this._xSlices + z * this._xSlices * this._ySlices;
-          // Reset the light count to 0 for every cluster
-          this._clusterTexture.buffer[this._clusterTexture.bufferIndex(i, 0)] = 0;
-        }
+      for (let z = 0; z < this._zSlices; ++z) {
+          for (let y = 0; y < this._ySlices; ++y) {
+              for (let x = 0; x < this._xSlices; ++x) {
+                  let index = x + y * this._xSlices + z * this._xSlices * this._ySlices;
+                  // Reset the light count to 0 for every cluster
+                  this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index, 0)] = 0;}}}
+
+      // WHY LOOP CLUSTERS?????
+
+      //Get camera angles in X,Y axis
+      let yFOV=camera.fov;
+      let xFOV=camera.aspect*yFOV;
+      //Get degrees for each segment
+      let ysegment=yFOV*2.0/this._ySlices;
+      let xsegment=xFOV*2.0/this._xSlices;
+
+      let totallights=0;
+      let lightnumtotalinscene=scene.lights.length;
+      //Camera position
+      let cam_pos=camera.position;
+      //Get camera direction XY
+      /*
+      let cam_dir_x=vec3.create();
+      let cam_q=vec4.create();
+      cam_q[0]=camera.quaternion.w;
+      cam_q[1]=camera.quaternion.x;
+      cam_q[2]=0;
+      cam_q[3]=0;
+      vec3.transformQuat(cam_dir_x,vec3.fromValues(0,0,1),cam_q);
+
+      let cam_dir_y=vec3.create();
+      cam_q[0]=camera.quaternion.w;
+      cam_q[1]=0;
+      cam_q[2]=camera.quaternion.y;
+      cam_q[3]=0;
+      vec3.transformQuat(cam_dir_y,vec3.fromValues(0,0,1),cam_q);
+      */
+      let cam_dir_x=vec3.fromValues(0,0,1);
+      //vec3.rotateY(cam_dir_x,cam_dir_x,vec3.create(),camera.rotation.y*180.0/Math.PI);
+
+      let cam_dir_y=vec3.fromValues(0,0,1);
+      //vec3.rotateX(cam_dir_y,cam_dir_y,vec3.create(),camera.rotation.x*180.0/Math.PI);
+
+
+
+      //Loop Lights
+      for(let L=0;L<lightnumtotalinscene;L++)
+      {
+
+          //Light Position
+          vec3.set(pos,scene.lights[L].position[0], scene.lights[L].position[1], scene.lights[L].position[2]);
+          //Light-Camera Distance
+          let dis=vec3.create();
+          dis[0]=pos[0]-cam_pos.x;
+          dis[1]=pos[1]-cam_pos.y;
+          dis[2]=pos[2]-cam_pos.z;
+          //X,Y angles
+          var dis2;
+          dis2=dis;
+          dis2[0]=0;
+          let yangle=(vec3.angle(vec3.fromValues(0,0,1),dis2)-camera.rotation.y)*180/Math.PI;
+          dis2[0]=dis[0];
+          dis2[1]=0;
+          let xangle=(vec3.angle(vec3.fromValues(0,0,1),dis2)-camera.rotation.x)*180/Math.PI;
+          //which segment is it in?
+          let xint=Math.round(xangle/xsegment);
+          let yint=Math.round(yangle/ysegment);
+          let zint=Math.round( dis[2] / ((camera.far-camera.near)/this._zSlices) );
+
+          //Radius of Light
+          let r=scene.lights[L].radius;
+          //Get Bounding BOX
+          let xmin=vec3.fromValues(dis[0]-r, dis[1], dis[2]);
+          let xmax=vec3.fromValues(dis[0]+r, dis[1], dis[2]);
+          let ymin=vec3.fromValues(dis[0], dis[1]-r, dis[2]);
+          let ymax=vec3.fromValues(dis[0], dis[1]+r, dis[2]);
+          let zmin=vec3.fromValues(dis[0], dis[1], dis[2]-r);
+          let zmax=vec3.fromValues(dis[0], dis[1], dis[2]+r);
+          //Rotate Camera direction to left most
+          let direction=vec3.fromValues(0,0,1);
+          vec3.rotateX(direction,cam_dir_x,vec3.fromValues(0,0,0),-xFOV);
+          //Get x range for all clusters that contains this light ball
+          let xmin_int=this.get_pos(xmin,direction,xsegment) *this._xSlices;
+          let xmax_int=this.get_pos(xmax,direction,xsegment) *this._xSlices;
+          //Rotate Camera direction to down most
+          direction=vec3.fromValues(0,0,1);
+          vec3.rotateY(direction,cam_dir_y,vec3.fromValues(0,0,0),-yFOV);
+          //Get y range for all clusters that contains this light ball
+          let ymin_int=this.get_pos(ymin,direction,ysegment) *this._ySlices;
+          let ymax_int=this.get_pos(ymax,direction,ysegment) *this._ySlices;
+          //Get z range for all clusters that contains this light ball
+          let zmin_int=Math.round(zmin[2]);
+          let zmax_int=Math.round(zmax[2]);
+
+
+
+/*
+          vec3.set(pos,scene.lights[L].position[0], scene.lights[L].position[1], scene.lights[L].position[2]);
+          vec4.set(light_pos4,
+              scene.lights[L].position[0],
+              scene.lights[L].position[1],
+              scene.lights[L].position[2],
+              1);
+
+          vec4.transformMat4(light_pos4,light_pos4,viewMatrix);
+
+          light_pos4[0] /=light_pos4[3];
+          light_pos4[1] /=light_pos4[3];
+          light_pos4[2] /=light_pos4[3];
+
+          let xint=Math.round((1+light_pos4[0])*this._xSlices/2);
+          let yint=Math.round((2-light_pos4[1])*this._ySlices/2);
+          let zint=Math.round(light_pos4[2]*this._zSlices);
+          */
+
+
+          //Loop all clusters within bounding box
+          for(let i=xmin_int;i<=xmax_int;i++)
+          {
+              for(let j=ymin_int;j<=ymax_int;j++)
+              {
+                  for(let k=zmin_int;k<=zmax_int;k++)
+                  {
+                      //Which Cluster
+                      let index1= i + j * this._xSlices + k * this._xSlices * this._ySlices;
+                      //how many lights are there already in the cluster
+                      let light_num=this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index1, 0)];
+
+                      if(light_num<MAX_LIGHTS_PER_CLUSTER)
+                      {
+                          //add one more light
+                          light_num+=1;
+                          this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index1, 0)]=light_num;
+                          //which texel in cluster
+                          let clusterTexel = Math.floor(light_num/4.0);
+                          //which position in the 4 slots of a texel
+                          let reminder = light_num % 4;
+                          //put the light index into buffer
+                          this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index1, clusterTexel+reminder)] = L;
+                          totallights++;
+                      }
+                  }
+              }
+          }
+
+
+
+          let index2= xint + yint * this._xSlices + zint * this._xSlices * this._ySlices;
+          //how many lights are there already in the cluster
+          let light_num2=this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index2, 0)];
+
+          if(light_num2<MAX_LIGHTS_PER_CLUSTER)
+          {
+              //add one more light
+              light_num2=light_num2+1;
+              this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index2, 0)]=light_num2;
+              //which texel in cluster
+              let clusterTexel2 = Math.floor(light_num2/4.0);
+              //which position in the 4 slots of a texel
+              let reminder2 = light_num2 % 4;
+              //put the light index into buffer
+              this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index2, clusterTexel2+reminder2)] = L;
+              totallights++;
+          }
+
+
+
       }
-    }
+
+      //TEST GLSL
+/*
+      for (let z = 0; z < this._zSlices; ++z) {
+          for (let y = 0; y < this._ySlices; ++y) {
+              for (let x = 0; x < this._xSlices; ++x) {
+
+                  let index = x + y * this._xSlices + z * this._xSlices * this._ySlices;
+
+                  for(let iii=1;iii<lightnumtotalinscene;iii++)
+                  {
+                      this._clusterTexture.buffer[this._clusterTexture.bufferIndex(index, 0)]=iii;
+
+                      var LightTexel = Math.floor(iii * 0.25);
+                      var LightTexelIndex = this._clusterTexture.bufferIndex(index, LightTexel);
+                      var reminder = iii - LightTexel * 4;
+
+                      this._clusterTexture.buffer[LightTexelIndex + reminder] = iii;
+
+                  }}}}
+ */
+
+
+      console.log("Lights total= "+totallights);
 
     this._clusterTexture.update();
   }
+
+
+
+
+
+    get_pos(dis , cam , segment)
+    {
+        //let angle=Math.acos( vec3.dot(vec3.normalize(dis,dis),cam)) * 180.0/Math.PI;
+        let angle=vec3.angle(cam,dis);
+        let seg=Math.round(0.5+(angle/segment));
+
+        return seg;
+    }
+
 }
\ No newline at end of file
diff --git a/src/renderers/clusteredForwardPlus.js b/src/renderers/clusteredForwardPlus.js
index 9e8afbe..af48b25 100644
--- a/src/renderers/clusteredForwardPlus.js
+++ b/src/renderers/clusteredForwardPlus.js
@@ -5,7 +5,7 @@ import { NUM_LIGHTS } from '../scene';
 import vsSource from '../shaders/clusteredForward.vert.glsl';
 import fsSource from '../shaders/clusteredForward.frag.glsl.js';
 import TextureBuffer from './textureBuffer';
-import ClusteredRenderer from './clustered';
+import ClusteredRenderer, {MAX_LIGHTS_PER_CLUSTER} from './clustered';
 
 export default class ClusteredForwardPlusRenderer extends ClusteredRenderer {
   constructor(xSlices, ySlices, zSlices) {
@@ -15,7 +15,17 @@ export default class ClusteredForwardPlusRenderer extends ClusteredRenderer {
     this._lightTexture = new TextureBuffer(NUM_LIGHTS, 8);
     
     this._shaderProgram = loadShaderProgram(vsSource, fsSource({
-      numLights: NUM_LIGHTS,
+
+      numLights: NUM_LIGHTS, //草泥马在这传的值啊
+        Xsegment: xSlices,
+        Ysegment: ySlices,
+        Zsegment: zSlices,
+        MAXLIGHTSPERCLUSTER: MAX_LIGHTS_PER_CLUSTER,
+        PIXELSPERELEMENT: this._clusterTexture._pixelsPerElement,
+        SCREENWIDTH: screen.width,
+        SCREENHEIGHT: screen.height,
+
+
     }), {
       uniforms: ['u_viewProjectionMatrix', 'u_colmap', 'u_normap', 'u_lightbuffer', 'u_clusterbuffer'],
       attribs: ['a_position', 'a_normal', 'a_uv'],
diff --git a/src/scene.js b/src/scene.js
index 35f6700..0912738 100644
--- a/src/scene.js
+++ b/src/scene.js
@@ -8,7 +8,7 @@ export const LIGHT_RADIUS = 5.0;
 export const LIGHT_DT = -0.03;
 
 // TODO: This controls the number of lights
-export const NUM_LIGHTS = 100;
+export const NUM_LIGHTS = 50;
 
 class Scene {
   constructor() {
diff --git a/src/shaders/clusteredForward.frag.glsl.js b/src/shaders/clusteredForward.frag.glsl.js
index 022fda7..9d69316 100644
--- a/src/shaders/clusteredForward.frag.glsl.js
+++ b/src/shaders/clusteredForward.frag.glsl.js
@@ -11,10 +11,34 @@ export default function(params) {
 
   // TODO: Read this buffer to determine the lights influencing a cluster
   uniform sampler2D u_clusterbuffer;
+  
+  
 
   varying vec3 v_position;
   varying vec3 v_normal;
   varying vec2 v_uv;
+  
+  //Get Params
+  const int xsegment=${params.Xsegment};
+  const int ysegment=${params.Ysegment};
+  const int zsegment=${params.Zsegment};
+  const int numLights=${params.numLights};
+  const int maxlights=${params.MAXLIGHTSPERCLUSTER};
+  const int pixelsperelement=${params.PIXELSPERELEMENT};
+  
+  const int width=${params.SCREENWIDTH};
+  const int height=${params.SCREENHEIGHT};
+  
+
+  //get cluster from world position
+  int getCluster(vec3 pos)
+  {
+      int x=int(pos.x* float(xsegment)/ float(width) );
+      int y=int(pos.y* float(ysegment)/ float(height) );
+      int z=int(pos.z* float(zsegment));     
+      int index=x+y*xsegment+z*xsegment*ysegment;     
+      return index;
+  }
 
   vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
     normap = normap * 2.0 - 1.0;
@@ -49,7 +73,7 @@ export default function(params) {
 
   Light UnpackLight(int index) {
     Light light;
-    float u = float(index + 1) / float(${params.numLights + 1});
+    float u = float(index + 1) / float(numLights + 1);
     vec4 v1 = texture2D(u_lightbuffer, vec2(u, 0.3));
     vec4 v2 = texture2D(u_lightbuffer, vec2(u, 0.6));
     light.position = v1.xyz;
@@ -57,7 +81,7 @@ export default function(params) {
     // LOOK: This extracts the 4th float (radius) of the (index)th light in the buffer
     // Note that this is just an example implementation to extract one float.
     // There are more efficient ways if you need adjacent values
-    light.radius = ExtractFloat(u_lightbuffer, ${params.numLights}, 2, index, 3);
+    light.radius = ExtractFloat(u_lightbuffer, numLights, 2, index, 3);
 
     light.color = v2.rgb;
     return light;
@@ -80,22 +104,101 @@ export default function(params) {
     vec3 normal = applyNormalMap(v_normal, normap);
 
     vec3 fragColor = vec3(0.0);
-
-    for (int i = 0; i < ${params.numLights}; ++i) {
-      Light light = UnpackLight(i);
+    
+    //How many clusters we have?
+    int numclusters=xsegment*ysegment*zsegment;
+     
+    vec3 world_pos;
+    
+    //which cluster is this fragment in?  
+    int index=getCluster( vec3(gl_FragCoord.x,gl_FragCoord.y,gl_FragCoord.z) ); //Get cluster index
+    
+    if(index<0)
+    {
+        index=0;
+    }
+    else if(index>numclusters)
+    {
+        index=numclusters-1;
+    }
+    
+     float u = float(index + 1) / float(numclusters + 1);
+     
+     //How many lights is in this cluster?
+     int NumLightsInCluster = int(texture2D(u_clusterbuffer, vec2(u, 0.0))[0]);
+
+    for(int i=1; i<maxlights; i++)
+    {
+       //WEBGL DOES NOT SUPPORT NON-FIXED LOOPING!!!
+      if(i>=NumLightsInCluster)
+      {
+        break;
+      }     
+      
+      //WEBGL HAS NO % OPERATION!!!!!!
+     
+      int clusterTexelIndex = i / 4;  
+      int reminder = i - 4 * clusterTexelIndex;
+              
+      float v = float(clusterTexelIndex + 1) / ceil(float(maxlights + 1) * 0.25  + 1.0);    
+     
+      vec4 clusterTexel = texture2D(u_clusterbuffer, vec2(u, v));
+
+       //Get light index
+       int light_index=1;
+       
+       //fetch
+       if (reminder == 0)      
+         light_index = int(clusterTexel[0]);      
+       else if (reminder == 1)     
+         light_index = int(clusterTexel[1]);      
+       else if (reminder == 2)      
+         light_index = int(clusterTexel[2]);
+       else if (reminder == 3)
+        light_index = int(clusterTexel[3]);
+       else     
+        continue;          
+      //
+       
+    
+      Light light = UnpackLight(light_index);     
       float lightDistance = distance(light.position, v_position);
       vec3 L = (light.position - v_position) / lightDistance;
-
       float lightIntensity = cubicGaussian(2.0 * lightDistance / light.radius);
       float lambertTerm = max(dot(L, normal), 0.0);
-
       fragColor += albedo * lambertTerm * light.color * vec3(lightIntensity);
+      
     }
-
+    
     const vec3 ambientLight = vec3(0.025);
     fragColor += albedo * ambientLight;
-
+    
     gl_FragColor = vec4(fragColor, 1.0);
+    
+    
+    //Toon Shader
+    //This isn't toon at all !!!
+    
+     int color_r;
+     int color_g;
+     int color_b;
+    
+    fragColor*=30.0;
+    
+    color_r=int(fragColor.x);
+    color_g=int(fragColor.y);
+    color_b=int(fragColor.z);
+    
+    color_r/=3;
+    color_g/=3;
+    color_b/=3;
+    
+    fragColor=vec3(color_r,color_g,color_b);
+
+    gl_FragColor = vec4(fragColor/10.0, 1.0);
+    
+    
+    
   }
   `;
-}
+}
\ No newline at end of file