İçeriğe geç

Etiket: webgl

WEBGL nedir? -4 Vertex Shader ve Fragment Shader açıklama

Bu yazıda shaderlerden bahsedip sonra shader programla olan ilişkisini açıklayacağım. Daha sonaki yazılarda webgl kısmı ile ekrana birşeyler çizdirmeye başlayacağım. Vertex shader ve Fragment shader webgl tarafında çizim için çok gerekliler bu yüzden bu kısımları iyi öğrenmemiz gerekiyor. Çok hızlı bir süreç değil fazla şey bilmek gerekiyor ama bildikten sonra yapması eğlenceli.

Vertex Shader:

Öncelikle shader language yazısında kullandığım vertex shader kodundan açıklamaya başlayalım.

const vsSource = `
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main(void) {
gl_Position = uModelViewMatrix * vec4(aVertexPosition,1);
}
`;

yukarıdaki vertex shader kod parçacığında ilk olarak attribure değişkenleri olarak aVertexPosition, ve aVertexColor değişkenleri tanımlıyoruz bunlar attribute tipinde çünkü her vertexin kendine özel koordinat ve renk bilgisi var. Sonra sabit dışarıdan verdiğimiz uModelViewMatrix ve uProjectionMatrix 4×4 matrisleri var bunlarında tipi uniform yani dışarıdan biz tekar set etmediğimiz sürece aynı kalan değişkenler. Zaten bu değişken tiplerine önceki yazımda değinmiştim.

Peki yukarıdaki olay nedir? Model matris ile vertex vektörünü çarpıp cismin clip spacedeki yeni buluyoruz. yukarıdaki kodda uProjectionMatrix ile çarpmadım yani herhangi bir perspektife sahip değil. Eğer perspektif eklemek istiyorsak en başa uProjectionMatrix i çarpım olarak yazmamız gerekirdi.

Mesela yukarıdak kodda aVertexPosition vec3 tipinde yani 3 eksenli bir koordinat ama bu 2 eksenli de olabilirdi iki eksenli olsaydı yani vec2 aVertexPosition; o zaman çarpımda kullandığımız değer şu şekilde olacaktı *vec4(aVertexPosition,0,1)

 

Fragment shader :

Gene shader language yazımdaki fragment shader kodunu alacağım.

const fsSource = `
uniform lowp vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}
`;

Burada ilk olarak dikkat ettiğimiz vColor değişkeninin lowp limitinde olması bunun nedeni renk değeri 0 ile 1 arasında oluyor. yani beyaz vec3(1,1,1) rengi opaklığı da eklersek vec4(1,1,1,1) şeklinde olur. Bu renklerde de çok çok büyük sayılar kullanmıyorsak en düşük limitler işimi çok rahatlıkla görecektir. Buradaki shader kodlar en sade haliyle mesela fragment shaderde şu an texture eklemedik. Çizdiğimiz şeye sadece renk veriyoruz.

 

Shader Program:

Shader kodları bu şekilde tanımlandıktan sonra gl ile vertex shader ve fragment shader nesneleri oluşturuluyor.

const vertShader = gl.createShader(gl.VERTEX_SHADER)
const fragShader = gl.createShader(gl.FRAGMENT_SHADER)

daha sonra bu shaderlere yukarıdaki kaynak kodlar gösterilip bu kodlar bu nesneler için derleniyor.

gl.shaderSource(vertShader,vsSource)
gl.compileShader(vertShader)

gl.shaderSource(fragShader,fsSource)
gl.compileShader(fragShader)

Bu adımdan sonra gl ile gpu da koşacak programımızı oluşturuyoruz.

const shaderProgram = gl.createProgram()

Ve oluşturulan bu programa shaderer tutuşturulup vertex shader ve fragment shader birbirine bağlanıyor.

gl.attachShader(shaderProgram, vertShader)
gl.attachShader(shaderProgram, fragShader)
gl.linkProgram(shaderProgram)

Yani shader programı yaratılırken hangi shaderleri derleyip hangisinin birbiriyle bağlanacağına biz karar veriyoruz. Program GPU da koşuyor ama yönetim bizde oluyor. Bir sonraki yazıda artık ekrana birşeyler çizdireceğim. Tabi bu aşamada da shader programına hangi değişkenlere hangi değerlerin gideceği konusunda bizim yardım etmemiz gerekiyor bu adımları da görmüş olacağız.

WEbGL nedir? -3 GLSL değişkenler ve yazım kuralları nedir?

Önceki yazımda webgl e hızlı bir giriş yaptım ve bu yazımda GLSL değişkenler ve yazımı üzerinde duracağım.Bu değişkenler ve kurallar önemli çünkü bunları bilirsek daha karmaşık shaderler üretebiliriz. Shaderimizin içinde sadece main fonksiyonu olmak zoruna değil yeni fonksiyonlar ekleyip bunları çağırabiliriz.

