Bu sayfa, Cloud Translation API ile çevrilmiştir.

Özel Filtrelere (CSS Gölgelendiriciler olarak da bilinir) giriş

Paul Lewis

Özel filtreler veya eski adıyla CSS gölgelendiricileri, WebGL gölgelendiricilerinin gücünü DOM içeriğinizle kullanmanıza olanak tanır. Mevcut uygulamada kullanılan gölgelendiriciler neredeyse WebGL'dekilerle aynı olduğundan, bir adım geri çekilip bazı 3D terminolojilerini ve grafik ardışık düzenini biraz anlamanız gerekir.

Kısa süre önce LondonJS'de yaptığım bir sununun kayıtlı sürümünü ekledim. Bu videoda, anlamanız gereken 3D terminolojiye, karşılaşacağınız farklı değişken türlerine ve Özel Filtreler'i hemen kullanmaya nasıl başlayabileceğinize genel bir bakış sunuyorum. Demoları kendiniz oynatabilmek için slaytları indirmeniz de gerekir.

Gölgelendiricilere Giriş

Daha önce, gölgelendiricilerin ne olduğunu ve WebGL açısından nasıl kullanabileceğinizi ayrıntılı bir şekilde anlatan bir gölgelendirici girişi yazdım. Özel filtrelerin kavram ve dillerinin çoğu mevcut WebGL gölgelendirici terminolojisine dayandığı için, gölgelendiricilerle daha önce hiç çalışmadıysanız daha ileri gitmeden önce bu makaleyi okumanız gerekir.

Bu nedenle, özel filtreleri etkinleştirip devam edelim.

Özel filtreleri etkinleştirme

Özel filtreler hem Chrome hem de Canary'da ve Android için Chrome'da kullanılabilir. about:flags adresine gidip "CSS Gölgelendiricileri"ni arayın, etkinleştirin ve tarayıcıyı yeniden başlatın. Artık hazırsınız.

Söz dizimi

Özel filtreler, DOM öğelerinize zaten uygulayabileceğiniz blur veya sepia gibi filtrelerin kapsamını genişletir. Eric Bidelman, bu tür kullanıcılar için harika bir oyun alanı aracı yazdı.

Bir DOM öğesine özel filtre uygulamak için aşağıdaki söz dizimini kullanırsınız:

.customShader {
    -webkit-filter:

    custom(
        url(vertexshader.vert)
        mix(url(fragment.frag) normal source-atop),

    /* Row, columns - the vertices are made automatically */
    4 5,

    /* We set uniforms; we can't set attributes */
    time 0)
}

Burada, köşe ve kırıntı gölgelendiricilerimizi, DOM öğemizin parçalara ayrılmasını istediğimiz satır ve sütun sayısını ve ardından iletmek istediğimiz tüm üniformaları beyan ettiğimizi görebilirsiniz.

Burada belirtmemiz gereken son bir nokta, mix() işlevini, birleştirme modu (normal) ve birleştirilmiş mod (source-atop) ile birlikte parçacık gölgelendiricinin etrafında kullandığımızdır. mix() işlevine neden ihtiyaç duyduğumuzu görmek için parçacık gölgelendiriciye göz atalım.

Pixel Pushing

WebGL'nin gölgelendiricileri hakkında bilginiz varsa Özel Filtreler'de bazı şeylerin biraz farklı olduğunu fark edeceksiniz. Örneğin, parçacık gölgelendiricimizin pikselleri doldurmak için kullandığı dokuları oluşturmuyoruz. Bunun yerine, filtre uygulanmış DOM içeriği otomatik olarak bir dokuya eşlenir. Bu durum iki anlama gelir:

Güvenlik nedeniyle DOM'un dokusuna ait piksel renk değerlerini tek tek sorgulayamıyoruz.
Nihai piksel rengini (en azından mevcut uygulamalarda) kendimiz belirlemeyiz. Yani gl_FragColor kullanılamaz. Bunun yerine, DOM içeriğini oluşturmak istediğiniz varsayılır ve css_ColorMatrix ve css_MixColor aracılığıyla piksellerini dolaylı olarak değiştirmeniz gerekir.

Bu da, "Merhaba Dünya" parçacık gölgelendiricimizin şöyle göründüğü anlamına gelir:

