読者です 読者をやめる 読者になる 読者になる

BppLOG

Berlin → Tokyo

Javascript(WebGL)で作られたミュージックビデオの完成度がとても高い


日本で一番簡単にビットコインが買える取引所 coincheck bitcoin

WebGLを活用したインタラクティブなミュージックビデオがとてもカッコよかったので3つご紹介します。

WebGL (Web Graphics Library) は、互換性がある Web ブラウザでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。
WebGL - Web API インターフェイス | MDN

DENNIS

http://www.dennis.video/assets/img/about/dennis-hero.png

WebGLを使ったリッチな3D表現が使用できるライブラリ「three.js」を利用して作成されたミュージックビデオ
再生はこちらから
www.dennis.video

ポップな配色とサウンドがとても良いです。
音楽にマッチした多角形のオブジェクトの3Dモデルは、再生される度に動的にモデルデータが生成されています。
そのため、2度と同じ映像になることはありません。映像の再生中には、カーソルの動きに合わせてアングルが変わるというインタラクティブ性もあります。

http://www.dennis.video/assets/img/about/gifs/rain.gif

http://www.dennis.video/assets/img/about/gifs/bullet.gif

three.js の他にも、以下のライブラリなども利用しているようです。

"ROME - 3 Dreams of Black"

http://i.ytimg.com/vi/ReH7zzj5GPc/sddefault.jpg

映像作家の Chris Milk 氏が Google のエンジニア達と作成した作品。
再生はこちらから。
www.ro.me

GoogleのChrome Experimentsは、ブラウザ上で動作する作品をクリエイター達が投稿するサイトである Chrome Experiments にも投稿されているようです。
www.chromeexperiments.com

こちらもインタラクティブな作品となっており、車両に乗っているシーンなどではカーソルを移動することでアングルを変更することが出来ます。
紹介ページでは、利用している技術の詳細や開発風景などが公開されています。
ROME : TAKE A LOOK BEHIND THE CURTAIN

3Dモデルのビューワーも用意されており、
実際にパラーメータを変更してみたり出来るので面白いです。

f:id:tky_bpp:20161224162650p:plain

three.js の他には、Processing.js が利用されているようですね。
Chrome に最適化されているようなので、Firefoxではパフォーマンスが落ちてしまうようです。

Something / Nothing

f:id:tky_bpp:20161224163006j:plain

こちらも完成度が高い作品。
キャラクターのシュールさは否めませんが、ユーザのキー入力やマウス操作にインタラクティブに反応し、音楽と3Dの融合が素晴らしい仕上がりになっています。
海外の有名掲示板 Reddit でも話題になっていたようです。

再生はこちらから
Alpha Beta Fox :: Something/Nothing


こちらも解説のページが公開されています。
Alpha Beta Fox :: About Something / Nothing
three.js の他には HTML5 の Web Audio API なども利用されているようですね。




WebGL自体は2010年頃から話題にはなっているので、新しい技術では無いものの、レンダリングにおいてマシンのスペックに依存してしまう課題もありました。
ですが、最近ではマシンの性能も大きく向上しているため、今後はこのようなインタラクティブな作品が増えてくるのかもしれません。


初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

JavaScriptでインタラクティブ3Dコンテンツを作ろう―Kinect+jThree+Milkcocoaを使って東北ずん子と踊る (NextPublishing)

JavaScriptでインタラクティブ3Dコンテンツを作ろう―Kinect+jThree+Milkcocoaを使って東北ずん子と踊る (NextPublishing)

  • 作者: 大田昌幸,落合渉悟,菅原のびすけ,中佳博,山本允葵
  • 出版社/メーカー: インプレスR&D
  • 発売日: 2015/09/11
  • メディア: Kindle版
  • この商品を含むブログを見る
明解WebGL iOS/Androidも対応した3D CGプログラミングのWeb標準

明解WebGL iOS/Androidも対応した3D CGプログラミングのWeb標準