Globe interaktif dengan shader CSS dan Google Maps

Baru-baru ini, saya membaca berita di WebMonkey bahwa proposal CSS Shaders Adobe, yang akan menghadirkan efek sinematik berkualitas tinggi ke web melalui beberapa alat CSS baru, telah diterima oleh W3C. Jika Anda belum melihatnya, tonton videonya.

Canary terbaru dari Google Chrome menambahkan dukungan untuk shader CSS, jadi saya memutuskan untuk bereksperimen dengannya.

Dalam eksperimen ini, saya menggunakan shader vertex kustom (spherify.vs) dan shader fragmen (spherify.fs) untuk membuat globe dengan Google Maps.

<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));
}

Di sini, kita menerapkan shader vertex (spherify.vs) yang akan beroperasi pada mesh yang memiliki 50 garis dan 50 kolom (50 50 border-box). Jangan ragu untuk membaca sumber shader vertex: spherify.vs. Kode ini ditulis dalam GLSL, tetapi Anda mungkin dapat mengikutinya.

Fungsi mix() menyediakan fungsi dasar untuk manipulasi warna seperti pencampuran dan pengomposisian alfa pada shader fragmen.

Kita bisa mengubah radius, sumbu, dan rotasi shere di CSS. Dalam contoh ini, kita menetapkan nilai sphereRadius: 0.5 dan memberikan ukuran bola asli.

Nikmati demonya!

Di bawah ini adalah video penerapannya. Jika shader telah diaktifkan, Anda dapat bermain dengan aslinya langsung di bawah ini.

Jika Anda hanya melihat Google Maps datar di atas, Anda dapat mengaktifkannya dengan petunjuk di bawah ini

Dukungan browser: shader CSS

Saat ini, API ini tercanggih, sehingga hanya tersedia di Google Chrome Canary dan WebKit tiap malam. Untuk menikmati pengalaman sepenuhnya, Anda perlu putar beberapa tombol.

Langkah-langkah Chrome Canary

  1. Ketikkan about:flags di menu navigasi browser
  2. Cari "Aktifkan Shader CSS". Aktifkan
  3. Luncurkan kembali browser

Langkah malam WebKit

  1. Unduh dan instal WebKit Nightly untuk Mac OSX
  2. Buka panel preferensi browser. Buka tab Advanced dan centang untuk menampilkan menu Develop > Enable WebGL di panel menu.
  3. Di panel menu browser, pilih Develop