void main() {
    css_ColorMatrix = mat4(1.0, 0.0, 0.0, 0.0,
                            0.0, 1.0, 0.0, 0.0,
                            0.0, 0.0, 1.0, 0.0,
                            0.0, 0.0, 0.0, 1.0);

    css_MixColor = vec4(0.0, 0.0, 0.0, 0.0);

    // umm, where did gl_FragColor go?
}

DOM içeriğinin her pikseli css_ColorMatrix ile çarpılır. Yukarıdaki durumda tanım matrisi olduğundan ve RGBA değerlerinden hiçbirini değiştirmediğinden bu işlem hiçbir şey yapmaz. Örneğin, yalnızca kırmızı değerleri tutmak isteseydik şuna benzer bir css_ColorMatrix kullanırdık:

// keep only red and alpha
css_ColorMatrix = mat4(1.0, 0.0, 0.0, 0.0,
                        0.0, 0.0, 0.0, 0.0,
                        0.0, 0.0, 0.0, 0.0,
                        0.0, 0.0, 0.0, 1.0);

4D (RGBA) piksel değerlerini matrisle çarptığınızda diğer taraftan, bu durumda yeşil ve mavi bileşenleri sıfıra ayarlayan bir şekilde değiştirilmiş bir piksel değeri elde ettiğinizi görebilirsiniz.

css_MixColor, temel olarak DOM içeriğinizle karıştırmak istediğiniz bir temel renk olarak kullanılır. Karışım, sanat paketlerinden aşina olduğunuz harmanlama modları (ör. yer paylaşımı, ekran, renk azaltma, sert ışık vb.) aracılığıyla yapılır.

Bu iki değişkenin pikselleri değiştirmesinin birçok yolu vardır. Karışım ve birleştirme modlarının nasıl etkileşime girdiğini daha iyi anlamak için Filtre Efektleri spesifikasyonuna göz atmanız gerekir.

Köşe Oluşturma

WebGL'de, örgümüzün 3D noktalarının oluşturulması konusunda tüm sorumluluğu üstleniriz. Ancak Özel Filtreler'de, istediğiniz satır ve sütun sayısını belirtmeniz yeterlidir. Tarayıcı, DOM içeriğinizi otomatik olarak bir grup üçgene böler:

Bu köşe noktalarının her biri, işleme için köşe noktası gölgeleme programımıza iletilir. Bu sayede, bunları 3D uzayda ihtiyacımız olduğu gibi hareket ettirmeye başlayabiliriz. Çok geçmeden muhteşem efektler oluşturabileceksiniz.

Gölgelendiricilerle animasyon oluşturma

Gölgelendiricilerinizi eğlenceli ve ilgi çekici hale getiren şey, animasyon eklemektir. Bunu yapmak için CSS'nizde tekdüze değerleri güncellemek üzere bir geçiş (veya animasyon) kullanmanız yeterlidir:

.shader {
    /* transition on the filter property */
    -webkit-transition: -webkit-filter 2500ms ease-out;

    -webkit-filter: custom(
    url(vshader.vert)
    mix(url(fshader.frag) normal source-atop),
    1 1,
    time 0);
}

    .shader:hover {
    -webkit-filter: custom(
    url(vshader.vert)
    mix(url(fshader.frag) normal source-atop),
    1 1,
    time 1);
}

Yukarıdaki kodda dikkat edilmesi gereken nokta, geçiş sırasında sürenin 0 değerinden 1 değerine kademeli olarak düşürüleceğidir. Gölgelendiricinin içinde time üniformasını tanımlayabilir ve geçerli değerini kullanabiliriz:

    uniform float time;

uniform mat4 u_projectionMatrix;
attribute vec4 a_position;

void main() {
    // copy a_position to position - attributes are read only!
    vec4 position = a_position;

    // use our time uniform from the CSS declaration
    position.x += time;

    gl_Position = u_projectionMatrix * position;
}

Oynamaya başlayın.

Özel filtrelerle oynamak çok eğlencelidir ve bu filtreler olmadan oluşturabileceğiniz muhteşem efektler zordur (ve bazı durumlarda imkansızdır). Henüz çok erken bir aşamadayız ve çok fazla şey değişiyor. Ancak bu öğeleri eklemek, projelerinize biraz şov dünyasının havasını katar. Neden denemeyesiniz?