سلام دوستان بعد از مدت ها بالاخره فرصت شد ادامه ی این آموزش رو بزارم...

برای نوشتن شیدر ماتریکس نیاز داریم تا حروف الفبا رو با شیدر بنویسیم چون قراره نوشته ها پایین بیان اما چطوری؟!

به نظرم بهتره یه چیز ساده براتون توضیح بدم به جای اینکه تک تک حروف رو با کد در بیاریم.
با رندوم میشه یه چیز ساده نوشت که در صورت تمایل می تونید گسترشش بدید...

خب برای شروع uv رو خروجی میگریم

میدونید چرا این رنگیه؟
شما حتماً با RGB آشنا هستید
Red 1,0,0
Green 0,1,0
Blue 0,0,1
این رنگ به خاطر مختصاتشه
سرچ کنید uv coordinates
(0,0) سیاه
(1,0) قرمز R
(1,1) زرد RG
(0,1) سبز G
.

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

fragColor = vec4(st.xy,0.0,0.0);
}

چون قراره نوشته ها از بالا بیاد پایین نیاز داریم تا uv رو به قسمت های مساوی تقسیم کنیم .... این کار با استفاده از fract انجام میشه(تو یونیتی معادلش frac هست)

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 مقادیر مختلف