Veri tipleri:

Standart bildiğimiz int, float, bool, void tiplerinin yanında grafik kartına özel başka değişkenler var bunlar:
mat2(2×2) mat3(3×3) mat4(4×4) matris(iki boyutlu dizi) oluşturmak için kullanılıyor.
vec2, vec3, vec4 float point vektör(tek boyutlu dizi) oluşturmak için kullanılıyor.
bvec2, bvec3, bvec4 boolean değerleri tutan vektörler oluşturmak içni kullanılıyor.
ivec2, ivec3, ivec4 işaretli int değerler tutan vektörler oluşturmak için kullanılıyor.
sampler2D texture(doku) a ulaşmak için kullanılan değer.
samplerCube texture ile alakalı bir değer bunu kullanmadım.

3 adet niteleyicimiz var bunlar:

Attribure:

Shaderin her çalışmasında her vertex için kullanılan değişkendir, değeri her draw işleminde değişir.Yani hesaplamalrda tekrar tekrar kullandığımız değişkenlerdir. Örneğin önceki yazıdaki :

ttribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

değişkenleri gibi. Bu değişkenler her vertex için kullanılır ve her seferinde değer o vertex için hesaplanır.

Uniform:

Bu değişkenler sabit değere sahiptir shader içinde sadece okuma özelliği olan değişkenlerdir dışarıdan bizim müdahalemiz ile değişebilir ancak shader programı bu değeri değiştiremez. Bir kere atadığımızda hep o değer geçerli olur. Örneğin önceki yazıdaki fragment shader deki

uniform lowp vec4 vColor; //lowp ve vec4 aşağıda açıklanacak

değişkeni gibi. Bu değişkene değer atarken şu şekilde atadığımızda hep o değişken sabit kalır

gl.uniform4fv([0,0,255,1]) // daha sonra açıklayacağım

Varying:

Vertex shader ve Fragment shader arasındaki bağlantılı olan değişkenleri ifade eder. Örneğin vertex shader deki bir değişkeni fragment shader de kullanmak istediğimizde o değişkeni varying olarak belirtmemiz gerekir. Örneğin

//vertex shader da
uniform vec4 baskaDeger;
varying vec4 vector;
void main(void){
vector = baskaDeger;
}

//fragment shader da
varying vec4 vector;
void main(void){
//baskaDeger değişkenini değeri burada vector değişkeninden kullanılabilir.
}

Sayı limitleri:

Shader lerde kullandığımız sayı değerlerine bellirli limitler ekleyerek istediğimiz aralıkta sayılar üretilmesini sağlayabiliriz. Tabi bu aralığı vermezsek default aralıkta program gene çalışır.Ancak ayar yapma gereği duyduğumuzda bunları kullanabiliriz.

Bu aralıklar highp, mediump ve lowp olarak adlandırılıyor. Aşağıdaki grafikte aralıkları görebilirsiniz.

GLSL sayı limtleri

WEBGL nedir? -2 Shader Language

Shader language yada OpenGL SL(Shader Language) yada GLSL, opengl in yeni sürümlerinde kullanılan grafik kartı üzerinde küçük programcıklar çalıştırmaya yarayan C diline benzer yazım kuralları olan bir dildir. WEBgl GLSL kullanır. GLSL ile artık grafik kartında işlenecek koda daha fazla müdehale edebiliyoruz ve işlem yoğunluğu gerektiren kısımları grafik kartına yıkarak daha hızlı bir şekilde yapabiliyoruz.

Ben WEBgl yazı dizisi oluşturduğum için WEBgl ile kullanım biçimine göre anlatımımı yapacağım.

Vertex Shader:

Grafik kartına her vertex i nasıl işleyeceği ve bu vertexler için gerekli matematiksel işlemleri(matris çarpımı) nasıl yapacağını belirttiğimiz yer. Temel olarak projeksiyon matris, model matris ve vertex vektörünü çarparak bir uzay elde edildiği kısım.

Fragment Shader:

Fragment Shader ise her pixel için herekli renk veya texture işlemlerinin belirtildiği yer.

Aşağıdaki resimde nasıl olduğuna dair bir resim paylaşıyorum:

fragment shader,vertex shader
fragment shader,vertex shader

Aşağıdaki örnekte ES6 ile yazığım bir classta shaderleri nasıl oluşturduğum yer alıyor, bunları örnek olarak koyuyorum ileriki yazılarda Vertex Shader ve Fragment Shader e daha detaylıca değineceğim.:


