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

Combining the rain pass's compute shaders

Browse Source
This commit is contained in:
Rezmason
2023-08-22 11:46:29 -07:00
parent 7a4f8b0e0b
commit 2d97f764f5
11 changed files with 122 additions and 8490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
shaders/glsl/rainPass.compute.frag.glsl Normal file
View File

@@ -0,0 +1,78 @@
precision highp float;
#define PI 3.14159265359
#define SQRT_2 1.4142135623730951
#define SQRT_5 2.23606797749979
uniform sampler2D previousComputeState;
uniform float numColumns, numRows;
uniform float time, tick, cycleFrameSkip;
uniform float animationSpeed, fallSpeed, cycleSpeed;
uniform float glyphSequenceLength;
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);
}
float wobble(float x) {
return x + 0.3 * sin(SQRT_2 * x) + 0.2 * sin(SQRT_5 * x);
}
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;
float columnTime = columnTimeOffset + simTime * fallSpeed * columnSpeedOffset;
float rainTime = (glyphPos.y * 0.01 + columnTime) / raindropLength;
rainTime = wobble(rainTime);
return 1.0 - fract(rainTime);
}
vec2 computeRaindrop(float simTime, vec2 glyphPos) {
float brightness = getRainBrightness(simTime, glyphPos);
float brightnessBelow = getRainBrightness(simTime, glyphPos + vec2(0., -1.));
bool cursor = brightness > brightnessBelow;
return vec2(brightness, cursor);
}
vec2 computeSymbol(float simTime, bool isFirstFrame, vec2 glyphPos, vec2 screenPos, vec4 previous) {
float previousSymbol = previous.r;
float previousAge = previous.g;
bool resetGlyph = isFirstFrame;
if (resetGlyph) {
previousAge = randomFloat(screenPos + 0.5);
previousSymbol = floor(glyphSequenceLength * randomFloat(screenPos));
}
float cycleSpeed = animationSpeed * cycleSpeed;
float age = previousAge;
float symbol = previousSymbol;
if (mod(tick, cycleFrameSkip) == 0.) {
age += cycleSpeed * cycleFrameSkip;
if (age >= 1.) {
symbol = floor(glyphSequenceLength * randomFloat(screenPos + simTime));
age = fract(age);
}
}
return vec2(symbol, age);
}
void main() {
float simTime = time * animationSpeed;
vec2 glyphPos = gl_FragCoord.xy;
vec2 screenPos = glyphPos / vec2(numColumns, numRows);
vec2 raindrop = computeRaindrop(simTime, glyphPos);
bool isFirstFrame = tick <= 1.;
vec4 previous = texture2D( previousComputeState, screenPos );
vec4 previousSymbol = vec4(previous.ba, 0.0, 0.0);
vec2 symbol = computeSymbol(simTime, isFirstFrame, glyphPos, screenPos, previousSymbol);
gl_FragColor = vec4(raindrop, symbol);
}

99
shaders/glsl/rainPass.effect.frag.glsl
View File

@@ -1,99 +0,0 @@
precision highp float;
// These effects are used to spice up the non-canon versions of the code rain.
// The shader writes them to the channels of a data texture:
// R: multiplied effects— magnify the cell's brightness
// G: added effects— offset the cell's brightness
// B: unused
// A: unused
#define SQRT_2 1.4142135623730951
#define SQRT_5 2.23606797749979
uniform sampler2D previousEffectState;
uniform float numColumns, numRows;
uniform float time, tick;
uniform float animationSpeed;
uniform bool hasThunder, loops;
uniform float glyphHeightToWidth;
uniform int rippleType;
uniform float rippleScale, rippleSpeed, rippleThickness;
// Helper functions for generating randomness, borrowed from elsewhere
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);
}
float getThunder(float simTime, vec2 screenPos) {
if (!hasThunder) {
return 0.;
}
float thunderTime = simTime * 0.5;
float thunder = 1. - fract(wobble(thunderTime));
if (loops) {
thunder = 1. - fract(thunderTime + 0.3);
}
thunder = log(thunder * 1.5) * 4.;
thunder = clamp(thunder, 0., 1.) * 10. * pow(screenPos.y, 2.);
return thunder;
}
float getRipple(float simTime, vec2 screenPos) {
if (rippleType == -1) {
return 0.;
}
float rippleTime = (simTime * 0.5 + sin(simTime) * 0.2) * rippleSpeed + 1.; // TODO: clarify
if (loops) {
rippleTime = (simTime * 0.5) * rippleSpeed + 1.;
}
vec2 offset = randomVec2(vec2(floor(rippleTime), 0.)) - 0.5;
if (loops) {
offset = vec2(0.);
}
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) {
return 0.75;
}
return 0.;
}
// Main function
vec4 computeResult(float simTime, bool isFirstFrame, vec2 glyphPos, vec2 screenPos, vec4 previous) {
float multipliedEffects = 1. + getThunder(simTime, screenPos);
float addedEffects = getRipple(simTime, screenPos); // Round or square ripples across the grid
vec4 result = vec4(multipliedEffects, addedEffects, 0., 0.);
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( previousEffectState, screenPos );
gl_FragColor = computeResult(simTime, isFirstFrame, glyphPos, screenPos, previous);
}

