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

HTML5, NewsCSS3D, HTML5, JavaScript


[読了時間: 2分]

screenshot_23

 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

appex2013_280x125

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

著者プロフィール:TechWave 編集長・イマジニア 増田(maskin)真樹
変化し続ける高エネルギー生命体。8才でプログラマ、12才で起業。18才でライター。道具としてのIT/ネットを追求し、日米のIT/ネットをあれこれ見つつ、生み伝えることを生業として今ここに。1990年代はソフト/ハード開発&マーケティング→週刊アスキーなど多数のIT関連媒体で雑誌ライターとして疾走後、シリコンバレーで証券情報サービスベンチャーの起業に参画。帰国後、ネットエイジ等で複数のスタートアップに関与。関心空間、@cosme、ニフティやソニーなどのブログ&SNS国内展開に広く関与。坂本龍一氏などが参加するプロジェクトのブログ立ち上げなどを主導。 Rick Smolanの24hours in CyberSpaceの数少ない日本人被写体として現MITメディアラボ所長 伊藤穣一氏らと出演。活動タグは創出・スタートアップマーケティング・音楽・子ども・グローカル・共感 (現在、書籍「共感資本主義」「リーンスタートアップ」執筆中)。@宇都宮ー地方から全国、世界へを体現中。

メール maskin(at)metamix.com | 書籍情報・ 詳しいプロフィールはこちら


maskin
Follow me

maskin

Editor In Chief at TechWave.jp
1990年代初頭から国内外のソフトからハードまで50以上のスタートアップ立ち上げを経験。平行して雑誌ライターとして疾走。シリコンバレーでガレージベンチャーに参画後は、ネットエイジを筆頭にスタートアップに多数関与。ブログやSNSの国内啓蒙、ソニーの社内イノベーション事業など関与。直近では通信キャリアのニュースポータルの立ち上げ期の編集デスクとして数億PV事業に育てた後、TechWaveにジョイン。世界最大のIT系メディアであるスペインの「Softonic」に参加後、2016年からTechWave第三章として新興メディアの開発を再スタート。国内最大規模のスタートアップ&B2Bイベント「アプリ博」のオーガナイザー。
maskin
Follow me

HTML5, NewsCSS3D, HTML5, JavaScript

Posted by maskin