#a رسم یک دایره با ابزار شیدرتوی

خب اول همین 3 خط را میاییم بررسی میکنیم

خط 1 void mainImage تابع اصلی است و چون از نوع void می باشد
چیزی را به عنوان خروجی بر نمی گرداند بلکه فقط کاری را انجام می دهد(مثل void main در زبان c )
fragColor
خروجی کد های ما است

خط 3 مهمترین بخش هر شیدره که باهاش مختصات صفحمونو مقدار دهی اولیه می کنیم
برای اینکه چیزی که رسم بشه تو مختصات صفحه نمایش رندر شه نه خارج از صفحه نمایش

خط 4 هم که قبلا گفتیم خروجی شیدر
که RGBA میگیره
ینی Red , Green , Blue , Alpha
خب مثال میزنیم مثلا مینویسیم
fragColor = vec4(0.0,0.0,0.0,1.0);
و معلومه که صفحه ای سیاه رنگی به ما نشان میده.

حالا این مقدمه را تموم میکنیم و میریم برای دایره رسم کردن...

ابتدا عدد معروف پی را تعریف میکنیم به شکل
#define PI 3.14

خب حالا void disk را مینویسیم و بهش آرگومان های
r همون رزولیشن هست(resolution )
center مرکز دایره
radius شعاع دایره
color رنگ
pixel خروجی این تابع
را میدیم
و شرط میزاریم که اگر فاصله ی r از مرکز دایره کمتر از شعاع بود بیاد و پیکسل را مقدار بده.

خب حالا متغییر هامونا مقدار میدیم
r را جوری مقدار میدیم که خروجیمون بیاد داخل فریم(قاب نمایشمون)
radius را یک مقدار دلخواه میدیم که شعاع دایره هست
همچنین color را مقدار میدیم از نوع vec3
pixel

راستی سنتر را بعدا مقدار میدیم که ببینید هر دو جا میشه مقدار داد

خط21 ازتابع دیسک که قبلا داشتیم استفاده میکنیم
فقط من اینجا
center
را درجا مقدار دادم

و تمام
pixel
میاد داخل خروجیمون قسمت
fragColor

#define PI 3.14
//create a 2-D disk on the screen
vec3 disk(vec2 resolution, vec2 center, float radius, vec3 color) {
if( length(resolution-center) < radius) {
return color;
}
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / iResolution.xy;

vec2 resolution = 2.0*vec2(fragCoord.xy - 0.5*iResolution.xy)/iResolution.y; //move coordinates to center of frame

float radius = 0.2;

vec3 color = vec3 (0.8,0.0,0.8);

vec2 movement = vec2(0.0,0.0);


vec3 result = disk(resolution,movement,radius,color);



fragColor = vec4(result, 1.0);

}

فقط یک نکته ای مطرح کنم که شاید مفید باشه

تو کتاب The Book of shader یه جاش نوشته که بهتره از تابع های Built-in استفاده بشه تا اینکه از شرط ها استفاده کنیم

#define PI 3.14
//create a 2-D disk on the screen
vec3 disk(vec2 resolution, vec2 center, float radius, vec3 color) {
float a = step( length(resolution-center) , radius);
return vec3(a,a,a) * color;

}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / iResolution.xy;

vec2 resolution = 2.0*vec2(fragCoord.xy - 0.5*iResolution.xy)/iResolution.y; //move coordinates to center of frame

float radius = 0.2;

vec3 color = vec3 (0.8,0.0,0.8);

vec2 movement = vec2(0.0,0.0);


vec3 result = disk(resolution,movement,radius,color);



fragColor = vec4(result, 1.0);

}

The Book of shader