[&] FITCTokyo 2015 - Mr. doob
#FITCTokyo 2015 リアルタイムの実現 Achieving Realtime
with リカルド・カベッロ Mr. doob @mrdoob
----------------------------------------------------------------
Mr.doob といいます。CGやってます。2011年に FITC Tokyo で発表しました。
2014年 Chrome が WebGL 対応になりました。
コンピュータの中にあるグラフィックスカードを使えるようになるインタフェースです。
当時 2011年の時、Webを DEMOシーンとして使っていくのはどうしたら良いのかという話しでした。
Chrome が WebGL 対応になったので、Webからグラフィックスカードにアクセスできるようになっていました。
Demoscene においては、
デモシーンは国際的なアートサブカルチャーである。
デモを生成することに特化したもので、小さなコンピュータプログラムで、
オーディオビジュアルなプレゼンテーションが出来るもの。
私自身が関わってきました。
こういったデモシーンの知識を Web に反映させることができるようになってきました。
FAIRLIGHT (Apocalypse When by Fairlight)
これは youtube バージョンですが、オリジナルはリアルタイムで生成しているものです。
Benefits of Realtime
インタラクティブじゃない映像なのに、なぜリアルタイムにする必要があるのか？
いくつかのメリットがあります。ビデオよりもファイルサイズを小さく、
ロード時間、好きな時に好きな解像度で表示させることができます。
それが GPU にアクセスすることで出来るようになりました。
基本的にはコードを書きながら、GPUと通信していきます。
わからなくてもかまいません。私もわからないです。
Three.js
全部の点を定義して作るのはかなり大変なことです。
デモシーンが進化していくのに必要なものとして Threejs を作りました。
5年ほど、400人の貢献者がいます。
一年の作業の様をビジュアライズしたものです。
先ほどのようなビデオを反映させるために WebGLで細々と指定できるようになりました。
WebGL が細々と変換してくれます。
5年間さまざまな作業をしてきました。
オープンソースなので、ゲームを作ったり、Webサイトを構築したりして、
いままで Flash で作られていたものが WebGL 化してきています。
デイビッドオライリー氏の作品です（笑
http://www.clicktorelease.com/code/cruciform/
cru.ci.form
私の友人が作った別のデモです。
インタラクティブモードにすると、いろんな方向からシーンを見られます。
cru.ci.form のメイキング
http://www.clicktorelease.com/blog/making-of-cruciform
Sequence Editor
Three.js を使うと、独特のワールドを作ることができます。
ワールドとワールドをつなげてビデオのような表現をしていくにはエディタが必要です。
いま Frame に取り組んでいます。
AfterEffects のようなものですが、もっとリアルタイムなものです。
いろんなシーンを見ていくことができます。
プロパティや、カメラを移動させること、色を変えることができます。
インタラクティブにできます。
編集をしながら見かけがどうなるのかを確認しながら操作ができます。
オープンソースですが、まだ取り組んでいる途中です。
Demoscene
出来るだけ沢山のシーンを小さなファイルに詰め込むという良さがあります。
timeless.exe 64kb のアプリです。
Google のホームページだけで 200kb です。
ジオメトリシンセサイザー、テクスチャシンセサイザー、サウンドシンセサイザー
今はデモシーンのコードを移植することを考えています。
Texgen.js を作ることにしました。
texgen.min.js は 3kb です。
texture.png 256x256 は 145kb くらいになるテクスチャを
小さいコードで実現できます。
512x512 だったとしても 300byte くらいのコードで作れます。
イメージ生成時間は 50ミリ秒で実現できます。
ファイルを取り込むと 1秒ぐらいかかります。
友人がエディタを作りました。
組み合わせによって影響の度合いがかわります。
別のエディタもあります。
プレビュー機能がついています。
フィルター機能もついています。
同時にコードも表示してくれます。
後々はこの二つのツールが一つになっていくかもしれません。
データに特化した目的に取り組みながら、他のニーズもありました。
Scene Editor
Three.js 用のエディタも作りました
なぜエディタを作ったかというと、デザイナーが気軽に使えるツールが無かったからです。
Three.js をビジュアル表現したものです。
これを使うとプレビューすることができます。
Webに載る時と同じものが確認できます。
obj ファイルとして出力も可能です。
スクリプトも追加できたら面白い。
フレームごとに実行するコードを追加することもできます。
アプリケーションの中に事例があった方が良いと思って、
シンプルな例を用意しておきました。
カメラの回転スクリプト、
パーティクル生成のスクリプト、
pong ゲームのスクリプト
もう一つ取り組んでいるのが VR です。
特に去年ぐらいから VRを注目をあつめるようになってきました。
WebVR
mozilla が WebVRを作ることになり、JavaScript でデバイスと通信することができます。
まだ実験段階です。なんかうまく動きませんね。
エディタの中で VRの機能も取り込んでしまえるようにしました。
エディタの中で確認することができます。
全てオープンソースなので試してみてください。
自分自身が行動しながらバーチャルリアリティの中でプログラミングもできます。
コードを書きながら、周りを見渡しながら作ることができます。
リアルタイムで作業することができます。
このようにあくまで実験段階ですが、素晴らしい体験をすることができます。
P.S. Mr.doob からの伝言。
日本でもデモシーンの素晴らしいイベントが開催されます！
Tokyo Demo Fest 2015
http://tokyodemofest.jp/2015/
<< Home