CSS シェーダーと Google マップを備えたインタラクティブな地球

最近、Webmonkey に関するニュースを読みました。新しい CSS ツールを通じて高品質な映画のような効果をウェブにもたらす Adobe の CSS Shaders が、W3C で承認されました。まだご覧になっていない場合は、動画をご覧ください。

Google Chrome の最新の Canary 版では、CSS シェーダーのサポートが追加されたため、実際に試すことにしました。

このテストでは、カスタムの頂点シェーダー(spherify.vs)とフラグメント シェーダー(spherify.fs)を使用して、Google マップで地球を作成しました。

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

ここでは、50 本の線と 50 列のメッシュ(50 50 border-box)で動作する頂点シェーダー(spherify.vs)を適用しています。頂点シェーダーのソース(spherify.vs)は自由に参照してください。これは GLSL で記述されていますが、おそらく参考にできます。

mix() 関数は、フラグメント シェーダーでのブレンドやアルファ合成など、色操作の基本機能を提供します。

CSS では、半径、軸、回転を直接変更できます。この例では、sphereRadius: 0.5 の値を設定して、元の球体のサイズを取得しています。

デモをお楽しみください。

効果については、以下の動画をご覧ください。シェーダーを有効にしている場合は、すぐ下にある実際のゲームで遊べます。

上部に平面の Google マップが表示されている場合は、次の手順で有効にできます。

ブラウザのサポート: CSS シェーダー

この機能は現在最先端のものであり、最新の Google Chrome Canary と WebKit nightly でのみ利用できます。すべての機能を体験するには、ノブを数回回す必要があります。

Chrome Canary の手順

  1. ブラウザのナビゲーション バーに「about:flags」と入力します
  2. [CSS シェーダーを有効にする] を見つけます。有効にする
  3. ブラウザを再起動する

WebKit の夜間の歩数

  1. Mac OS X 版 WebKit nightly をダウンロードしてインストールします
  2. ブラウザの設定パネルを開きます。[Advanced] タブに移動し、メニューバーに [Develop] > [Enable WebGL] メニューを表示します。
  3. ブラウザのメニューバーで、[Develop] を選択します。