🔧 Tweak matrix shader
This commit is contained in:
@@ -27,6 +27,8 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
|
||||
_init(settings) {
|
||||
super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
|
||||
|
||||
// Load the font texture. As the shader is re-created for each window animation, this
|
||||
// texture is also re-created each time. This could be improved in the future!
|
||||
const fontData = GdkPixbuf.Pixbuf.new_from_resource('/img/matrixFont.png');
|
||||
this._fontTexture = new Clutter.Image();
|
||||
this._fontTexture.set_data(
|
||||
@@ -34,7 +36,7 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
|
||||
fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888,
|
||||
fontData.width, fontData.height, fontData.rowstride);
|
||||
|
||||
// This is roughly based on https://www.shadertoy.com/view/ldccW4 (CC-BY-NC-SA).
|
||||
// This is partially based on https://www.shadertoy.com/view/ldccW4 (CC-BY-NC-SA).
|
||||
this.set_shader_source(`
|
||||
|
||||
// Inject some common shader snippets.
|
||||
@@ -45,68 +47,73 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
|
||||
|
||||
// These may be configurable in the future.
|
||||
const float EDGE_FADE = 30;
|
||||
const float FADE_WIDTH = 50;
|
||||
const float FADE_WIDTH = 150;
|
||||
const float TRAIL_LENGTH = 0.2;
|
||||
const float FINAL_FADE_START_TIME = 0.8;
|
||||
const float LETTER_TILES = 16.0;
|
||||
const float LETTER_SIZE = 16.0;
|
||||
const float BRIGHTNESS_BOOST = 2;
|
||||
const float LETTER_SIZE = 20.0;
|
||||
const float LETTER_FLICKER_SPEED = 2.0;
|
||||
const float RANDOMNESS = 1.0;
|
||||
|
||||
// This returns a flickering grid of random letters.
|
||||
float getText(vec2 fragCoord) {
|
||||
vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
|
||||
vec2 uv = mod(coords.xy, LETTER_SIZE)/LETTER_SIZE;
|
||||
vec2 block = coords/LETTER_SIZE - uv;
|
||||
vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
|
||||
vec2 uv = mod(pixelCoords.xy, LETTER_SIZE)/LETTER_SIZE;
|
||||
vec2 block = pixelCoords/LETTER_SIZE - uv;
|
||||
|
||||
// scale the letters up a bit
|
||||
uv = uv*.8+.1;
|
||||
// Choose random letter.
|
||||
uv += floor(rand2(floor(rand(block)*vec2(12.9898,78.233) + LETTER_FLICKER_SPEED*uTime + 42.254))*LETTER_TILES);
|
||||
|
||||
// bring back into 0-1 range
|
||||
uv += floor(rand2(block/512 + uTime*.0000001)*LETTER_TILES);
|
||||
uv /= LETTER_TILES;
|
||||
|
||||
// flip letters horizontally
|
||||
uv.x = -uv.x+1.0;
|
||||
return texture2D(uFontTexture, uv).r;
|
||||
return texture2D(uFontTexture, uv/LETTER_TILES).r;
|
||||
}
|
||||
|
||||
// This returns two values: The first are gradients for the "raindrops" which move
|
||||
// from top to bottom. This is used for fading the letters. The second value is set
|
||||
// to one below each drop and to zero above it. This second value is used for fading
|
||||
// the window texture.
|
||||
vec2 getRain(vec2 fragCoord) {
|
||||
vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
|
||||
coords.x -= mod(coords.x, LETTER_SIZE);
|
||||
|
||||
float delay = abs(sin(coords.x * 3.0)) * mix(0.0, 1.0, RANDOMNESS);
|
||||
float speed = cos(coords.x * 7.0) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
|
||||
float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
|
||||
float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
|
||||
|
||||
float distToDrop = (uProgress*2-delay)*speed - fragCoord.y;
|
||||
return vec2(distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0,
|
||||
clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH);
|
||||
float distToDrop = (uProgress*2-delay)*speed - fragCoord.y;
|
||||
float rainAlpha = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
|
||||
float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
|
||||
return vec2(rainAlpha, windowAlpha);
|
||||
}
|
||||
|
||||
void main() {
|
||||
|
||||
vec3 color = vec3(0.1,1,0.35);
|
||||
|
||||
// Get a cool matrix effect.
|
||||
// Get a cool matrix effect. See comments for those methods above.
|
||||
vec2 rain = getRain(cogl_tex_coord_in[0].st);
|
||||
float text = getText(cogl_tex_coord_in[0].st);
|
||||
|
||||
// Get the window texture and fade it according to the effect mask.
|
||||
float windowAlpha = 1 - rain.y;
|
||||
cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * windowAlpha;
|
||||
|
||||
float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/(1-FINAL_FADE_START_TIME), 0, 1);
|
||||
float textAlpha = finalFade * rain.x * BRIGHTNESS_BOOST;
|
||||
cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * rain.y;
|
||||
|
||||
// This is used to fade out the remaining trails in the end.
|
||||
float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/
|
||||
(1-FINAL_FADE_START_TIME), 0, 1);
|
||||
float rainAlpha = finalFade * rain.x;
|
||||
|
||||
// Fade at window borders.
|
||||
vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
|
||||
textAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
|
||||
textAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
|
||||
textAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
|
||||
textAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
|
||||
rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
|
||||
|
||||
// Add the fire to the window.
|
||||
cogl_color_out.rgb += color * textAlpha * text;
|
||||
// Add the matrix effect to the window.
|
||||
vec3 trailColor = vec3(0.1,1,0.35);
|
||||
vec3 tipColor = vec3(1,1,1);
|
||||
cogl_color_out.rgb += mix(trailColor, tipColor, pow(rainAlpha, 5)) * rainAlpha * text;
|
||||
|
||||
// These are pretty useful for understanding how this works.
|
||||
// cogl_color_out = vec4(vec3(text), 1);
|
||||
// cogl_color_out = vec4(vec3(rain.x), 1);
|
||||
// cogl_color_out = vec4(vec3(rain.y), 1);
|
||||
}
|
||||
`);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user