Added some documentation, cleaned up some code, fleshed out the remaining work to make the project a little easier for newcomers to approach

shaders/imagePass.frag

@@ -6,6 +6,9 @@ varying vec2 vUV;
 
 void main() {
 	vec3 bgColor = texture2D(backgroundTex, vUV).rgb;
+
+	// Combine the texture and bloom, then blow it out to reveal more of the image
 	float brightness = pow(min(1., texture2D(tex, vUV).r * 2.) + texture2D(bloomTex, vUV).r, 1.5);
+	
 	gl_FragColor = vec4(bgColor * brightness, 1.0);
 }

shaders/palettePass.frag

@@ -17,7 +17,13 @@ highp float rand( const in vec2 uv, const in float t ) {
 
 void main() {
 	vec4 brightnessRGB = texture2D( tex, vUV ) + texture2D( bloomTex, vUV );
+
+	// Combine the texture and bloom
 	float brightness = brightnessRGB.r + brightnessRGB.g + brightnessRGB.b;
-	float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
-	gl_FragColor = texture2D( palette, vec2(at, 0.0)) + vec4(backgroundColor, 0.0);
+
+	// Dither: subtract a random value from the brightness
+	brightness = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
+
+	// Map the brightness to a position in the palette texture
+	gl_FragColor = texture2D( palette, vec2(brightness, 0.0)) + vec4(backgroundColor, 0.0);
 }

shaders/rain.frag

@@ -33,9 +33,10 @@ void main() {
 
 	vec2 uv = vUV;
 
+	// In normal mode, derives the current glyph and UV from vUV
 	if (!volumetric) {
 		if (isPolar) {
-			// Curves the UV space to make letters appear to radiate from up above
+			// Curved space that makes letters appear to radiate from up above
 			uv -= 0.5;
 			uv *= 0.5;
 			uv.y -= 0.5;
@@ -43,35 +44,29 @@ void main() {
 			float angle = atan(uv.y, uv.x) / (2. * PI) + 0.5;
 			uv = vec2(angle * 4. - 0.5, 1.5 - pow(radius, 0.5) * 1.5);
 		} else {
-			// Applies the slant, scaling the UV space
-			// to guarantee the viewport is still covered
+			// Applies the slant and scales space so the viewport is fully covered
 			uv = vec2(
-			(uv.x - 0.5) * slantVec.x + (uv.y - 0.5) * slantVec.y,
-			(uv.y - 0.5) * slantVec.x - (uv.x - 0.5) * slantVec.y
+				(uv.x - 0.5) * slantVec.x + (uv.y - 0.5) * slantVec.y,
+				(uv.y - 0.5) * slantVec.x - (uv.x - 0.5) * slantVec.y
 			) * slantScale + 0.5;
 		}
 		uv.y /= glyphHeightToWidth;
 	}
 
+	// Unpack the values from the data texture
 	vec4 glyph = volumetric ? vGlyph : texture2D(lastState, uv);
-
-	if (showComputationTexture) {
-		gl_FragColor = glyph;
-		return;
-	}
-
-	// Unpack the values from the font texture
 	float brightness = glyph.r;
 	float symbolIndex = getSymbolIndex(glyph.g);
 	float quadDepth = glyph.b;
 	float effect = glyph.a;
 
 	brightness = max(effect, brightness);
+	// In volumetric mode, distant glyphs are dimmer
 	if (volumetric) {
-		brightness = min(1.0, brightness * quadDepth * 1.25);
+		brightness = brightness * min(1.0, quadDepth);
 	}
 
-	// resolve UV to MSDF texture coord
+	// resolve UV to position of glyph in MSDF texture
 	vec2 symbolUV = vec2(mod(symbolIndex, glyphTextureColumns), floor(symbolIndex / glyphTextureColumns));
 	vec2 glyphUV = fract(uv * vec2(numColumns, numRows));
 	glyphUV -= 0.5;
@@ -79,10 +74,15 @@ void main() {
 	glyphUV += 0.5;
 	vec2 msdfUV = (glyphUV + symbolUV) / glyphTextureColumns;
 
-	// MSDF
+	// MSDF: calculate brightness of fragment based on distance to shape
 	vec3 dist = texture2D(glyphTex, msdfUV).rgb;
 	float sigDist = median3(dist) - 0.5;
 	float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
 
-	gl_FragColor = vec4(vChannel * brightness * alpha, 1.0);
+	if (showComputationTexture) {
+		gl_FragColor = vec4(glyph.rgb * alpha, 1.0);
+	} else {
+		gl_FragColor = vec4(vChannel * brightness * alpha, 1.0);
+	}
+
 }

shaders/rain.vert

@@ -26,6 +26,7 @@ void main() {
 	vUV = (aPosition + aCorner) * quadSize;
 	vGlyph = texture2D(lastState, aPosition * quadSize);
 
+	// Calculate the world space position
 	float quadDepth = 0.0;
 	if (volumetric && !showComputationTexture) {
 		quadDepth = fract(vGlyph.b + time * animationSpeed * forwardSpeed);
@@ -34,16 +35,17 @@ void main() {
 	vec2 position = (aPosition + aCorner * vec2(density, 1.)) * quadSize;
 	vec4 pos = vec4((position - 0.5) * 2.0, quadDepth, 1.0);
 
+	// "Resurrected" columns are in the green channel, 
+	// and are vertically flipped (along with their glyphs)
 	vChannel = vec3(1.0, 0.0, 0.0);
+	if (volumetric && rand(vec2(aPosition.x, 0)) < resurrectingCodeRatio) {
+		pos.y = -pos.y;
+		vChannel = vec3(0.0, 1.0, 0.0);
+	}
 
+	// Convert the world space position to screen space
 	if (volumetric) {
-		if (rand(vec2(aPosition.x, 0)) < resurrectingCodeRatio) {
-			pos.y = -pos.y;
-			vChannel = vec3(0.0, 1.0, 0.0);
-		}
-
 		pos.x /= glyphHeightToWidth;
-
 		pos = camera * transform * pos;
 	} else {
 		pos.xy *= screenSize;

shaders/stripePass.frag

@@ -17,7 +17,11 @@ highp float rand( const in vec2 uv, const in float t ) {
 
 void main() {
 	vec3 color = texture2D(stripes, vUV).rgb;
+	// Combine the texture and bloom
 	float brightness = min(1., texture2D(tex, vUV).r * 2.) + texture2D(bloomTex, vUV).r;
-	float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
-	gl_FragColor = vec4(color * at + backgroundColor, 1.0);
+
+	// Dither: subtract a random value from the brightness
+	brightness = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
+	
+	gl_FragColor = vec4(color * brightness + backgroundColor, 1.0);
 }