mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
94 lines
3.3 KiB
GLSL
94 lines
3.3 KiB
GLSL
precision highp float;
|
|
|
|
// This shader is the star of the show.
|
|
// It writes falling rain to the channels of a data texture:
|
|
// R: raindrop brightness
|
|
// G: whether the cell is a "cursor"
|
|
// B: whether the cell is "activated" — to animate the intro
|
|
// A: unused
|
|
|
|
// 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 previousRaindropState, introState;
|
|
uniform float numColumns, numRows;
|
|
uniform float time, tick;
|
|
uniform float animationSpeed, fallSpeed;
|
|
|
|
uniform bool loops, skipIntro;
|
|
uniform float brightnessDecay;
|
|
uniform float raindropLength;
|
|
|
|
// 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);
|
|
}
|
|
|
|
// This is the code rain's key underlying concept.
|
|
// It's why glyphs that share a column are lit simultaneously, and are brighter toward the bottom.
|
|
// It's also why those bright areas are truncated into raindrops.
|
|
float getRainBrightness(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;
|
|
if (loops) {
|
|
columnSpeedOffset = 0.5;
|
|
}
|
|
float columnTime = columnTimeOffset + simTime * fallSpeed * columnSpeedOffset;
|
|
float rainTime = (glyphPos.y * 0.01 + columnTime) / raindropLength;
|
|
if (!loops) {
|
|
rainTime = wobble(rainTime);
|
|
}
|
|
return 1.0 - fract(rainTime);
|
|
}
|
|
|
|
// Main function
|
|
|
|
vec4 computeResult(float simTime, bool isFirstFrame, vec2 glyphPos, vec4 previous, vec4 intro) {
|
|
float brightness = getRainBrightness(simTime, glyphPos);
|
|
float brightnessBelow = getRainBrightness(simTime, glyphPos + vec2(0., -1.));
|
|
|
|
float introProgress = intro.r - (1. - glyphPos.y / numRows);
|
|
float introProgressBelow = intro.r - (1. - (glyphPos.y - 1.) / numRows);
|
|
|
|
bool activated = bool(previous.b) || skipIntro || introProgress > 0.;
|
|
bool activatedBelow = skipIntro || introProgressBelow > 0.;
|
|
|
|
bool cursor = brightness > brightnessBelow || (activated && !activatedBelow);
|
|
|
|
// Blend the glyph's brightness with its previous brightness, so it winks on and off organically
|
|
if (!isFirstFrame) {
|
|
float previousBrightness = previous.r;
|
|
brightness = mix(previousBrightness, brightness, brightnessDecay);
|
|
}
|
|
|
|
vec4 result = vec4(brightness, cursor, activated, introProgress);
|
|
return result;
|
|
}
|
|
|
|
void main() {
|
|
float simTime = time * animationSpeed;
|
|
bool isFirstFrame = tick <= 1.;
|
|
vec2 glyphPos = gl_FragCoord.xy;
|
|
vec2 screenPos = glyphPos / vec2(numColumns, numRows);
|
|
vec4 previous = texture2D( previousRaindropState, screenPos );
|
|
vec4 intro = texture2D( introState, vec2(screenPos.x, 0.) );
|
|
gl_FragColor = computeResult(simTime, isFirstFrame, glyphPos, previous, intro);
|
|
}
|