eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-23 08:09:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Performing extensive cleanup and adding comments to rainPass.compute

Browse Source
This commit is contained in:
Rezmason
2021-10-22 23:44:45 -07:00
parent af44126926
commit 2265e3c937
2 changed files with 126 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/rainPass.js
View File

@@ -84,7 +84,7 @@ export default (regl, config) => {
frag: regl.prop("frag"), frag: regl.prop("frag"),
uniforms: { uniforms: {
...computeUniforms, ...computeUniforms,
lastState: doubleBuffer.back, previousState: doubleBuffer.back,
}, },
framebuffer: doubleBuffer.front, framebuffer: doubleBuffer.front,

240
shaders/rainPass.compute
View File

@@ -1,88 +1,91 @@
precision highp float; precision highp float;
// This shader is the star of the show. // This shader is the star of the show. For each glyph, it determines its:
// In normal operation, each pixel represents a glyph's: // R: brightness
// R: brightness // G: progress through the glyph sequence
// G: progress through the glyph sequence // B: depth, aka distance from the screen
// B: current glyph index // A: additional brightness for effects\
// 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 PI 3.14159265359
#define RADS_TO_HZ 0.15915494309
#define SQRT_2 1.4142135623730951 #define SQRT_2 1.4142135623730951
#define SQRT_5 2.23606797749979 #define SQRT_5 2.23606797749979
uniform float time; uniform sampler2D previousState;
uniform float tick;
uniform float numColumns, numRows; uniform float numColumns, numRows;
uniform sampler2D lastState; uniform float time, tick, cycleFrameSkip;
uniform bool hasSun; uniform float animationSpeed, fallSpeed, cycleSpeed;
uniform bool hasThunder;
uniform bool hasSun, hasThunder;
uniform bool showComputationTexture; uniform bool showComputationTexture;
uniform float brightnessOverride, brightnessThreshold, brightnessDecay; uniform float brightnessOverride, brightnessThreshold, brightnessDecay;
uniform float animationSpeed, fallSpeed, cycleSpeed; uniform float raindropLength, glyphHeightToWidth;
uniform float raindropLength; uniform int cycleStyle, rippleType;
uniform float glyphHeightToWidth;
uniform int cycleStyle;
uniform float cycleFrameSkip;
uniform float rippleScale, rippleSpeed, rippleThickness; uniform float rippleScale, rippleSpeed, rippleThickness;
uniform int rippleType;
uniform float cursorEffectThreshold; uniform float cursorEffectThreshold;
float max2(vec2 v) { // Helper functions for generating randomness, borrowed from elsewhere
return max(v.x, v.y);
}
highp float rand( const in vec2 uv ) { highp float randomFloat( const in vec2 uv ) {
const highp float a = 12.9898, b = 78.233, c = 43758.5453; 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 ); highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
return fract(sin(sn) * c); return fract(sin(sn) * c);
} }
vec2 rand2(vec2 p) { vec2 randomVec2( const in vec2 uv ) {
return fract(vec2(sin(p.x * 591.32 + p.y * 154.077), cos(p.x * 391.32 + p.y * 49.077))); return fract(vec2(sin(uv.x * 591.32 + uv.y * 154.077), cos(uv.x * 391.32 + uv.y * 49.077)));
} }
// 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 getRainTime(float simTime, vec2 glyphPos) {
float columnTimeOffset = rand(vec2(glyphPos.x, 0.0)); float columnTimeOffset = randomFloat(vec2(glyphPos.x, 0.));
float columnSpeedOffset = rand(vec2(glyphPos.x + 0.1, 0.0)); float columnSpeedOffset = randomFloat(vec2(glyphPos.x + 0.1, 0.));
// columnSpeedOffset = 0.0; // loop // columnSpeedOffset = 0.; // TODO: loop
float columnTime = (columnTimeOffset * 1000.0 + simTime * 0.5 * fallSpeed) * (0.5 + columnSpeedOffset * 0.5) + (sin(RADS_TO_HZ * simTime * fallSpeed * columnSpeedOffset) * 0.2); float columnTime = (columnTimeOffset * 1000. + simTime * 0.5 * fallSpeed) * (0.5 + columnSpeedOffset * 0.5) + (sin(simTime * fallSpeed * columnSpeedOffset) * 0.2);
return (glyphPos.y * 0.01 + columnTime) / raindropLength; return (glyphPos.y * 0.01 + columnTime) / raindropLength;
} }
float getRainBrightness(float rainTime) { float getBrightness(float rainTime) {
float value = 1.0 - fract((rainTime + 0.3 * sin(RADS_TO_HZ * SQRT_2 * rainTime) + 0.2 * sin(RADS_TO_HZ * SQRT_5 * rainTime))); float value = 1. - fract((rainTime + 0.3 * sin(SQRT_2 * rainTime) + 0.2 * sin(SQRT_5 * rainTime)));
// value = 1.0 - fract(rainTime); // loop // value = 1. - fract(rainTime); // TODO: loop
return log(value * 1.25) * 3.0; return log(value * 1.25) * 3.;
} }
float getGlyphCycleSpeed(float rainTime, float brightness) { float getCycleSpeed(float rainTime, float brightness) {
float glyphCycleSpeed = 0.0; float localCycleSpeed = 0.;
if (cycleStyle == 0 && brightness > 0.0) { if (cycleStyle == 0 && brightness > 0.) {
glyphCycleSpeed = pow(1.0 - brightness, 4.0); localCycleSpeed = pow(1. - brightness, 4.);
} else if (cycleStyle == 1) { } else if (cycleStyle == 1) {
glyphCycleSpeed = fract(rainTime); localCycleSpeed = fract(rainTime);
} }
return glyphCycleSpeed; return animationSpeed * cycleSpeed * localCycleSpeed;
} }
float applySunShower(float rainBrightness, vec2 screenPos) { // Additional effects
if (rainBrightness < -4.) {
return rainBrightness; float applySunShowerBrightness(float brightness, vec2 screenPos) {
if (brightness >= -4.) {
brightness = pow(fract(brightness * 0.5), 3.) * screenPos.y * 1.5;
} }
float value = pow(fract(rainBrightness * 0.5), 3.0) * screenPos.y * 1.5; return brightness;
return value;
} }
float applyThunder(float rainBrightness, float simTime, vec2 screenPos) { float applyThunderBrightness(float brightness, float simTime, vec2 screenPos) {
simTime *= 0.5; simTime *= 0.5;
float thunder = 1.0 - fract((simTime + 0.3 * sin(RADS_TO_HZ * SQRT_2 * simTime) + 0.2 * sin(RADS_TO_HZ * SQRT_5 * simTime))); float thunder = 1. - fract((simTime + 0.3 * sin(SQRT_2 * simTime) + 0.2 * sin(SQRT_5 * simTime)));
// thunder = 1.0 - fract(simTime + 0.3); // loop // thunder = 1. - fract(simTime + 0.3); // TODO: loop
thunder = log(thunder * 1.5) * 4.0;
thunder = log(thunder * 1.5) * 4.;
thunder = clamp(thunder, 0., 1.); thunder = clamp(thunder, 0., 1.);
thunder = thunder * pow(screenPos.y, 2.) * 3.; thunder = thunder * pow(screenPos.y, 2.) * 3.;
return rainBrightness + thunder; return brightness + thunder;
} }
float applyRippleEffect(float effect, float simTime, vec2 screenPos) { float applyRippleEffect(float effect, float simTime, vec2 screenPos) {
@@ -90,15 +93,16 @@ float applyRippleEffect(float effect, float simTime, vec2 screenPos) {
return effect; return effect;
} }
float rippleTime = (simTime * 0.5 + 0.2 * sin(RADS_TO_HZ * simTime)) * rippleSpeed + 1.; float rippleTime = (simTime * 0.5 + 0.2 * sin(simTime)) * rippleSpeed + 1.;
// rippleTime = (simTime * 0.5) * rippleSpeed + 1.; // loop // rippleTime = (simTime * 0.5) * rippleSpeed + 1.; // TODO: loop
vec2 offset = rand2(vec2(floor(rippleTime), 0.)) - 0.5; vec2 offset = randomVec2(vec2(floor(rippleTime), 0.)) - 0.5;
// offset = vec2(0.); // loop // offset = vec2(0.); // TODO: loop
vec2 ripplePos = screenPos * 2.0 - 1.0 + offset; vec2 ripplePos = screenPos * 2. - 1. + offset;
float rippleDistance; float rippleDistance;
if (rippleType == 0) { if (rippleType == 0) {
rippleDistance = max2(abs(ripplePos) * vec2(1.0, glyphHeightToWidth)); vec2 boxDistance = abs(ripplePos) * vec2(1., glyphHeightToWidth);
rippleDistance = max(boxDistance.x, boxDistance.y);
} else if (rippleType == 1) { } else if (rippleType == 1) {
rippleDistance = length(ripplePos); rippleDistance = length(ripplePos);
} }
@@ -106,77 +110,83 @@ float applyRippleEffect(float effect, float simTime, vec2 screenPos) {
float rippleValue = fract(rippleTime) * rippleScale - rippleDistance; float rippleValue = fract(rippleTime) * rippleScale - rippleDistance;
if (rippleValue > 0. && rippleValue < rippleThickness) { if (rippleValue > 0. && rippleValue < rippleThickness) {
return effect + 0.75; effect += 0.75;
} else {
return effect;
} }
return effect;
} }
float applyCursorEffect(float effect, float brightness) { float applyCursorEffect(float effect, float brightness) {
if (brightness >= cursorEffectThreshold) { if (brightness >= cursorEffectThreshold) {
effect = 1.0; effect = 1.;
} }
return effect; return effect;
} }
void main() { // 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 glyphPos = gl_FragCoord.xy;
vec2 screenPos = glyphPos / vec2(numColumns, numRows); vec2 screenPos = glyphPos / vec2(numColumns, numRows);
float simTime = time * animationSpeed; vec4 previousResult = texture2D( previousState, screenPos );
gl_FragColor = computeResult(isFirstFrame, previousResult, glyphPos, screenPos);
// Read the current values of the glyph
vec4 data = texture2D( lastState, screenPos );
bool isInitializing = length(data) == 0.;
float oldRainBrightness = data.r;
float oldGlyphCycle = data.g;
if (isInitializing) {
oldGlyphCycle = showComputationTexture ? 0.5 : rand(screenPos);
}
if (oldRainBrightness <= 0.0) {
// oldGlyphCycle = showComputationTexture ? 0.5 : rand(screenPos); // loop
}
float rainTime = getRainTime(simTime, glyphPos);
float rainBrightness = getRainBrightness(rainTime);
if (hasSun) rainBrightness = applySunShower(rainBrightness, screenPos);
if (hasThunder) rainBrightness = applyThunder(rainBrightness, simTime, screenPos);
float glyphCycleSpeed = getGlyphCycleSpeed(rainTime, rainBrightness);
float glyphCycle = oldGlyphCycle;
if (mod(tick, cycleFrameSkip) == 0.0) {
glyphCycle = fract(oldGlyphCycle + 0.005 * animationSpeed * cycleSpeed * glyphCycleSpeed * cycleFrameSkip);
}
float effect = 0.;
effect = applyRippleEffect(effect, simTime, screenPos);
effect = applyCursorEffect(effect, rainBrightness);
float glyphDepth = rand(vec2(glyphPos.x, 0.0));
if (brightnessOverride > 0. && rainBrightness > brightnessThreshold) {
rainBrightness = brightnessOverride;
}
if (!isInitializing) {
rainBrightness = mix(oldRainBrightness, rainBrightness, brightnessDecay);
}
if (showComputationTexture) {
gl_FragColor = vec4(
rainBrightness,
glyphCycle,
min(1.0, glyphCycleSpeed), // Better use of the blue channel, for show and tell
1.0
);
} else {
gl_FragColor = vec4(
rainBrightness,
glyphCycle,
glyphDepth,
effect
);
}
} }