class CreateShaderProgram {
  constructor() {

  }
  CreateShader(gl){

    const vsSource = `
      attribute vec3 aVertexPosition;
      attribute vec4 aVertexColor;

      uniform mat4 uModelViewMatrix;
      uniform mat4 uProjectionMatrix;

      void main(void) {
        gl_Position = uModelViewMatrix * vec4(aVertexPosition,1);
      }
      `;

    const vertShader = gl.createShader(gl.VERTEX_SHADER)

    gl.shaderSource(vertShader,vsSource)

    gl.compileShader(vertShader)


    const fsSource = `
      uniform lowp vec4 vColor;

      void main(void) {
        gl_FragColor = vColor;
      }
      `;

    const fragShader = gl.createShader(gl.FRAGMENT_SHADER)

    gl.shaderSource(fragShader,fsSource)

    gl.compileShader(fragShader)

    const shaderProgram = gl.createProgram()
    gl.attachShader(shaderProgram, vertShader)
    gl.attachShader(shaderProgram, fragShader)
    gl.linkProgram(shaderProgram)

    return shaderProgram
  }
}

export { CreateShaderProgram }

WebGL Yazı dizisi -1

WebGl nedir?

logo-webgl
WEbGL

3D animasyonları tarayıcı üzerinde gerçekleştirmek için bize olanak sağlayan bir javascript API sidir.

Khronos grup tarafından geliştirilen bir web standartıdır.Khronos Gurup a ek olarak Google (Chrome), Mozilla (Firefox), Apple (Saferi) ve diğer 3D yazılım geliştiricileride destek vermektedir.

Spesifik bir bağlam olan HTML canvas elementinde çalıştırılır, bu size Javascript te hardware-accelerated 3D oluşturucusuna ulaşmanızı sağlar. Çünkü WebGL canvas elementinde çalışır, ayrıca WebGl Bütün DOM arayüzleriyle tamamen entegredir. WEbGl API OpenGL ES 2.0 temellidir, bunun anlamı birçok farklı aygıtta çalışabilir, örneğin masaüstü bilgisayarlar, telefonlar, TV vs. Bunlara Khronos in web sitesinde spesification bölümünden ulaşabilirsiniz.

Nasıl çalıştıracağım ?

Genelde ek bir işlem yapmanıza gerek yok Chrome ve Firefoxta kullandığınız sürümler WEbGl i destekliyor çok eski olmadığı sürece.

Ayrıca İyi bir grafik kartına sahip olmanız WEbGl performansınızı artırır.

Ne için kullanılır ?

Geliştiricilere Gerçek zamanlı 3d grafikleri tarayıcıda oluşturmaya izin verir. WEbGl ile interaktif müzik, videolar,oyunlar, data sanallaştırması, art, 3D tasarım ortamları, 3D uzay modelleme, 3D nesne modelleme, matematiksel fonksiynların denenmesi,fiziksel simülasyonların yapılması gibi birçok şey uygulanabilir bu sizin hayal gücünüzle sınırlı bir dünya.

Nasıl çalışır ?

Tipik web teknolojilerine göre daha fazla karmaşıktır, çünkü direkt olarak grafik kartıyla çalışması için tasarlanmıştır. Sonuç olarak çok düşük seviyedir.Bu karmaşık 3D gerçekleştirmeleri içeren bir çok hesabı çabucak yapmaya imkan sağlar.

WEbGl in iç işleyisini(rendering) tamamen anlamana gerek yok. Karmaşık işleri elden çıkaran birkaç tane WEbGL kütüphanesi mevcut. Ancak kütüphanende olmayan seçenekler le kodunu zenginleştirmek istersen nasıl çaçlıştığını anlamak kullanışlı olabilir yada daha iyi kavramak için kütüphanelerin bunu nasıl yaptığını görmek ile de bunu yapabilirsiniz seçim tamamen size ait.

WebGL programlama yaparken, genellikle bir tür sahne(scene) işlemek hedefliyoruz.Bu, genellikle bir işlem oluşturma boru hattı(pipeline) adı verilen olsa da GPU içinde gerçekleştirilmektedir, her biri çok sayıda daha sonraki çizim işleri veya “çağrı” içerir.

Birçok gerkeç-zamanlı ^d çizimlerde olduğun gibi üçgen modellerin çiziminde temel elemandır. Bu nedenle WEbGl deki çizim işlemi, spesifik bilgileri oluşturmak için java script kullanır nerede, üçgenler nasıl üluşturuldu ve nasıl görünüyor(renk, gölgelendirme,yazı vs.) gibi bilgiler.Sonra bu bilgiler, hangi işlem olduğu ve döndürdüğü sahne(scene) görüntüsü GPU ya yollanır. Daha sonra bu son olayın nasıl olduğunu anlatacağım. Tam oalrak temel olay bu son kısımda aslında o yüzden bu kısmı ayrı bir yazıda anlatacağım.