5 ردیف

vec3 matrix(in vec2 st){
float rows = 5.0;
vec2 ipos = floor(st*rows)+vec2(1.,0.);

vec2 fpos = fract(st*rows);
vec2 center = (.5-fpos);

return vec3(fpos,0.0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec2 st = fragCoord.xy / iResolution.xy;
st.y *= iResolution.y/iResolution.x;

fragColor = vec4(matrix(st),0.0);
}

ما نیاز داریم تا تعداد ردیف هامون بیشتر باشه مثلاً 50 تا

حالا به صورت رندوم خونه ها رو خاموش می کنیم جوری که انگار uv های کوچک (پیکسل ها) داره میاد پایین
(دقت کنید که در شیدر نویسی از ضرب برای تیرگی و از تقسیم برای روشنایی تصویر استفاده میشه)

float random(in float x){
return fract(sin(x)*43758.5453);
}

float random(in vec2 st){
return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

vec3 matrix(in vec2 st){
float rows = 50.0;
vec2 ipos = floor(st*rows)+vec2(1.,0.);


vec2 fpos = fract(st*rows);
vec2 center = (.5-fpos);

float pct = random(ipos);
return vec3(fpos * pct,0.0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec2 st = fragCoord.xy / iResolution.xy;
st.y *= iResolution.y/iResolution.x;

fragColor = vec4(matrix(st),1.0);
}

یه افکتم میدیم تا طبیعی تر باشه یعنی smooth می کنیمش

float random(in float x){
return fract(sin(x)*43758.5453);
}

float random(in vec2 st){
return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

vec3 matrix(in vec2 st){
float rows = 50.0;
vec2 ipos = floor(st*rows)+vec2(1.,0.);

vec2 fpos = fract(st*rows);
vec2 center = (.5-fpos);

float pct = random(ipos);
float glow = (1.-dot(center,center)*3.)*2.0;
return vec3(fpos * pct * glow,0.0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec2 st = fragCoord.xy / iResolution.xy;
st.y *= iResolution.y/iResolution.x;

fragColor = vec4(matrix(st),1.0);
}

حالا وقتشه یک انیمیشن بدیم یعنی در واحد زمان به uv اضافه بشه
نتیجه رو به صورت زیر می تونید مشاهده کنید

بعد باید خونه ها رو به صورت پیکسلی خاموش کنیم تا حروف الفبا رو از دلش در بیاریم:

grid مقادیر مختلف

float random(in float x){
return fract(sin(x)*43758.5453);
}

float random(in vec2 st){
return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

float randomChar(in vec2 outer,in vec2 inner){
float grid = 5.0;
return step(.5,random(outer+floor(inner*grid)));
}

vec3 matrix(in vec2 st){
float rows = 5.0;
vec2 ipos = floor(st*rows)+vec2(1.,0.);

ipos += vec2(.0,floor(iTime*20.*random(ipos.x)));

vec2 fpos = fract(st*rows);
vec2 center = (.5-fpos);

float pct = random(ipos);
float glow = (1.-dot(center,center)*3.)*2.0;

return vec3(randomChar(ipos,fpos) * pct * glow);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec2 st = fragCoord.xy / iResolution.xy;
st.y *= iResolution.y/iResolution.x;

fragColor = vec4(matrix(st),1.0);
}

float random(in float x){
return fract(sin(x)*43758.5453);
}

float random(in vec2 st){
return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

float randomChar(in vec2 outer,in vec2 inner){
float grid = 5.;
vec2 margin = vec2(.2,.05);
float seed = 23.;
vec2 borders = step(margin,inner)*step(margin,1.-inner);
return step(.5,random(outer*seed+floor(inner*grid))) * borders.x * borders.y;
}

vec3 matrix(in vec2 st){
float rows = 50.0;
vec2 ipos = floor(st*rows)+vec2(1.,0.);

ipos += vec2(.0,floor(iTime*20.*random(ipos.x)));

vec2 fpos = fract(st*rows);
vec2 center = (.5-fpos);

float pct = random(ipos);
float glow = (1.-dot(center,center)*3.)*2.0;

return vec3(randomChar(ipos,fpos) * pct * glow);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec2 st = fragCoord.xy / iResolution.xy;
st.y *= iResolution.y/iResolution.x;

fragColor = vec4(matrix(st),1.0);
}

در نهایت شیدرمون تکمیل شد😋
برای دیدن شیدر می تونید به لینک زیر مراجعه کنید:

در حین آموزش با RGB سرو کار داشتیم بهتره یه توضیحات بیشتری بدیم