Skip to content

Instantly share code, notes, and snippets.

@aberloni
Last active August 5, 2025 09:51
Show Gist options
  • Save aberloni/a4a7c698d4d9c8653a03edd19623c665 to your computer and use it in GitHub Desktop.
Save aberloni/a4a7c698d4d9c8653a03edd19623c665 to your computer and use it in GitHub Desktop.
Matrix effect based on WillKirkby's shadertoy effect
///
/// https://www.shadertoy.com/view/ldccW4
/// https://docs.unity3d.com/6000.1/Documentation/Manual/SL-Properties.html
/// https://shahriyarshahrabi.medium.com/shader-studies-matrix-effect-3d2ead3a84c5
///
Shader "Unlit/ScreenSpaceMatrixEffectColored"
{
Properties
{
_tint("_tint", Color) = (.1, 1, .35, 1.)
_scale("_scale", Float) = 5
_screen_width("_screen_width", Int) = 1920
_screen_height("_screen_height", Int) = 1080
_white_noise("_white_noise", 2D) = "white" {}
_font_texture("_font_texture", 2D) = "white" {}
}
SubShader
{
Tags { "RenderType" = "Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
float4 _tint;
float _scale;
uint _screen_width;
uint _screen_height;
sampler2D _white_noise;
float4 _white_noise_TexelSize; // x=1/width, y=1/height, z=width, w=height
sampler2D _font_texture;
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
float text(float2 coord)
{
// Geting the fract part of the block, this is the uv map for the blocl
float2 uv = frac(coord.xy / 16.);
// Getting the id for the block. The first blocl is (0,0) to its right (1,0), and above it (0,1)
float2 block = floor(coord.xy / 16.);
// Zooming a bit in each block to have larger ltters
uv = uv * 0.7 + .1;
// This texture contains animated white noise. The white noise is animated in compute shaders
// 512 is the white noise texture width. This division ensures that each block samples exactly one pixel of the noise texture
float2 rand = tex2D(_white_noise, block.xy / _white_noise_TexelSize.zw + _Time * .01).xy;
// Each random value is used for the block to sample one of the 16 columns of the font texture. This rand offset is what picks the letter, the animated white noise is what changes it
rand = floor(rand * 16.);
// The random texture has a different value und the xy channels. This ensures that randomly one member of the texture is picked
uv += rand;
// So far the uv value is between 0-16. To sample the font texture we need to normalize this to 0-1. hence a divid by 16
uv *= 0.0625;
uv.x = -uv.x;
//float offset = sin(coord.x * 15.);
//float speed = cos(coord.x * 3.) * .15 + .35;
//float brightness = frac(_Time.y * speed + offset); // 0–1 over time
return tex2D(_font_texture, uv).r;
}
float3 rain(float2 fragCoord)
{
// This is the exact replica of the calculation in text function for getting the cell ids. Here we want the id for the columns
fragCoord.x = floor(fragCoord.x / 16.);
// Each drop of rain needs to start at a different point. The column id plus a sin is used to generate a different offset for each columm
float offset = sin(fragCoord.x * 15.);
// Same as above, but for speed. Since we dont want the columns travelling up, we are adding the 0.7. Since the cos *0.3 goes between -0.3 and 0.3 the 0.7 ensures that the speed goes between 0.4 mad 1.0. This is also control parameters for min and max speed
float speed = cos(fragCoord.x * 3.) * .15 + .35;
speed *= 0.4;
// This maps the screen again so that top is 1 and button is 0.
// The addition with time and frac would cause an entire bar moving from button to top
// the speed and offset would cause the columns to move down at different speeds.
// Which causes the rain drop effect
float y = frac((fragCoord.y / _screen_height) + _Time.y * speed + offset);
float4 col = _tint;
// adjusting the retun color based on the columns calculations.
return col / max(y * 20., 0.1);
//return col / (y * 20. + 0.1);
//return col / (y * 20.);
}
fixed4 frag(v2f i) : SV_Target
{
fixed4 col = float4(0.,0.,0.,1.);
col.xyz = text(i.uv * float2(_screen_width, _screen_height) * _scale) *
rain(i.uv * float2(_screen_width, _screen_height) * _scale);
//col.xyz = text(i.uv) * rain(i.uv);
return col;
}
ENDCG
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment