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

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

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

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

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





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

蛇足：僕はこう思ったッス
WebGLおよびHTML5界隈の技術や活用のレベルは、北米を中心に日々向上されているが、ここにきてまた一ランクアップという印象(もっとすごいものがあったら教えてください)。ここまでくると、どういう技術的チャレンジなのかイマイチわからなくなってくるが、メモとして共有させて頂いた。