[ここまで来てるウェブ技術] WebGLによる波シミュレーション 【@maskin】

HTML5&JavaScript, News


[読了時間: 2分]

 HTML5の流れとあわせてウォッチしておきたい「WebGL」ーウェブブラウザに実装されるべく仕様策定が進むグラフィック描画API(アプリケーション・プログラミング・インターフェイス)によるデモの中から、筆者が注目したものをお伝えしていく「ここまで来てる!」のコーナー。しばらく更新ができていなかったが、久し振りのトピックです。

screenshot_591





 「Ocean Wave Simulation」は、WebGLをベースに、JavaScript+CSSで制御&表現している海の波シミュレーター。波の高さや風向きや風速、大きさや角度などを調整できるようになっている。(ブラウザが限定されるので、見えない人は末尾の動画をご覧いただきたい)。

 コンピュータグラフィックスにおけるオブジェクトの光源計算・陰影処理などを実行するシェーダのパワーをふんだんに使用したデモ。。

 これをJavaScriptの演算に依存するのではなく、シェーダ言語であるGLSL (OpenGL Shading Language) に処理をまかせることでGPUのパワーで描画しているようで、コーディングの妙に注目が集まっている。

 なお、JSFiddleでもソースコードが共有されている。





【関連URL】
・Ocean Wave Simulation
http://david.li/waves/

蛇足:僕はこう思ったッス
maskin2011009rev.fw WebGLおよびHTML5界隈の技術や活用のレベルは、北米を中心に日々向上されているが、ここにきてまた一ランクアップという印象(もっとすごいものがあったら教えてください)。ここまでくると、どういう技術的チャレンジなのかイマイチわからなくなってくるが、メモとして共有させて頂いた。
著者プロフィール:TechWave 編集長・イマジニア 増田(maskin)真樹
8才でプログラマ、12才で起業。18才でライター。1990年代はソフト/ハード開発&マーケティング → 海外技術&製品の発掘 & ローカライズ → 週刊アスキーなどほとんど全てのIT関連媒体で雑誌ライターとして疾走後、シリコンバレーで証券情報サービスベンチャーの起業に参画。帰国後、ブログCMSやSNSのサービス立ち上げに関与。坂本龍一氏などが参加するグループブログ立ち上げなどを主導した。ネットエイジ等のベンチャーや大企業内のスタートアップなど多数のプロジェクトに関与。生んでは伝えるというスタイルで、イノベーターを現場目線で支援するコンセプト「BreakThroughTogether」でTechWaveをリボーン中 (詳しいプロフィールはこちら)

maskin
Follow me

maskin

Editor In Chief at TechWave.jp
1990年代初頭からソフトからハードまで50以上のスタートアップ立ち上げを国内外で経験。平行して雑誌ライターとして疾走。シリコンバレーでガレージベンチャーに参画後は、国内でネットエイジを筆頭にスタートアップに多数関与。ブログやSNSの国内啓蒙、ソニーの社内イノベーション事業など関与。通信キャリアのニュースポータルの立ち上げ期の編集デスクとして数億PV事業に育てた後、TechWaveにジョイン。世界最大のグローバルIT系メディアであるスペインの「Softonic」の元日本編集長
https://www.wantedly.com/users/24387
https://keybase.io/maskin
maskin
Follow me

最新情報をお届け

こっちはいろいろ

HTML5&JavaScript, NewsHTML5, WebGL

Posted by maskin


PAGE TOP
More in HTML5
「Shumway」HTML5で作られたFlash Playerが公開 (Firefox版) 【@maskin】

広告のHTML5化加速か、Googleがインタラクティブ広告制作ツール「Google Web Designer」を無料提供 【増田 @maskin】

アシアル「Onsen UI」をオープンソースで公開、HTML5ベースのモバイルアプリUIフレームワーク 【増田 @maskin】

Close