Rearranging the shaders and scripts to hopefully make the project easier to work on

shaders/glsl/blur.frag.glsl

@@ -0,0 +1,24 @@
+precision mediump float;
+uniform float width, height;
+uniform sampler2D tex;
+uniform vec2 direction;
+varying vec2 vUV;
+void main() {
+	vec2 size = width > height ? vec2(width / height, 1.) : vec2(1., height / width);
+	gl_FragColor =
+		texture2D(tex, vUV) * 0.442 +
+		(
+			texture2D(tex, vUV + direction / max(width, height) * size) +
+			texture2D(tex, vUV - direction / max(width, height) * size)
+		) * 0.279;
+	// gl_FragColor =
+	// 	texture2D(tex, vUV) * 0.38774 +
+	// 	(
+	// 		texture2D(tex, vUV + direction / max(width, height) * size * 0.5) +
+	// 		texture2D(tex, vUV - direction / max(width, height) * size * 0.5)
+	// 	) * 0.24477 +
+	// 	(
+	// 		texture2D(tex, vUV + direction / max(width, height) * size) +
+	// 		texture2D(tex, vUV - direction / max(width, height) * size)
+	// 	) * 0.06136;
+}

shaders/glsl/highPass.frag.glsl

@@ -0,0 +1,11 @@
+precision mediump float;
+varying vec2 vUV;
+uniform sampler2D tex;
+uniform float highPassThreshold;
+void main() {
+	vec4 color = texture2D(tex, vUV);
+	if (color.r < highPassThreshold) color.r = 0.0;
+	if (color.g < highPassThreshold) color.g = 0.0;
+	if (color.b < highPassThreshold) color.b = 0.0;
+	gl_FragColor = color;
+}

shaders/glsl/imagePass.frag.glsl

@@ -0,0 +1,14 @@
+precision mediump float;
+uniform sampler2D tex;
+uniform sampler2D bloomTex;
+uniform sampler2D backgroundTex;
+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/glsl/palettePass.frag.glsl

