Last active
August 5, 2025 09:51
-
-
Save aberloni/a4a7c698d4d9c8653a03edd19623c665 to your computer and use it in GitHub Desktop.
Matrix effect based on WillKirkby's shadertoy effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// | |
/// 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