CSS3Dで作られたリアルな“雲”、チュートリアル付き 【増田 @maskin】

[読了時間: 2分]

　HTML5といったウェブ標準化技術には賛否いろいろあるけれど、世界のITシーンでは常にホットなトピックであるのは変わりない。

　例えば、これ。スペイン・バルセロナのJaume Sánchez Elias氏が制作したインタラクティブな雲。最新のウェブブラウザでページ (http://www.clicktorelease.com/code/css3dclouds/) を表示すれば、驚くことうけあい。

　リアルな雲が、マウス等の動きに応じて動くのはもちろん、雲を子細に渡りチューニングをすることもできる。もちろん、ウェブの技術だけで、プラグインなどは使用していない。

Windows 7の資産も活用可能

　これは、CSS3Dを中心に、簡単なJavaScriptでできているもので、単に雲っぽく表示させているだけでなく、あたかも3Dでレンダリングしたようにブラウズできるように設計されている。

　どうやら、一部に有名なWebGL(ウェブブラウザ向けに標準化されているグラフィック描画ライブラリ)の雲からインスピレーションを受けているらしく、また、3Dゲームにおける雲の表現 ( PDF )も参考にしているとか。

　あくまで疑似的な3Dはあるのだけど、ウェブ上のライトな3D表現の作り方として参考になる事例として話題になっているようだ。チュートリアルも公開されているので、興味のある人はトライしてはどうだろう。

【関連URL】
・CSS 3D Clouds
http://www.clicktorelease.com/code/css3dclouds/
・How to make clouds with CSS 3D – Blog – Clicktorelease
http://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d

蛇足：僕はこう思ったッス
世界のITトピックを眺めていると、ほぼ毎日 HTML5やCSS3/CSS3D周辺のデモやJavaScriptライブラリが登場してくる。世界のITトピックはこの2ポイントにきているというのは2年ほど前からお伝えしていたが、最近はFireFoxOSの登場もあり、さらに加熱するのは必至だ。
気になるのは日本発でこうした完成度の高い(訴求力のある)デモなりがなかなか登場してこないこと。この辺で遅れると致命的だと思うので、技術専門でなくてもフォローはしておいた方がいいと思う。