İçeriğe geç

hüseyin akkaya Yazılar

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 }

Webpack katili Parcel nedir ?

Neden parcel ?

 

Günümüzde web uygulamaları için geniş özelliklere sahip birçok demetleyici bulunmaktadır, bunların en çok kullanılanları webpack ve browserify da dahil.

Bir çok demetleyici konfigurasyon ve eklentiler ile kurulur ve sadece birşeylerin çalışması için 500 satırdan fazla satır sayısı olan konfigurasyon doslayarı genellikle var olan şeyler. Bu konfigurasyonlar sadece sıkıcı ve zaman harcayan şeyler değil ayrıca her uygulama için çoğaltmak ve doğru ayarı yapmak da zor. Sıklıkla ürün kısmına geçmede alt optimizasyonların gerektiği bir hal alabiliyor. Parcel sıfır configurasyon ayarı olacak şekilde tasarlanmıştır. SAdece giriş noktanızı belirtmeniz yeterli o geri kalanı doğru bir şekilde yapacaktır.

Var olan demetleyicilerin bir olumsuz yanı da çok yavaş olmalarıdır. Geliştirme sürecinde fazlaca değişiklierin yapılması çok fazla bağımlılığı ve fazla dosyaların olduğu büyük uygulamalarda demetleme sürecinin dakikalar alması acı verici bir durumdur. Parcel modern çok çekirdekli işlemcilerden yaralanarak kodunuzu paralel işlemlerle derler. Sonuç olarak ilk demetlemede büyük bir hız artışı olur. Ayrıca her dosya için dosya sistemi önbelleğine sahiptir, böylece ileriki başlangıçlarda da hızlıdır.

Sonuç olarak var olan demetleyiciler string yükleyiciler/dönüştürücüler üzerine kurulmuştur. Bir stringi alırlar parse ederler bazı dönüşümlerden eçirerek tekrar kod üretirler.Bu da bir dosya için fazla sayıdadönüşüm ve kod üretme anlamına gelir, pek etkili bir yol değildir bunu aksine Parcel her dosya için bir kere parse eder, birçok kez dönüşüm uygular ve birçok dönüşümden geçirerek bir defa kod üretir.

 

Yükelemek için :

yarn global add parcel-bundler

Başlangıç noktası göstermek için :

parcel index.html

Bu kadar artık geliştirme işlemine başlayabiliriz.

 

Ana sayfası: https://parceljs.org/

Github sayfası: https://github.com/parcel-bundler/parcel

Kullanımı video:

 

 

Webpack nedir?

Webpack benim de yeni kullanmaya başladığım tarayıcı tarafında yazılım geliştirikenkaranlıkta kalan çoğu yerleri aydınlatan bir paket.

Webpack aslında es6 ile npm paketleri kullanarak yazdığımız projelerde bize paketlenmiş tek bir .js çıktısı veren bir araçtır. Ayrıca dışarıdan eklediğimiz resimler, dosyalar da dahil bize hepsini güzelce derleyip toplayarak çıktı verir.

DipNOT:  Burada kullanımı anlattım, dev server için config dosyaların tanıtılmış hali burada. Webpack için config dosyası import etmemişim o da örnekte import edildi. Gitlabdaki projeye de fork veya yıldız beklerim 🙂

Hatta es6 ve Commonjs combine olsada bize toplayıp verebiliyor Ayrıca tarayıcınızın desteklemediği şeyleri de çevirebilir.

Şimdi webpack kurulumuna başlayalım:

Önce babel gereksinimlerimi kuralım:
npm install babel-cli babel-preset-es2015 --save-dev
npm install babel-core --save-dev
npm install babel-loader --save -dev

veya

yarn add babel-core -dev
yarn add babel-loader -dev

.babel.rc dosyamızı ayarlayalım:

{
"presets": ["es2015"]
}
webpack ve webpack-cli paketlerimizi yükleyelim:
npm install webpack webpack-cli --save-dev

veya

yarn add webpack webpack-cli --dev

html pluginimizi yükleyelim bu sayede derlediğimizde index.html dosyasınıda oluşturacak tek yapmamız gereken o dosyayı açmak olacak:

npm install --save-dev html-webpack-plugin
yarn add html-webpack-plugin --dev

şimdi

webpack.config.js dosyamızı ayarlayalım:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},

//bazı durumlarda bir dosya çok büyük boyutlarda olduğu için bizden ayırmamızı
// istiyor performans açısından problem olmaması için o zaman aşağıdaki şekilde
// düzenlememiz gerekir:
entry: {
index:"./src/index.js",
ikinci: "./src/ikinci.js",
ücüncü: "./src/ucuncu.js"
},

mode: 'development', // ürünü bitirdiğimizde production ayarı ile bundle ediyoruz şimdilik development modunda

//babel loaderimizi ekleyelim:

module:{
rules:[
{
test: /\.js$/,
exclude: /(node_modules | bower_components)/,
use:{
loader: "babel-loader",
options:{
presets:['es2015']
}
},
}
]
},

