ウェブブラウジングの未来？HTML5の高機能ぶりを実感できるデモ9つ
これまで、ブラウザ上でリッチな映像コンテンツを表示するためには、アドビ社の「Flash（フラッシュ）」やマイクロソフト社の 「Silverlight（シルバーライト）」といった外部プラグインをブラウザとは別にインストールする必要がありました。
しかし、HTML言語の最新バージョンである “HTML5″ を使用すると、前述したようなベンダー製ソフトウェアを使わずに、ブラウザのみで多様な映像表現を実現することが可能となっています。
この度、多機能ブラウザ “Firefox” などで有名なモジラ社のエバンジェリスト・David Walsh氏は、ブログ上でそうしたHTML 5のデモアプリを挙げています。以下、それらの高機能なデモについて、簡単に紹介してゆきたいと思います。
端末やブラウザなどを変えて色々なパターンを試しましたが、モバイル環境からはデモの再生が出来ませんでした。それぞれのデモを視聴する際は、PCからの再生を推奨致します。
1. Zen Photon Garden
デモエリア内に描画すると、中央の光源から発生する光束を遮断・もしくは反射する「シールド」を作ることができます。拡散・反射・透過のパラメー ターを変更することで、様々な光の広がり方を設定することが可能になっています。
デモの再生はこちらから。
2. Tear-able Cloth
非常に軽い感触のメッシュ状オブジェクト上でマウスを左クリックすると三次元状的に形状を変化させることができ、右クリックで穴を開けることが可能 です。メッシュのたわみ方は、穴の大きさや位置によって動的に変化します。
デモの再生はこちらからどうぞ。
3. Particles
相互に結合された、カラフルに明滅する無数のオブジェクトがエリア内をランダムに移動します。通常ならばかなり負荷のかかりそうな映像ですが、非常 にスムーズに再生されている印象を受けます。
デモの再生はこちらからどうぞ。
4. Motion Graphic Typeface
非常に微細なドットを、これまた非常に細いラインで相互に結合したオブジェクト。言葉では説明しづらいので、実際にご覧になってみてください。
デモの再生はこちらからどうぞ。
5. Motion Graphic Typeface Ⅱ
4のものと同種のモデルですが、こちらでは基本素子が三角形となっており、よりデジタルな効果を出しています。こちらも、実際にご覧になられるとイメージがよく伝わるかと思います。
デモの再生はこちらからどうぞ。
6. Gestures + Reveal.JS
Kinectと同様のジェスチャー操作機能を、ウェブカメラからの映像認識により実現してい
ます。
7. Canvas Rider
ライダーをキーボード操作でゴールまで導くブラウザゲームです。組み込みの物理エンジンによ
り、非常にリアルな動きを実現しています。（私も実際にやってみましたが、結構ハマるかもしれません…）
デモの再生はこちらからどうぞ。
8. 30,000 Particles
マウスカーソルが置かれた位置を中心として微粒子が円状に排除されます。マウスが移動すると、サークル状の空乏エリアが微粒子をかき分けながら移動します。
デモの再生はこちらからどうぞ。
9. HTML5 Video Destruction
再生中の動画を左クリックすると、その場所を基点に映像がブロック上にはじけ飛ぶ仕掛けになっています。はじけ飛んだブロックピース上でも映像の再 生は続いており、しばらく放っておくと元の形に戻ります。
デモの再生はこちらからどうぞ。
以上、お仕事などで役立ちそうな機能はありましたでしょうか？HTML 5をベースとした「Firefox OS」や「Tizen」などのモバイル向けOSを搭載した製品が年内にも発売されると噂されていますが、こうした映像表現をモバイル環境からスムーズに動 作させることが出来るようになった暁には、スマートフォンの勢力図も変わってくる可能性があるかもしれませんね。
[The David Walsh Blog via THE VERGE]
