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

Paul Irish

最近、Webmonkey のニュースで、Adobe の CSS シェーダーの提案が W3C によって承認されたという記事を読みました。この提案は、新しい CSS ツールを通じてウェブに高品質の映画のようなエフェクトをもたらすものです。まだご覧になっていない場合は、動画をご覧ください。

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 ナイトリーでのみご利用いただけます。最適な状態で使用するには、いくつかの設定を調整する必要があります。

Chrome Canary の手順

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

WebKit ナイトリー ステップ

  1. Mac OSX 用の WebKit ナイトリーをダウンロードしてインストールする
  2. ブラウザの設定パネルを開きます。[詳細設定] タブに移動し、チェックボックスをオンにして、メニューバーに [開発 > WebGL を有効にする] メニューを表示します。
  3. ブラウザのメニューバーで [Develop] を選択します。