CSS gölgelendiriciler ve Google Haritalar ile etkileşimli yerküre

Paul İrlanda

Yakın zamanda, Adobe'nin bazı yeni CSS araçlarıyla yüksek kaliteli sinematik efektlerin bulunduğu CSS Shaders teklifinin W3C tarafından kabul edildiğine dair Webmonkey haberlerini okudum. Henüz izlemediyseniz videoyu izleyin.

Google Chrome'un en son Canary sürümünde CSS gölgelendiriciler için destek eklendi, ben de bunları denemeye karar verdim.

Bu deneyde, Google Haritalar ile bir yerküre oluşturmak için özel köşe gölgelendirici (spherify.vs) ve parça gölgelendirici (spherify.fs) kullandım.

<iframe
  class="globe"
  src="https://maps.google.com/?ie=UTF8&amp;amp;ll=14.597042,-15.625&amp;amp;spn=158.47027,316.054688&amp;amp;t=h&amp;amp;z=2&amp;amp;output=embed"
  scrolling="no"></iframe>
.globe {
  width: 550px;
  height: 550px;
  border: 0;
  -webkit-filter: contrast(1.4) custom(url(shaders/spherify.vs) mix(url(shaders/spherify.fs) multiply source-atop),
    50 50 border-box,
    amount 1,
    sphereRadius 0.5,
    sphereAxis -0.41 1 0.19,
    sphereRotation 43.5,
    ambientLight 0.15,
    lightPosition 1 0.87 0.25,
    lightColor 1 1 1 1,
    transform perspective(500));
}

Burada, 50 çizgi ve 50 sütundan oluşan bir ağ (50 50 border-box) üzerinde çalışacak bir tepe gölgelendiricisi (spherify.vs) uyguluyoruz. Köşe gölgelendiricisinin kaynağını okuyabilirsiniz: spherify.vs. GLSL dilinde yazılmıştır ancak muhtemelen bunu da takip edebilirsiniz.

mix() işlevi, bir parça gölgelendiricide karıştırma ve alfa birleştirme gibi renk değişikliği için temel işlevler sağlar.

Buradaki yarıçapı, ekseni, döndürmeyi doğrudan CSS'de değiştirebiliriz. Bu örnekte sphereRadius: 0.5 değerini belirliyoruz ve orijinal küre boyutunu elde ediyoruz.

Demonun keyfini çıkarın!

Aşağıda efektle ilgili bir video gösterilmektedir. Gölgelendiricileri etkinleştirdiyseniz hemen aşağıdaki gerçekle oynayabilirsiniz!

Yukarıda sadece düz bir Google Haritalar görüyorsanız, aşağıdaki talimatları uygulayarak bu özelliği etkinleştirebilirsiniz

Tarayıcı desteği: CSS gölgelendiricileri

Bu özellik şu anda son teknoloji olduğu için yalnızca en son Google Chrome Canary ve WebKit'te her gece kullanılabilir. En iyi deneyimi yaşamak için birkaç düğmeyi tıklamanız gerekir.

Chrome Canary adımları

  1. Tarayıcının gezinme çubuğuna about:flags yazın
  2. "CSS Gölgelendiricilerini Etkinleştir"i bulun. Etkinleştir
  3. Tarayıcıyı yeniden başlatın

WebKit gecelik adımlar

  1. Mac OSX için WebKit gece'yi indirip yükleyin
  2. Tarayıcının tercihler panelini açın. Advanced (Gelişmiş) sekmesine gidin ve menü çubuğunda Geliştir > WebGL'yi etkinleştir menüsünün gösterilmesini işaretleyin.
  3. Tarayıcının menü çubuğunda Geliştir'i seçin.