@@ -0,0 +1,29 @@
+precision mediump float;
+#define PI 3.14159265359
+
+uniform sampler2D tex;
+uniform sampler2D bloomTex;
+uniform sampler2D palette;
+uniform float ditherMagnitude;
+uniform float time;
+uniform vec3 backgroundColor;
+varying vec2 vUV;
+
+highp float rand( const in vec2 uv, const in float t ) {
+	const highp float a = 12.9898, b = 78.233, c = 43758.5453;
+	highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
+	return fract(sin(sn) * c + t);
+}
+
+void main() {
+	vec4 brightnessRGB = texture2D( tex, vUV ) + texture2D( bloomTex, vUV );
+
+	// Combine the texture and bloom
+	float brightness = brightnessRGB.r + brightnessRGB.g + brightnessRGB.b;
+
+	// 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/glsl/rainPass.compute.frag.glsl

@@ -0,0 +1,196 @@
+precision highp float;
+
+// This shader is the star of the show. For each glyph, it determines its:
+// 		R: brightness
+// 		G: progress through the glyph sequence
+// 		B: depth, aka distance from the screen
+// 		A: additional brightness for effects
+
+// Listen.
+// I understand if this shader looks confusing. Please don't be discouraged!
+// It's just a handful of sine and fract functions. Try commenting parts out to learn
+// how the different steps combine to produce the result. And feel free to reach out. -RM
+
+#define PI 3.14159265359
+#define SQRT_2 1.4142135623730951
+#define SQRT_5 2.23606797749979
+
+uniform sampler2D previousState;
+uniform float numColumns, numRows;
+uniform float time, tick, cycleFrameSkip;
+uniform float animationSpeed, fallSpeed, cycleSpeed;
+
+uniform bool hasSun, hasThunder;
+uniform bool showComputationTexture;
+uniform float brightnessOverride, brightnessThreshold, brightnessDecay;
+uniform float raindropLength, glyphHeightToWidth;
+uniform int cycleStyle, rippleType;
+uniform float rippleScale, rippleSpeed, rippleThickness;
+uniform float cursorEffectThreshold;
+
+// Helper functions for generating randomness, borrowed from elsewhere
+
+highp float randomFloat( const in vec2 uv ) {
+	const highp float a = 12.9898, b = 78.233, c = 43758.5453;
+	highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
+	return fract(sin(sn) * c);
+}
+
+vec2 randomVec2( const in vec2 uv ) {
+	return fract(vec2(sin(uv.x * 591.32 + uv.y * 154.077), cos(uv.x * 391.32 + uv.y * 49.077)));
+}
+
+float wobble(float x) {
+	return x + 0.3 * sin(SQRT_2 * x) + 0.2 * sin(SQRT_5 * x);
+}
+
+// Core functions
+
+// Rain time is the shader's key underlying concept.
+// It's why glyphs that share a column are lit simultaneously, and are brighter toward the bottom.
+float getRainTime(float simTime, vec2 glyphPos) {
+	float columnTimeOffset = randomFloat(vec2(glyphPos.x, 0.)) * 1000.;
+	float columnSpeedOffset = randomFloat(vec2(glyphPos.x + 0.1, 0.)) * 0.5 + 0.5;
+	// columnSpeedOffset = 0.; // TODO: loop
+	float columnTime = columnTimeOffset + simTime * fallSpeed * columnSpeedOffset;
+	return (glyphPos.y * 0.01 + columnTime) / raindropLength;
+}
+
+float getBrightness(float rainTime) {
+	float value = 1. - fract(wobble(rainTime));
+	// value = 1. - fract(rainTime); // TODO: loop
+	return log(value * 1.25) * 3.;
+}
+
+float getCycleSpeed(float rainTime, float brightness) {
+	float localCycleSpeed = 0.;
+	if (cycleStyle == 0 && brightness > 0.) {
+		localCycleSpeed = pow(1. - brightness, 4.);
+	} else if (cycleStyle == 1) {
+		localCycleSpeed = fract(rainTime);
+	}
+	return animationSpeed * cycleSpeed * localCycleSpeed;
+}
+
+// Additional effects
+
+float applySunShowerBrightness(float brightness, vec2 screenPos) {
+	if (brightness >= -4.) {
+		brightness = pow(fract(brightness * 0.5), 3.) * screenPos.y * 1.5;
+	}
+	return brightness;
+}
+
+float applyThunderBrightness(float brightness, float simTime, vec2 screenPos) {
+	simTime *= 0.5;
+	float thunder = 1. - fract(wobble(simTime));
+	// thunder = 1. - fract(simTime + 0.3); // TODO: loop
+
+	thunder = log(thunder * 1.5) * 4.;
+	thunder = clamp(thunder, 0., 1.);
+	thunder = thunder * pow(screenPos.y, 2.) * 3.;
+	return brightness + thunder;
+}
+
+float applyRippleEffect(float effect, float simTime, vec2 screenPos) {
+	if (rippleType == -1) {
+		return effect;
+	}
+
+	float rippleTime = (simTime * 0.5 + sin(simTime) * 0.2) * rippleSpeed + 1.; // TODO: clarify
+	// rippleTime = (simTime * 0.5) * rippleSpeed + 1.; // TODO: loop
+
+	vec2 offset = randomVec2(vec2(floor(rippleTime), 0.)) - 0.5;
+	// offset = vec2(0.); // TODO: loop
+	vec2 ripplePos = screenPos * 2. - 1. + offset;
+	float rippleDistance;
+	if (rippleType == 0) {
+		vec2 boxDistance = abs(ripplePos) * vec2(1., glyphHeightToWidth);
+		rippleDistance = max(boxDistance.x, boxDistance.y);
+	} else if (rippleType == 1) {
+		rippleDistance = length(ripplePos);
+	}
+
+	float rippleValue = fract(rippleTime) * rippleScale - rippleDistance;
+
+	if (rippleValue > 0. && rippleValue < rippleThickness) {
+		effect += 0.75;
+	}
+
+	return effect;
+}
+
+float applyCursorEffect(float effect, float brightness) {
+	if (brightness >= cursorEffectThreshold) {
+		effect = 1.;
+	}
+	return effect;
+}
+
+// Main function
+
+vec4 computeResult(bool isFirstFrame, vec4 previousResult, vec2 glyphPos, vec2 screenPos) {
+
+	// Determine the glyph's local time.
+	float simTime = time * animationSpeed;
+	float rainTime = getRainTime(simTime, glyphPos);
+
+	// Rain time is the backbone of this effect.
+
+	// Determine the glyph's brightness.
+	float previousBrightness = previousResult.r;
+	float brightness = getBrightness(rainTime);
+	if (hasSun) {
+		brightness = applySunShowerBrightness(brightness, screenPos);
+	}
+	if (hasThunder) {
+		brightness = applyThunderBrightness(brightness, simTime, screenPos);
+	}
+
+	// Determine the glyph's cycle— the percent this glyph has progressed through the glyph sequence
+	float previousCycle = previousResult.g;
+	bool resetGlyph = isFirstFrame; // || previousBrightness <= 0.; // TODO: loop
+	if (resetGlyph) {
+		previousCycle = showComputationTexture ? 0. : randomFloat(screenPos);
+	}
+	float localCycleSpeed = getCycleSpeed(rainTime, brightness);
+	float cycle = previousCycle;
+	if (mod(tick, cycleFrameSkip) == 0.) {
+		cycle = fract(previousCycle + 0.005 * localCycleSpeed * cycleFrameSkip);
+	}
+
+	// Determine the glyph's effect— the amount the glyph lights up for other reasons
+	float effect = 0.;
+	effect = applyRippleEffect(effect, simTime, screenPos); // Round or square ripples across the grid
+	effect = applyCursorEffect(effect, brightness); // The bright glyphs at the "bottom" of raindrops
+
+	// Modes that don't fade glyphs set their actual brightness here
+	if (brightnessOverride > 0. && brightness > brightnessThreshold) {
+		brightness = brightnessOverride;
+	}
+
+	// Blend the glyph's brightness with its previous brightness, so it winks on and off organically
+	if (!isFirstFrame) {
+		brightness = mix(previousBrightness, brightness, brightnessDecay);
+	}
+
+	// Determine the glyph depth. This is a static value for each column.
+	float depth = randomFloat(vec2(screenPos.x, 0.));
+
+	vec4 result = vec4(brightness, cycle, depth, effect);
+
+	// Better use of the blue channel, for demonstrating how the glyph cycle works
+	if (showComputationTexture) {
+		result.b = min(1., localCycleSpeed);
+	}
+
+	return result;
+}
+
+void main()	{
+	bool isFirstFrame = tick <= 1.;
+	vec2 glyphPos = gl_FragCoord.xy;
+	vec2 screenPos = glyphPos / vec2(numColumns, numRows);
+	vec4 previousResult = texture2D( previousState, screenPos );
+	gl_FragColor = computeResult(isFirstFrame, previousResult, glyphPos, screenPos);
+}

shaders/glsl/rainPass.frag.glsl

@@ -0,0 +1,88 @@
+#define PI 3.14159265359
+#ifdef GL_OES_standard_derivatives
+#extension GL_OES_standard_derivatives: enable
+#endif
+precision lowp float;
+
+uniform sampler2D state;
+uniform float numColumns, numRows;
+uniform sampler2D glyphTex;
+uniform float glyphHeightToWidth, glyphSequenceLength, glyphTextureColumns, glyphEdgeCrop;
+uniform vec2 slantVec;
+uniform float slantScale;
+uniform bool isPolar;
+uniform bool showComputationTexture;
+uniform bool volumetric;
+
+varying vec2 vUV;
+varying vec3 vChannel;
+varying vec4 vGlyph;
+
+float median3(vec3 i) {
+	return max(min(i.r, i.g), min(max(i.r, i.g), i.b));
+}
+
+float getSymbolIndex(float glyphCycle) {
+	float symbol = floor(glyphSequenceLength * glyphCycle);
+	float symbolX = mod(symbol, glyphTextureColumns);
+	float symbolY = ((glyphTextureColumns - 1.0) - (symbol - symbolX) / glyphTextureColumns);
+	return symbolY * glyphTextureColumns + symbolX;
+}
+
+void main() {
+
+	vec2 uv = vUV;
+
+	// In normal mode, derives the current glyph and UV from vUV
+	if (!volumetric) {
+		if (isPolar) {
+			// Curved space that makes letters appear to radiate from up above
+			uv -= 0.5;
+			uv *= 0.5;
+			uv.y -= 0.5;
+			float radius = length(uv);
+			float angle = atan(uv.y, uv.x) / (2. * PI) + 0.5;
+			uv = vec2(fract(angle * 4. - 0.5), 1.5 * (1. - sqrt(radius)));
+		} else {
+			// 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
+			) * slantScale + 0.5;
+		}
+		uv.y /= glyphHeightToWidth;
+	}
+
+	// Unpack the values from the data texture
+	vec4 glyph = volumetric ? vGlyph : texture2D(state, uv);
+	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 = brightness * min(1.0, quadDepth);
+	}
+
+	// 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;
+	glyphUV *= clamp(1.0 - glyphEdgeCrop, 0.0, 1.0);
+	glyphUV += 0.5;
+	vec2 msdfUV = (glyphUV + symbolUV) / glyphTextureColumns;
+
+	// 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);
+
+	if (showComputationTexture) {
+		gl_FragColor = vec4(glyph.rgb * alpha, 1.0);
+	} else {
+		gl_FragColor = vec4(vChannel * brightness * alpha, 1.0);
+	}
+
+}

