Gölgelendiriciyi kullanarak efekti çoğaltmaya çalıştım.
Shader00 Center: https://www.shadertoy.com/view/XsXSz2
Shader01 Taraflar: https://www.shadertoy.com/view/4sXSz2
:) Byte56'nın dediği gibi üç uçak kurabilirsiniz. Shader00 ile doğrudan ileriye doğru bakan bir uçak ve daha sonra Shader01 ile iki uçak, belki de RandyGaul'un belirttiği gibi, üst / alt derinlik yanılsaması vermek için eşit olarak ölçeklendirilmemiş.
İnanıyorum ki, ikna edici olmak için yeterli 3D görünüm vermeliler.
Her iki gölgelendirici de youtube bağlantınızla aynı değildir (ayrıca daha kaba taslaktır). Ancak, bu gölgelendiricilerin umarım kendi sürümünüzü oluşturmaya başlamanız için bir yer verebileceğine inanıyorum.
Öğretici: Basit bir şerit deseni nasıl oluşturulur.
Düzlemdeki her noktanın koordinatı vardır. Gölgelendirici efekti yaratmaya çalışmak temelde 2B matematiği düzlemde görselleştirmek. Burada basit bir örnek vereyim.
//This shader will visualize coordinates
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);
Kırmızı renk x koordinatını ve yeşil renk tonu y koordinatını temsil eder. Şimdilik en basit gölgelendirici efekti oluşturmak istiyoruz; bir şerit. Bu eğitim için uv.y değerine ihtiyacımız olmayacak.
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);
Kırmızı tonun sağ tarafa doğru yöneldiğinde yoğunlaştığını görebilirsiniz. Çünkü sağ tarafa hareket ettikçe koordinatın x değeri yükselir; sol uç x koordinatı 0'dan başlar ve sağ uç x koordinatı 1'dir.
Bu temel anlayışa sahip olduğumuz için "sezgisel" bir şey deneyelim
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);
Orada bir şerit deseniniz var. Bekle ... bu pek doğru gözükmüyor. Evet bu sadece kırmızı ve siyah. Çizgili desen sadece iki renk bölümünden oluşur. Orada...!
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);
Peki ya N sayıda şerit yapmak istiyorsak?
Göstermeye çalıştığım şey, geleneksel programlama "mantığı" ile gölgelendirici programlamaya yaklaşmaya çalışırsanız, muhtemelen başarısız olmanızdır. Gölgelendirici söz konusu olduğunda, hepsi matematikle ilgilidir.
Matematikten bahsetmişken, "şerit" desenine en çok benzeyen desen nedir? Başka bir deyişle, çizgiye benzeyen denklem nedir? Evet. Y = günah (X). Ancak X değerimiz 0.0 ~ 1.0 arasında değişiyorsa Y = sin (X) kullanmak istiyorsak, x değerinin 0.0 ~ 6.28 (kabaca 2 PI) arasında olmasını istiyoruz.
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI;
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);
Şimdi bir denklem tarafından üretilen örüntü açısından "çizgimiz" var. Neden bu yaklaşımı benimsemeliyiz? Bu sadece daha hızlı olmakla kalmaz, aynı zamanda N sayıda şerit olması için çirkin "if" koşullarını yazma ihtiyacını da ortadan kaldırır. Birden fazla çizgiye sahip olmak istersek, maksimum X değerini daha da artırarak deseni genişletebiliriz.
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);
Bu gölgelendiricinin erken gölgelendiriciden olduğu gibi mükemmel bir şerit üretmediğini söyleyebilirsiniz, ancak gerçekten yapmanız gereken tek şey daha uygun denklem yazmaktır!
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);
Weeee ~~~
Sonraki: Dalgalı bir şerit deseni nasıl yapılır.
