biipadmin/Burn-My-Windows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔧 Tweak matrix shader

Browse Source
This commit is contained in:
Simon Schneegans
2021-12-23 20:56:54 +01:00
parent 547db3a2b8
commit ca024872db
4 changed files with 166 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/extension/MatrixShader.js
+42 -35
View File
@@ -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);
}
`);
};
src/extension/shaderSnippets.js
+1 -1
View File
@@ -37,7 +37,7 @@ function standardUniforms() {
function noise() {
return `
float rand(vec2 co) {
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
}
vec2 rand2(vec2 co) {