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

• About
• Latest Posts

maskin

Editor In Chief at TechWave.jp

1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。

Latest posts by maskin (see all)

• 「ソラコム」がスイングバイIPOを実現、東証グロース市場上場承認 - 2024-02-22
• （更新）結果速報 LAUNCHPAD SEED#IVS2023 #IVS #IVS @IVS_Official - 2023-03-09
• 「始動 Next Innovator 2022」締め切りは9月5日（月）正午ー経産省・JETRO主催のイノベーター育成プログラム #始動2022 - 2022-09-01

[読了時間: 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の登場もあり、さらに加熱するのは必至だ。
気になるのは日本発でこうした完成度の高い(訴求力のある)デモなりがなかなか登場してこないこと。この辺で遅れると致命的だと思うので、技術専門でなくてもフォローはしておいた方がいいと思う。