fixed - flickering from f+ fshader &updateClusters

Hannah Bollar · Hannah Bollar · commit f65b324d3bf7 · 2018-10-26T06:21:28.000-04:00
diff --git a/src/renderers/base.js b/src/renderers/base.js
@@ -1,12 +1,26 @@
-import { mat4, vec4, vec3 } from 'gl-matrix';
+import { mat4, vec4, vec3, vec2 } from 'gl-matrix';
 import { NUM_LIGHTS } from '../scene';
 import { LIGHT_RADIUS } from '../scene';
 import TextureBuffer from './textureBuffer';
 
 export const MAX_LIGHTS_PER_CLUSTER = 100;
-
 const PI_DIV_360 = 0.00872664625;
 
+function sin_atan(angle) {
+  return angle / Math.sqrt(1.0 + angle * angle);
+}
+function cos_atan(angle) {
+  return 1.0 / Math.sqrt(1.0 + angle * angle);
+}
+
+function getNormalComponents(angle) {
+
+    let bigHypot = Math.sqrt(1 + angle*angle);
+    let normSide1 = 1 / bigHypot;
+    let normSide2 = -angle*normSide1;
+    return vec2.fromValues(normSide1, normSide2);
+}
+
 export default class BaseRenderer {
   constructor(xSlices, ySlices, zSlices) {
     // Create a texture to store cluster data. Each cluster stores the number of lights followed by the light indices
@@ -32,71 +46,133 @@ export default class BaseRenderer {
     }
 
     // calculate frustum dimensions (proportional based on depth adjustment added later)
-    let frustum_height = Math.abs(2.0 * Math.tan(camera.fov * PI_DIV_360));
-    let frustum_width = Math.abs(camera.aspect * frustum_height);
-    // total depth and z stride are unaffected by depth of light
-    let frustum_total_depth = camera.far - camera.near;
-    let stride_z = this._zSlices / frustum_total_depth;
+    const half_frustum_height = Math.tan(camera.fov * PI_DIV_360);
+    const frustum_height = 2.0 * half_frustum_height;
+    const frustum_width = camera.aspect * frustum_height;
+    const half_frustum_width = 0.5 * frustum_width;
+    const frustum_depth = camera.far - camera.near;
+
+    const stride_x = frustum_width / this._xSlices;
+    const stride_y = frustum_height / this._ySlices;
+    const stride_z = frustum_depth / this._zSlices;
+
+    const height_starting_index = -half_frustum_height;
+    const width_starting_index = -half_frustum_width;
+
+    // predeclaring some variables to prevent javascript memory overhead
+    let light_radius = 0;  let light_position = vec4.create();
+    let found_min = false;
 
-    let light_position = vec4.create();
     // Loop through lights counting number of lights at each buffer index 
     // and placing light in appropr loc in buffer for calcs
     for (let on_light = 0; on_light < NUM_LIGHTS; ++on_light) {
       // create variables of light's information
-      let light = scene.lights[on_light];
-      let light_radius = light.radius;
-      let light_position = vec4.fromValues(light.position[0], light.position[1], light.position[2], 1);
+      light_radius = scene.lights[on_light].radius;
+      light_position = vec4.fromValues(scene.lights[on_light].position[0],
+                                           scene.lights[on_light].position[1],
+                                           scene.lights[on_light].position[2],
+                                           1);
       vec4.transformMat4(light_position, light_position, viewMatrix);
 
       // for calculations need (-) of curr depth value bc of coordinate system
-      light_position[2] *= -1;
+      light_position[2] *= -1.0;
 
-      // frustum dimensions and values affected by light's depth
-      let frustum_height_at_depth = frustum_height * light_position[2];
-      let frustum_width_at_depth = frustum_width * light_position[2];
-      let stride_y = this._ySlices / frustum_height_at_depth; 
-      let stride_x = this._xSlices / frustum_width_at_depth;
 
+      /*
+       * Calculate relevant z depth frustum bounds
+       */
       // check which cluster slices would actually be influenced by this light
-      let cluster_z_min = Math.floor((light_position[2] - light_radius - camera.near) * stride_z);
-      let cluster_z_max = Math.floor((light_position[2] + light_radius - camera.near) * stride_z);
-      let cluster_y_min = Math.floor((light_position[1] - light_radius + frustum_height_at_depth * 0.5) * stride_y);
-      let cluster_y_max = Math.floor((light_position[1] + light_radius + frustum_height_at_depth * 0.5) * stride_y);
-      let cluster_x_min = Math.floor((light_position[0] - light_radius + frustum_width_at_depth * 0.5) * stride_x);
-      let cluster_x_max = Math.floor((light_position[0] + light_radius + frustum_width_at_depth * 0.5) * stride_x);
-
+      // using math.floor bc these are cluster indices
+      let cluster_z_min = Math.floor((light_position[2] - light_radius - camera.near) / stride_z);
+      let cluster_z_max = Math.floor((light_position[2] + light_radius - camera.near) / stride_z) + 1;
       // check if valid index locations for cluster structure dimensions - if not, then not visible so ignore
-      if ( (cluster_x_min >= this._xSlices || cluster_x_max < 0)
-        || (cluster_y_min >= this._ySlices || cluster_y_max < 0) 
-        || (cluster_z_min >= this._zSlices || cluster_z_max < 0) ) {
+      if (cluster_z_min >= this._zSlices || cluster_z_max < 0) {
         continue;
       }
-
       // cluster ranges can go outside bounds as long as overlapping with in-bounds locations
       // clamp cluster range to 0 -> slice bounds for each dimension
-      // using sliceCount - 1, because indexing domain is [0, length - 1]
-      cluster_x_min = Math.max(cluster_x_min, 0); cluster_x_max = Math.min(cluster_x_max, this._xSlices - 1);
-      cluster_y_min = Math.max(cluster_y_min, 0); cluster_y_max = Math.min(cluster_y_max, this._ySlices - 1);
-      cluster_z_min = Math.max(cluster_z_min, 0); cluster_z_max = Math.min(cluster_z_max, this._zSlices - 1);
+      cluster_z_min = Math.max(cluster_z_min, 0); cluster_z_max = Math.min(cluster_z_max, this._zSlices);
+
+      /*
+       * Calculate relevant x width frustum bounds
+       */
+      let cluster_x_min = this._xSlices;
+      let cluster_x_max = this._xSlices;
+      for(let x = 0; x <= this._xSlices; ++x) {
+        let angle = width_starting_index + stride_x * x;
+
+        // normal here: cosatan(angle), 0, -sinatan(angle) 
+        // dot between light position and normal
+        // dot simplified below
+
+        let dot = light_position[0] * cos_atan(angle) - light_position[2] * sin_atan(angle);
+        if(dot < light_radius) {
+          cluster_x_min = Math.max(0, x - 1);
+          break;
+        } 
+      }
+      for(let x = cluster_x_min + 1; x <= this._xSlices; ++x) {
+        let angle = width_starting_index + stride_x * x;
+
+        // normal here: cosatan(angle), 0, -sinatan(angle) 
+        // dot between light position and normal
+        // dot simplified below
+        let dot = light_position[0] * cos_atan(angle) - light_position[2] * sin_atan(angle);
+        if(dot < -light_radius) {
+          cluster_x_max = Math.max(0, x - 1);
+          break;
+        } 
+      }
+
+      /*
+       * Calculate relevant y height frustum bounds
+       */
+      let cluster_y_min = this._ySlices;
+      let cluster_y_max = this._ySlices;
+      for(let y = 0; y <= this._ySlices; ++y) {
+        let angle = height_starting_index + stride_y * y;
+
+        // normal here: 0, cosatan(angle), -sinatan(angle) 
+        // dot between light position and normal
+        // dot simplified below
+        let dot = light_position[1] * cos_atan(angle) - light_position[2] * sin_atan(angle);
+        if(dot < light_radius) {
+          cluster_y_min = Math.max(0, y - 1);
+          break;
+        } 
+      }
+      for (let y = 0; y <= this._ySlices; ++y) {
+        let angle = height_starting_index + stride_y * y;
+
+        // normal here: 0, cosatan(angle), -sinatan(angle) 
+        // dot between light position and normal
+        // dot simplified below
+        let dot = light_position[1] * cos_atan(angle) - light_position[2] * sin_atan(angle);
+        if(dot < -light_radius) {
+          cluster_y_max = Math.max(0, y - 1);
+          break;
+        }
+      }
 
       // fill in buffer locations where this light's influence should be included
-      for (let z = cluster_z_min; z <= cluster_z_max; ++z) {
-        for (let y = cluster_y_min; y <= cluster_y_max; ++y) {
-          for (let x = cluster_x_min; x <= cluster_x_max; ++x) {
-            let index_1D = x + y*this._xSlices + z*this._xSlices*this._ySlices;
+      for (let z = cluster_z_min; z < cluster_z_max; ++z) {
+        for (let y = cluster_y_min; y < cluster_y_max; ++y) {
+          for (let x = cluster_x_min; x < cluster_x_max; ++x) {
+            let index_1D =  x
+                          + y * this._xSlices
+                          + z * this._xSlices * this._ySlices;
             let index_light_count = this._clusterTexture.bufferIndex(index_1D, 0);
 
             // new light count with this light added to this cluster
-            let num_lights_in_cluster = 1 + this._clusterTexture.buffer[index_light_count];
+            let num_lights_in_cluster = 1.0 + this._clusterTexture.buffer[index_light_count];
 
             // check if updating count based on this light
             if (num_lights_in_cluster <= MAX_LIGHTS_PER_CLUSTER) {
-              this._clusterTexture.buffer[index_light_count] = num_lights_in_cluster;
+              let tex_pixel = Math.floor(num_lights_in_cluster * 0.25);
+              let index_to_fill = this._clusterTexture.bufferIndex(index_1D, tex_pixel);
+              let this_index = num_lights_in_cluster - tex_pixel * 4;
 
-              let row = Math.floor(num_lights_in_cluster * 0.25);
-              let distance_to_pixel_baseline = num_lights_in_cluster - 4 * row;
-              let index_to_fill = this._clusterTexture.bufferIndex(index_1D, row) + distance_to_pixel_baseline;
-              this._clusterTexture.buffer[index_to_fill] = on_light;
+              this._clusterTexture.buffer[index_to_fill + this_index] = on_light;
               this._clusterTexture.buffer[index_light_count] = num_lights_in_cluster;
             }
 
diff --git a/src/renderers/forwardPlus.js b/src/renderers/forwardPlus.js
@@ -1,5 +1,5 @@
 import { gl } from '../init';
-import { mat4, vec4, vec3 } from 'gl-matrix';
+import { mat4, vec4, vec3, vec2 } from 'gl-matrix';
 import { loadShaderProgram } from '../utils';
 import { NUM_LIGHTS } from '../scene';
 import { MAX_LIGHTS_PER_CLUSTER } from './base.js'
@@ -18,9 +18,12 @@ export default class ForwardPlusRenderer extends BaseRenderer {
     this._shaderProgram = loadShaderProgram(vsSource, fsSource({
       numLights: NUM_LIGHTS,
       numLights_perCluster: MAX_LIGHTS_PER_CLUSTER,
+      slices_x: xSlices,
+      slices_y: ySlices,
+      slices_z: zSlices
     }), {
       uniforms: ['u_viewProjectionMatrix', 'u_colmap', 'u_normap', 'u_lightbuffer', 'u_clusterbuffer',
-                 'u_slice_dimensions', 'u_resolution', 'u_near_clip', 'u_far_clip', 'u_camera_position'],
+                 'u_view_matrix', 'u_screen_dimensions', 'u_near_clip', 'u_far_clip', 'u_slices'],
       attribs: ['a_position', 'a_normal', 'a_uv'],
     });
 
@@ -80,11 +83,9 @@ export default class ForwardPlusRenderer extends BaseRenderer {
     gl.uniform1i(this._shaderProgram.u_clusterbuffer, 3);
 
     // Bind any other shader inputs
-    gl.uniform3f(this._shaderProgram.u_slice_dimensions, this._xSlices, this._ySlices, this._zSlices);
-    gl.uniform2f(this._shaderProgram.u_resolution, canvas.width, canvas.height); 
+    gl.uniform2f(this._shaderProgram.u_screen_dimensions, canvas.width, canvas.height);
     gl.uniform1f(this._shaderProgram.u_near_clip, camera.near); 
     gl.uniform1f(this._shaderProgram.u_far_clip, camera.far);
-    gl.uniform3f(this._shaderProgram.u_camera_position, camera.position.x, camera.position.y, camera.position.z);
 
     // Draw the scene. This function takes the shader program so that the model's textures can be bound to the right inputs
     scene.draw(this._shaderProgram);
diff --git a/src/shaders/forwardPlus.frag.glsl.js b/src/shaders/forwardPlus.frag.glsl.js
@@ -13,11 +13,9 @@ export default function(params) {
   uniform sampler2D u_clusterbuffer;
 
   uniform mat4 u_view_matrix;
-  uniform vec3 u_slice_dimensions;
-  uniform vec2 u_resolution;
+  uniform vec2 u_screen_dimensions;
   uniform float u_near_clip;
   uniform float u_far_clip;
-  uniform vec3 u_camera_position;
 
   varying vec3 v_position;
   varying vec3 v_normal;
@@ -86,37 +84,54 @@ export default function(params) {
     vec3 normap = texture2D(u_normap, v_uv).xyz;
     vec3 normal = applyNormalMap(v_normal, normap);
 
-    vec4 pos = u_view_matrix * vec4(v_position, 1.0);
+    int u_slices_x = ${params.slices_x};
+    int u_slices_y = ${params.slices_y};
+    int u_slices_z = ${params.slices_z};
+
+    vec4 camera_pos4 = u_view_matrix * vec4(v_position, 1.0);
+    vec3 camera_pos3 = vec3(camera_pos4);
 
     // locate fragment's cluster
-    vec3 loc = vec3(floor(gl_FragCoord.x * u_slice_dimensions.x / u_resolution.x),
-                    floor(gl_FragCoord.y * u_slice_dimensions.y / u_resolution.y),
-                    floor((-pos.z - u_near_clip) * u_slice_dimensions.z / (u_far_clip - u_near_clip))
-                    );
+    int loc_x = int(gl_FragCoord.x * float(u_slices_x) / u_screen_dimensions.x);
+    int loc_y = int(gl_FragCoord.y * float(u_slices_y) / u_screen_dimensions.y);
+    int loc_z = int((-camera_pos4.z - u_near_clip) * float(u_slices_z) / (u_far_clip - u_near_clip));
 
     // get rest of cluster information - left as floats for math ease
-    float index_of_cluster = 
-      loc.x + loc.y * u_slice_dimensions.x + loc.z * u_slice_dimensions.x * u_slice_dimensions.y;
-    float num_clusters = u_slice_dimensions.x * u_slice_dimensions.y * u_slice_dimensions.z;
+    int index_of_cluster =  loc_x
+                          + loc_y * u_slices_x
+                          + loc_z * u_slices_x * u_slices_y;
+    int num_clusters = u_slices_x * u_slices_y * u_slices_z;
 
     // offset by 1 for both bc indexing in [0, length - 1]
-    float row = (index_of_cluster + 1.0) / (num_clusters + 1.0);
+    vec2 tex_uv = vec2( float(index_of_cluster + 1) / float(num_clusters + 1),
+                        0);
 
-    int light_count = int(texture2D(u_clusterbuffer, vec2(row, 0))[0]);
+    int light_count = int(texture2D(u_clusterbuffer, tex_uv)[0]);
+    float texture_height = floor(float(${params.numLights_perCluster} + 1) * 0.25) + 1.0;
 
     // begin color calculation based on cluster information
     vec3 fragColor = vec3(0.0);
-    for (int i = 0; i < ${params.numLights_perCluster}; ++i) {
-      // check
+    for (int i = 0; i < ${params.numLights}; ++i) {
       if (i >= light_count) {
         break;
       }
 
-      float light_index = ExtractFloat( u_clusterbuffer,
-                                          int(num_clusters),
-                                          ${Math.floor((params.numLights_perCluster + 1) / 4)},
-                                          int(index_of_cluster),
-                                          int(i + 1) );
+      float next = float(i + 1);
+
+      // texel: 'pixel' in the texture
+      // find texel's information
+      // having indexing issue in method so rewriting impl here
+      float texel_idx = floor(next * 0.25);
+      tex_uv[1] = (texel_idx + 1.0) / (texture_height + 1.0);
+      vec4 texel = texture2D(u_clusterbuffer, tex_uv);
+      int texel_component = int(next - 4.0 * texel_idx);
+      // note: cant just call array loc on texel_component value bc non const, so doesnt compile
+      float light_index = (texel_component == 0) ? texel[0] :
+                          (texel_component == 1) ? texel[1] :
+                          (texel_component == 2) ? texel[2] :
+                                                   texel[3];
+
+      // doing the lighting calculations
       Light light = UnpackLight(int(light_index));
       float lightDistance = distance(light.position, v_position);
       vec3 L = (light.position - v_position) / lightDistance;
@@ -125,15 +140,15 @@ export default function(params) {
       float lambertTerm = max(dot(L, normal), 0.0);
 
       // regular shading
-      //fragColor += albedo * lambertTerm * light.color * vec3(lightIntensity);
+      // fragColor += albedo * lambertTerm * light.color * vec3(lightIntensity);
 
       // blinn-phong
-      vec3 view_dir = normalize(u_camera_position - v_position);
-      vec3 half_vec_for_calc = normalize(L + view_dir);
-      float specularTerm = pow(max(dot(normal, half_vec_for_calc), 0.0), 50.0);
+      vec3 half_vec_for_calc = normalize(L + camera_pos3 - v_position);
+      float specularTerm = pow(max(dot(normal, half_vec_for_calc), 0.0), 200.0);
       fragColor += (albedo + vec3(specularTerm)) * lambertTerm * light.color * lightIntensity;
     }
 
+
     const vec3 ambientLight = vec3(0.025);
     fragColor += albedo * ambientLight;
 