shaders/glsl/rainPass.vert.glsl

@@ -0,0 +1,55 @@
+#define PI 3.14159265359
+precision lowp float;
+attribute vec2 aPosition, aCorner;
+uniform sampler2D state;
+uniform float density;
+uniform vec2 quadSize;
+uniform float glyphHeightToWidth, glyphVerticalSpacing;
+uniform mat4 camera, transform;
+uniform vec2 screenSize;
+uniform float time, animationSpeed, forwardSpeed;
+uniform bool volumetric;
+uniform bool showComputationTexture;
+uniform float resurrectingCodeRatio;
+varying vec2 vUV;
+varying vec3 vChannel;
+varying vec4 vGlyph;
+
+highp float rand( const in vec2 uv ) {
+	const highp float a = 12.9898, b = 78.233, c = 43758.5453;
+	highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
+	return fract(sin(sn) * c);
+}
+
+void main() {
+
+	vUV = (aPosition + aCorner) * quadSize;
+	vGlyph = texture2D(state, aPosition * quadSize);
+
+	// Calculate the world space position
+	float quadDepth = 0.0;
+	if (volumetric && !showComputationTexture) {
+		quadDepth = fract(vGlyph.b + time * animationSpeed * forwardSpeed);
+		vGlyph.b = quadDepth;
+	}
+	vec2 position = (aPosition * vec2(1., glyphVerticalSpacing) + 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) {
+		pos.x /= glyphHeightToWidth;
+		pos = camera * transform * pos;
+	} else {
+		pos.xy *= screenSize;
+	}
+
+	gl_Position = pos;
+}

