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

Paul Irish

Kısa süre önce Webmonkey'da, Adobe'ın bazı yeni CSS araçları aracılığıyla web'e yüksek kaliteli sinematik efektler getirecek CSS Shaders önerisinin W3C tarafından kabul edildiğine dair bir haber okumuştum. Henüz izlemediyseniz videoyu izleyin.

Google Chrome'un en son Canary sürümünde CSS gölgelendiricileri için destek eklendi. Bu nedenle, bu özelliği denemeye karar verdim.

Bu denemede, Google Haritalar ile bir küre oluşturmak için özel köşe gölgelendirici (spherify.vs) ve parçacık 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 satır ve 50 sütun (50 50 border-box) içeren bir ağda çalışacak bir köşe noktası gölgelendiricisi (spherify.vs) uyguluyoruz. Köşe noktası gölgelendiricisinin kaynağını (spherify.vs) okumaktan çekinmeyin. GLSL ile yazılmıştır ancak muhtemelen takip edebilirsiniz.

mix() işlevi, bir parçacık gölgelendiricide renk değiştirme için temel işlevler (ör. karıştırma ve alfa kompozisyonu) sağlar.

Kürenin yarıçapını, eksenini ve dönüşünü doğrudan CSS'de değiştirebiliriz. Bu örnekte sphereRadius: 0.5 değerini ayarlıyoruz ve orijinal küre boyutunu elde ediyoruz.

Demoyu keyifle kullanın.

Etkinin videosunu aşağıda bulabilirsiniz. Gölgelendiricileri etkinleştirdiyseniz hemen aşağıdan gerçek oyunu oynayabilirsiniz.

Yukarıda 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 en son teknoloji olduğundan yalnızca en son Google Chrome Canary ve WebKit gecelik sürümlerinde kullanılabilir. Eksiksiz bir deneyim için birkaç ayarı yapmanız gerekir.

Chrome Canary adımları

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

WebKit gecelik adımları

  1. Mac OSX için WebKit nightly'yi indirip yükleme
  2. Tarayıcının tercihler panelini açın. Gelişmiş sekmesine gidin ve menü çubuğunda Geliştirme > WebGL'yi etkinleştir menüsünü göstermek için kutuyu işaretleyin.
  3. Tarayıcının menü çubuğunda Geliştir'i seçin.