three.js の紹介
DESCRIPTION
three.js の紹介です。 #coinsLT で発表しました。TRANSCRIPT
three.js の紹介2014/06/16 @gam0022
自己紹介
@gam0022
coins11(情報科学類4年)
NPAL(非数値処理アルゴリズム研究室)
Ruby と C# が好き
自己紹介(TwinCal)
TwinCal
“TwinCal"ググれば出てくる
Twinsの履修情報から、Googleカレンダー・iCalの時間割を作成するWebサービス
自己紹介(大五郎Bot)
大五郎Bot
マルコフ連鎖でフォローユーザのツイートを学習して喋るBot
Rubyで実装
Favstar から BAN ←去年5月
自己紹介(大五郎Bot)
3回目の凍結から解除 ←New(今ここ)
永久凍結の危機は回避
自己紹介
BearTail でエンジニア
Dr.Wallet というアプリの開発を手伝っている
BearTail は優秀なエンジニアを募集中
さて
宣伝が多くなってしまったので、そろそろ本題に入ります…
three.js とは
three.js
http://threejs.org/
JavaScript用の3DCGのライブラリ
WebGL をラッパーしているので、GPUを利用できる
WebGLRendererだけでなく、CanvasRendererもあるので、WebGL が動作しない環境でも使える!
three.js とは
MIT License (かなり寛容なライセンス)
できること
商用利用
修正
配布
派生作品に別のライセンスを課すことなど
何ができるか
実際に動くものを見たほうが早い
公式ページの example などから、面白そうなものをいくつか選んできた
http://threejs.org/examples/
http://stemkoski.github.io/Three.js/
demo
http://threejs.org/examples/#webgl_animation_cloth
布にボールを投げたり風をあてたりできる
布のシュミレーションは ばねモデルで自力でやってるよう
Geometry(形状) の動的な update 処理
Fog(霧) 効果
demo
http://threejs.org/examples/#webgl_interactive_draggablecubes
Cube をドラッグで移動するサンプル
マウスとの当たり判定は three.js の機能でそれなりに簡単にできる
demo
http://threejs.org/examples/#webgl_animation_skinning_blending
歩き→走り を滑らかにつなげる
モーションブレンド
demo
http://stemkoski.github.io/Three.js/Reflection.html
鏡のように反射する Material
とても綺麗!
demo
http://stemkoski.github.io/Three.js/Many-Cameras.html
複数のカメラを設定
webカメラの映像を Material に設定
良い所
実際に使ってみての感想
WebGL (というか3DCG) の難しい部分を完全にライブラリ任せでできる
ソースコードもとても短く書ける
OpenGL と比較すると、Geometry や Material がオブジェクト化していて使いやすいインターフェースになっている
良い所
立方体を表示する最低限のコード。HTMLを含めて35行だけ!
良い所
ブラウザ上で動くのは嬉しい
タブレット端末でも動かせるかも!?
去年、Chrome for Android で WebGL がサポートされた
canvas でも動作するので iOS でも使える
悪いところ
OpenGL と比べるとドキュメントが全然少ない
公式ページの docs が唯一のドキュメント
http://threejs.org/docs/
悪いところ
http://threejs.org/docs/#Reference/Extras.Core/CurvePath
全部 todo なclass がある
GitHubでソースコードが見れるので、困ったら、実装を見ながら、使い方を調べるしか無い\(^o^)/
ところで
Q. three.js(3次元) があるなら、two.js(2次元)もあるのか?
➡ A. ある
2次元描画ライブラリ Two.js
svg, canvas, webgl でレンダリングできる
http://jonobr1.github.io/two.js/
まとめ
まとめ
three.js という 3DCG ライブラリがある
GPUが使えて、高速に描画できる
ブラウザ上でもかなり高度な3DCGが使える
ドキュメントはちょっと(かなり?)不足気味
今後の発展に期待!!