92
shaders/glsl/rainPass.frag.glsl
View File

@@ -4,25 +4,18 @@
#endif
precision lowp float;
uniform sampler2D raindropState, symbolState, effectState;
uniform sampler2D computeState;
uniform float numColumns, numRows;
uniform sampler2D glyphMSDF, glintMSDF, baseTexture, glintTexture;
uniform sampler2D glyphMSDF;
uniform float msdfPxRange;
uniform vec2 glyphMSDFSize, glintMSDFSize;
uniform vec2 glyphMSDFSize;
uniform float glyphHeightToWidth, glyphSequenceLength, glyphEdgeCrop;
uniform float baseContrast, baseBrightness, glintContrast, glintBrightness;
uniform float brightnessOverride, brightnessThreshold;
uniform vec2 glyphTextureGridSize;
uniform vec2 slantVec;
uniform float slantScale;
uniform bool isPolar;
uniform bool showDebugView;
uniform bool volumetric;
uniform bool isolateCursor, isolateGlint;
uniform bool isolateCursor;
varying vec2 vUV;
varying vec4 vRaindrop, vSymbol, vEffect;
varying float vDepth;
float median3(vec3 i) {
return max(min(i.r, i.g), min(max(i.r, i.g), i.b));
@@ -34,39 +27,15 @@ float modI(float a, float b) {
}
vec2 getUV(vec2 uv) {
if (volumetric) {
return uv;
}
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;
return uv;
}
vec3 getBrightness(vec4 raindrop, vec4 effect, float quadDepth, vec2 uv) {
vec3 getBrightness(vec2 raindrop, vec2 uv) {
float base = raindrop.r + max(0., 1.0 - raindrop.a * 5.0);
float base = raindrop.r;
bool isCursor = bool(raindrop.g) && isolateCursor;
float glint = base;
float multipliedEffects = effect.r;
float addedEffects = effect.g;
vec2 textureUV = fract(uv * vec2(numColumns, numRows));
base = base * baseContrast + baseBrightness;
@@ -77,19 +46,10 @@ vec3 getBrightness(vec4 raindrop, vec4 effect, float quadDepth, vec2 uv) {
base = brightnessOverride;
}
base = base * multipliedEffects + addedEffects;
glint = glint * multipliedEffects + addedEffects;
// In volumetric mode, distant glyphs are dimmer
if (volumetric && !showDebugView) {
base = base * min(1.0, quadDepth);
glint = glint * min(1.0, quadDepth);
}
return vec3(
(isCursor ? vec2(0.0, 1.0) : vec2(1.0, 0.0)) * base,
glint
) * raindrop.b;
);
}
vec2 getSymbolUV(float index) {
@@ -119,16 +79,6 @@ vec2 getSymbol(vec2 uv, float index) {
symbol.r = clamp(screenPxDistance + 0.5, 0.0, 1.0);
}
if (isolateGlint) {
vec2 unitRange = vec2(msdfPxRange) / glintMSDFSize;
vec2 screenTexSize = vec2(1.0) / fwidth(uv);
float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
float signedDistance = median3(texture2D(glintMSDF, uv).rgb);
float screenPxDistance = screenPxRange * (signedDistance - 0.5);
symbol.g = clamp(screenPxDistance + 0.5, 0.0, 1.0);
}
return symbol;
}
@@ -137,30 +87,10 @@ void main() {
vec2 uv = getUV(vUV);
// Unpack the values from the data textures
vec4 raindropData = volumetric ? vRaindrop : texture2D(raindropState, uv);
vec4 symbolData = volumetric ? vSymbol : texture2D( symbolState, uv);
vec4 effectData = volumetric ? vEffect : texture2D( effectState, uv);
vec4 data = texture2D(computeState, uv);
vec3 brightness = getBrightness(
raindropData,
effectData,
vDepth,
uv
);
vec2 symbol = getSymbol(uv, symbolData.r);
vec3 brightness = getBrightness(data.rg, uv);
vec2 symbol = getSymbol(uv, data.b);
if (showDebugView) {
gl_FragColor = vec4(
vec3(
raindropData.g,
vec2(
1. - ((1.0 - raindropData.r) * 3.),
1. - ((1.0 - raindropData.r) * 8.)
) * (1. - raindropData.g)
) * symbol.r,
1.
);
} else {
gl_FragColor = vec4(brightness.rg * symbol.r, brightness.b * symbol.g, 0.);
}
gl_FragColor = vec4(brightness.rg * symbol.r, brightness.b * symbol.g, 0.);
}

67
shaders/glsl/rainPass.intro.frag.glsl
View File

@@ -1,67 +0,0 @@
precision highp float;
// This shader governs the "intro"— the initial stream of rain from a blank screen.
// It writes falling rain to the channels of a data texture:
// R: raindrop length
// G: unused
// B: unused
// A: unused
#define PI 3.14159265359
#define SQRT_2 1.4142135623730951
#define SQRT_5 2.23606797749979
uniform sampler2D previousIntroState;
uniform float numColumns, numRows;
uniform float time, tick;
uniform float animationSpeed, fallSpeed;
uniform bool skipIntro;
// 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);
}
// Main function
vec4 computeResult(float simTime, bool isFirstFrame, vec2 glyphPos, vec2 screenPos, vec4 previous) {
if (skipIntro) {
return vec4(2., 0., 0., 0.);
}
float columnTimeOffset;
int column = int(glyphPos.x);
if (column == int(numColumns / 2.)) {
columnTimeOffset = -1.;
} else if (column == int(numColumns * 0.75)) {
columnTimeOffset = -2.;
} else {
columnTimeOffset = randomFloat(vec2(glyphPos.x, 0.)) * -4.;
columnTimeOffset += (sin(glyphPos.x / numColumns * PI) - 1.) * 2. - 2.5;
}
float introTime = (simTime + columnTimeOffset) * fallSpeed / numRows * 100.;
vec4 result = vec4(introTime, 0., 0., 0.);
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( previousIntroState, screenPos );
gl_FragColor = computeResult(simTime, isFirstFrame, glyphPos, screenPos, previous);
}

