Globe interaktif dengan shader CSS dan Google Maps

Paul Irish

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 Google Chrome menambahkan dukungan untuk shader CSS, jadi saya memutuskan untuk bereksperimen dengannya.

Dalam eksperimen ini, saya menggunakan vertex shader kustom (spherify.vs) dan fragment shader (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 vertex shader (spherify.vs) yang akan beroperasi pada mesh yang memiliki 50 baris dan 50 kolom (50 50 border-box). Jangan ragu untuk membaca sumber vertex shader: spherify.vs. Kode ini ditulis dalam GLSL, tetapi Anda mungkin dapat mengikutinya.

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

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

Nikmati demonya.

Berikut adalah video efeknya. Jika shader diaktifkan, Anda dapat bermain dengan shader yang sebenarnya di bawah ini.

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

Dukungan browser: Shader CSS

Fitur ini saat ini masih dalam tahap pengembangan, sehingga hanya tersedia di Google Chrome Canary dan WebKit nightly terbaru. Untuk menikmati pengalaman sepenuhnya, Anda perlu memutar beberapa tombol.

Langkah-langkah Chrome Canary

  1. Ketik about:flags di menu navigasi browser
  2. Cari "Aktifkan Shader CSS". Mengaktifkannya
  3. Meluncurkan ulang browser

Langkah-langkah WebKit per malam

  1. Mendownload dan menginstal 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