output: {
filename:[name]bundle.js,
path: path.resolve(__dist, 'dist'),
//publicPath:'/' // bu kısım htaccses ayarı ile .js dosyalarının kaynağını belirtmek için kullanabilirsiniz
},

plugins:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ title: "Output Managment"}) // bu kısım html sayfamızın tittlesini ayarlıyor.
]

};

Buraya kadar olan kısımla package.json dosyamıza :

"scripts": {
"wb": "webpack --config './webpack.config.js'"
}

diyerek konsoldan

npm run wb

dediğimizde bize bundlemizi vermiş olacak.

webpack-dev-server kuralumu yapalım:

Şimdi bir de geliştirme sürecinde sürekli bundle etmemek için webpack-dev-server kurmamız gerekiyor böylece her değişiklikiği kaydettiğimizde bir localhost un bir portundan değişikliğimizle sayfamız sürekli yenilenecek.

npm install webpack-dev-server --save-dev
yarn add webpack-dev-server -dev

daha sonra webpack.config.js dosyamıza plugins ten sonra ayarlarımız ekleyelim

devServer:{
contentBase: parh.join(__dirname, "build")
compress: true,
port: 9000,
//index: "index.html" // html dosyanızın yolunu verebilirsiniz.
}

şimdi tekrar package.json dosyamızda scripts kısmına komutumuzu ekleyelim

"scripts": {
"wb": "webpack --config './webpack.config.js'",
"wd": "webpack-dev-server"


}

komut satırına npm run wd yazdığımızda projemiz localhost:9000/ de bize sunulmuş olarak karşımıza çıkacak.
publicpath kısmını değiştirerek başka yollarda verebilirsiniz o zaman localhost:9000/ilkdeneme gibi linkler elde edebilirsiniz. Benim anlatacaklarım şimdilik bu kadar daha ayrıntılı bakmak isterseniz webpackin sitesinden dökümanlarını inceleyebilirsiniz.

Not: yukarıdaki işlemler:

"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
"babel-loader": "^7.1.4"
"babel-core": "^6.26"

sürümleri ile gerçekleştirilmiştir.

Bu kadar anlatımdan sonra sizler için:

 
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }

özelliklere sahip ayarlanmış bir webpack projesi hazırladım  sadece başlangıç için. Sadece css ve img kullnamak isterseniz onlar için loaderleri ayarlamanız gerekiyor. İki adet config var biri develpment, biri build için. WEbpack Proje Başlangıç

Angular2 Components ve Templates

Angular2 Companents:

angular2 Components
Components

Angular2 versiyonunda, Component view(görünüm) olarak adlandırdığımız ekran yamasını kontrol eder.

Örneğin şu görünümler componentler tarafından kontrol edilir:
-Navigasyon bağlantıları olan root uygulama,
-Kahraman listesi.
-Kahraman editörü.

Component uygulama mantığı -görünümün neyi desteteklediği- class ların içinde tanımlanır. Class lar görünümlerle API nin özellikleri veya metodları ile etkileşime geçer.

 

Örneğin HeroListComponenet bir hero metoduna sahip ve metod servisten alınan hero dizisini geri döndürüyor. HorolistComponent ayrıca selectHero() motoduna sahiptir bu metod kullanılarak kullanıcı listeden seçilen bir kahramana tıkladığında selectedHero özelliği ile ayarlar.

angular2 components
Components

Angular kullanıcı uygulamadayken componentleri create, update ve destroetme özelliğine sahiptir. Uygulamanız opsiyonel yaşamdöngüsü(lifecycle) kancalarına göre her anda bir aksiyon alabilir, yukarıda resimde belirtilen ngOnInit() gibi.

 

Templates:

angular2 templates
Templates
angular2 template
Template

Bir componentin görünümünü(view) template(şablon) ile tanımlarız. Template Angular a nasıl render edeceğini söyleyen HTML in formudur.

Bir template normal HTML gibi gözükür ama ufak tefek farklilıkları vardır.

HeroListComponent:
(resim)

Tipik <h>, <p> gibi HTML elementlerini kullanılmasına rağmen ayrıca bazı değişiklikler de vardır: *ngFor, {{hero.name}}, (click), [hero] ve <hero-detail> gibi Angular syntaxını kullanırlar.

Son satırdaki <hero-detail> tagı yeni bir component -HeroDetailComponent- hazırlayan özel bir tagdır.

HeroDetailComponent daha önce incelediğimiz HeroListComponent componentinden farklı bir componenttir. HeroDetailComponent (kodu gösterilmedi) kullanıcının HeroListComponent ile sunulmuş kahraman listesinden kullanıcının seçmiş olduğu belli kahramanlar hakkında bilgileri gösteriyor. HeroDetailComponent, HeroListComponent in çucuğudur.

angular2 component tree
Component tree

<hero-detail> tagının normal html tagları arasında nasıl kolayca yer edindiğine dikkat edin. Özel componentler HTML ile aynı layoutta sorunsuz bir şekilde karıştırılabilir.

Önceki yazı <<-