shaders/glsl/resurrectionPass.frag.glsl

@@ -0,0 +1,58 @@
+precision mediump float;
+#define PI 3.14159265359
+
+uniform sampler2D tex;
+uniform sampler2D bloomTex;
+uniform float ditherMagnitude;
+uniform float time;
+uniform vec3 backgroundColor;
+varying vec2 vUV;
+
+highp float rand( const in vec2 uv, const in float t ) {
+	const highp float a = 12.9898, b = 78.233, c = 43758.5453;
+	highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
+	return fract(sin(sn) * c + t);
+}
+
+float rgbComponent(float p, float q, float t) {
+	if (t < 0.0) t += 1.0;
+	if (t > 1.0) t -= 1.0;
+	if (t < 1.0 / 6.0) return p + (q - p) * 6.0 * t;
+	if (t < 1.0 / 2.0) return q;
+	if (t < 2.0 / 3.0) return p + (q - p) * (2.0 / 3.0 - t) * 6.0;
+	return p;
+}
+
+vec3 hslToRgb(float h, float s, float l){
+	float q = l < 0.5 ? l * (1. + s) : l + s - l * s;
+	float p = 2.0 * l - q;
+	return vec3(
+		rgbComponent(p, q, h + 1.0 / 3.0),
+		rgbComponent(p, q, h),
+		rgbComponent(p, q, h - 1.0 / 3.0)
+	);
+}
+
+void main() {
+
+	// Mix the texture and bloom based on distance from center,
+	// to approximate a lens blur
+	vec3 brightness = mix(
+		texture2D( bloomTex, vUV ).rgb, 
+		texture2D( tex, vUV ).rgb, 
+		(0.7 - length(vUV - 0.5))
+	) * 1.25;
+
+	// Dither: subtract a random value from the brightness
+	brightness = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
+
+	// Calculate a hue based on distance from center
+	float hue = 0.35 + (length(vUV - vec2(0.5, 1.0)) * -0.4 + 0.2);
+
+	// Convert HSL to RGB
+	vec3 rgb = hslToRgb(hue, 0.8, max(0., brightness.r)) * vec3(0.8, 1.0, 0.7);
+
+	// Calculate a separate RGB for upward-flowing glyphs
+	vec3 resurrectionRGB = hslToRgb(0.13, 1.0, max(0., brightness.g) * 0.9);
+	gl_FragColor = vec4(rgb + resurrectionRGB + backgroundColor, 1.0);
+}

shaders/glsl/stripePass.frag.glsl

@@ -0,0 +1,27 @@
+precision mediump float;
+#define PI 3.14159265359
+
+uniform sampler2D tex;
+uniform sampler2D bloomTex;
+uniform sampler2D stripes;
+uniform float ditherMagnitude;
+uniform float time;
+uniform vec3 backgroundColor;
+varying vec2 vUV;
+
+highp float rand( const in vec2 uv, const in float t ) {
+	const highp float a = 12.9898, b = 78.233, c = 43758.5453;
+	highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
+	return fract(sin(sn) * c + 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;
+
+	// Dither: subtract a random value from the brightness
+	brightness = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
+	
+	gl_FragColor = vec4(color * brightness + backgroundColor, 1.0);
+}