src/music/features/visualizer/shaders/fragments.glsl

@@ -1,4 +1,8 @@
 #version 300 es
+//FRAGMENT SHADER
+//
+// Basic fragment shader, just passes along colors, we don't do much
+// with textures or anything else complex in this project.
 
 precision highp float;
 

src/music/features/visualizer/shaders/vertices.glsl

@@ -1,5 +1,10 @@
 #version 300 es
+//VERTEX SHADER
+//
+// Takes vertices of a unit cube, scales them up along Y according to
+// aHeight, and colors them with basic diffuse shading.
 
+#define CLEAR_COLOR vec4(0.0, 0.0, 0.0, 1.0)
 #define BASE_COLOR vec4(1.0, 1.0, 1.0, 1.0)
 #define AMBIENT_LIGHT vec3(0.3, 0.3, 0.3)
 #define LIGHT_DIRECTION normalize(vec3(0.85, 0.8, 0.75))
@@ -17,24 +22,28 @@ uniform mat4 uProjectionMatrix;
 uniform mat4 uNormalMatrix;
 
 void main() {
+  // The X position of each vertex depends on its cube's instance;
+  // they should align to the X axis.
   float instanceX =
-      aVertexPosition.x + float(gl_InstanceID) * 2.0 * abs(aVertexPosition.x);
+      float(gl_InstanceID * 2) * abs(aVertexPosition.x) + aVertexPosition.x;
+  // Since we want to scale the boxes by their frequencies, make the Y
+  // positions of any vertices that are > 0 (1, because this is a
+  // cube) = the height of the frequency.
   float vertexY =
       aVertexPosition.y > 0.0 ? aVertexPosition.y * aHeight : aVertexPosition.y;
 
   gl_Position = uProjectionMatrix * uModelViewMatrix *
                 vec4(instanceX, vertexY, aVertexPosition.zw);
 
-  vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
-  float directionalLight =
-      max(dot(transformedNormal.xyz, LIGHT_DIRECTION), 0.0);
-
   if (aHeight == 0.0) {
-    vColor = vec4(0.0, 0.0, 0.0, 0.0);
+    // Don't render cubes that don't currently have a height
+    // (frequency = 0)
+    vColor = CLEAR_COLOR;
   } else {
+    // Properly shade and color any other cubes
     vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
     float directionalLight =
         max(dot(transformedNormal.xyz, LIGHT_DIRECTION), 0.0);
-    vColor = vec4(AMBIENT_LIGHT + (directionalLight * LIGHT_COLOR), 1.0);
+    vColor = vec4(directionalLight * LIGHT_COLOR + AMBIENT_LIGHT, 1.0);
   }
 }