93
shaders/glsl/rainPass.raindrop.frag.glsl
View File

@@ -1,93 +0,0 @@
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);
}

64
shaders/glsl/rainPass.symbol.frag.glsl
View File

@@ -1,64 +0,0 @@
precision highp float;
// This shader governs the glyphs appearing in the rain.
// It writes each glyph's state to the channels of a data texture:
// R: symbol
// G: age
// B: unused
// A: unused
#define PI 3.14159265359
uniform sampler2D previousSymbolState, raindropState;
uniform float numColumns, numRows;
uniform float time, tick, cycleFrameSkip;
uniform float animationSpeed, cycleSpeed;
uniform bool loops, showDebugView;
uniform float glyphSequenceLength;
// 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);
}
// Main function
vec4 computeResult(float simTime, bool isFirstFrame, vec2 glyphPos, vec2 screenPos, vec4 previous, vec4 raindrop) {
float previousSymbol = previous.r;
float previousAge = previous.g;
bool resetGlyph = isFirstFrame;
if (loops) {
resetGlyph = resetGlyph || raindrop.r <= 0.;
}
if (resetGlyph) {
previousAge = randomFloat(screenPos + 0.5);
previousSymbol = floor(glyphSequenceLength * randomFloat(screenPos));
}
float cycleSpeed = animationSpeed * cycleSpeed;
float age = previousAge;
float symbol = previousSymbol;
if (mod(tick, cycleFrameSkip) == 0.) {
age += cycleSpeed * cycleFrameSkip;
if (age >= 1.) {
symbol = floor(glyphSequenceLength * randomFloat(screenPos + simTime));
age = fract(age);
}
}
vec4 result = vec4(symbol, age, 0., 0.);
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( previousSymbolState, screenPos );
vec4 raindrop = texture2D( raindropState, screenPos );
gl_FragColor = computeResult(simTime, isFirstFrame, glyphPos, screenPos, previous, raindrop);
}

48
shaders/glsl/rainPass.vert.glsl
View File

@@ -1,51 +1,15 @@
#define PI 3.14159265359
precision lowp float;
attribute vec2 aPosition, aCorner;
uniform sampler2D raindropState, symbolState, effectState;
uniform float density;
uniform vec2 quadSize;
uniform float glyphHeightToWidth, glyphVerticalSpacing;
uniform mat4 camera, transform;
uniform float glyphVerticalSpacing;
uniform vec2 screenSize;
uniform float time, animationSpeed, forwardSpeed;
uniform bool volumetric;
uniform float time, animationSpeed;
varying vec2 vUV;
varying vec4 vRaindrop, vSymbol, vEffect;
varying float vDepth;
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;
vRaindrop = texture2D(raindropState, aPosition * quadSize);
vSymbol = texture2D( symbolState, aPosition * quadSize);
vEffect = texture2D( effectState, aPosition * quadSize);
// Calculate the world space position
float quadDepth = 0.0;
if (volumetric) {
float startDepth = rand(vec2(aPosition.x, 0.));
quadDepth = fract(startDepth + time * animationSpeed * forwardSpeed);
vDepth = quadDepth;
}
vec2 position = (aPosition * vec2(1., glyphVerticalSpacing) + aCorner * vec2(density, 1.)) * quadSize;
if (volumetric) {
position.y += rand(vec2(aPosition.x, 1.)) * quadSize.y;
}
vec4 pos = vec4((position - 0.5) * 2.0, quadDepth, 1.0);
// Convert the world space position to screen space
if (volumetric) {
pos.x /= glyphHeightToWidth;
pos = camera * transform * pos;
} else {
pos.xy *= screenSize;
}
vUV = aPosition + aCorner;
vec2 position = (aPosition * vec2(1., glyphVerticalSpacing) + aCorner);
vec4 pos = vec4((position - 0.5) * 2.0, 0.0, 1.0);
pos.xy *= screenSize;
gl_Position = pos;
}