最近、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;ll=14.597042,-15.625&amp;spn=158.47027,316.054688&amp;t=h&amp;z=2&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 の手順
- ブラウザのナビゲーション バーに「
about:flags
」と入力します - [CSS シェーダーを有効にする] を見つけます。有効にする
- ブラウザを再起動する
WebKit の夜間の歩数
- Mac OS X 版 WebKit nightly をダウンロードしてインストールします
- ブラウザの設定パネルを開きます。[Advanced] タブに移動し、メニューバーに [Develop] > [Enable WebGL] メニューを表示します。
- ブラウザのメニューバーで、[Develop] を選択します。