1. three.js の紹介
2014/06/16
@gam0022

2. 自己紹介
@gam0022
coins11(情報科学類4年)
NPAL(非数値処理アルゴリズム研究室)
Ruby と C# が好き

3. 自己紹介(TwinCal)
TwinCal
TwinCal"ググれば出てくる
Twinsの履修情報から、
Googleカレンダー・iCalの
時間割を作成するWebサー
ビス

4. 自己紹介(大五郎Bot)
大五郎Bot
マルコフ連鎖でフォローユーザの
ツイートを学習して喋るBot
Rubyで実装
Favstar から BAN ←去年5月

5. 自己紹介(大五郎Bot)
3回目の凍結から解除 ←New(今ここ)
永久凍結の危機は回避

6. 自己紹介
BearTail でエンジニア
Dr.Wallet というアプリの開発
を手伝っている
BearTail は優秀なエンジニアを
募集中

7. さて
宣伝が多くなってしまったので、
そろそろ本題に入ります…

8. three.js とは
three.js
http://threejs.org/
JavaScript用の3DCGのライブラリ
WebGL をラッパーしているので、GPUを利用できる
WebGLRendererだけでなく、CanvasRenderer
もあるので、WebGL が動作しない環境でも使える！

9. three.js とは
MIT License (かなり寛容なライセンス)
できること
商用利用
修正
配布
派生作品に別のライセンスを課すことなど

10. 何ができるか
実際に動くものを見たほうが早い
公式ページの example などから、面白そうなものをいくつか
選んできた
http://threejs.org/examples/
http://stemkoski.github.io/Three.js/

11. demo
http://threejs.org/examples/
#webgl_animation_cloth
布にボールを投げたり風をあてたり
できる
布のシュミレーションは ばねモデ
ルで自力でやってるよう
Geometry(形状) の動的な
update 処理
Fog(霧) 効果

12. demo
http://threejs.org/
examples/
#webgl_interactive_dragg
ablecubes
Cube をドラッグで移動する
サンプル
マウスとの当たり判定は
three.js の機能でそれなりに
簡単にできる

13. demo
http://threejs.org/
examples/
#webgl_animation_ski
nning_blending
歩き→走り を滑らかにつ
なげる
モーションブレンド

14. demo
http://stemkoski.github.io/
Three.js/Reflection.html
鏡のように反射する Material
とても綺麗！

15. demo
http://
stemkoski.github.io/
Three.js/Many-
Cameras.html
複数のカメラを設定
webカメラの映像を
Material に設定

16. 良い所
実際に使ってみての感想
WebGL (というか3DCG) の難しい部分を完全にライブラリ
任せでできる
ソースコードもとても短く書ける
OpenGL と比較すると、Geometry や Material がオブジェ
クト化していて使いやすいインターフェースになっている

17. 良い所
立方体を表示する最低限のコード。HTMLを含めて35行だけ！

18. 良い所
ブラウザ上で動くのは嬉しい
タブレット端末でも動かせるかも！？
去年、Chrome for Android で
WebGL がサポートされた
canvas でも動作するので iOS でも使
える

19. 悪いところ
OpenGL と比べるとドキュメントが全然少ない
公式ページの docs が唯一のドキュメント
http://threejs.org/docs/

20. 悪いところ
http://threejs.org/
docs/#Reference/
Extras.Core/
CurvePath
全部 todo なclass がある
GitHubでソースコードが
見れるので、困ったら、実
装を見ながら、使い方を調
べるしか無い＼(^o^)／

21. ところで
Q. three.js(3次元) があるなら、two.js(2次元)もあるのか？
➡ A. ある
2次元描画ライブラリ Two.js
svg, canvas, webgl でレンダリングできる
http://jonobr1.github.io/two.js/

22. まとめ
まとめ
three.js という 3DCG ライブラリがある
GPUが使えて、高速に描画できる
ブラウザ上でもかなり高度な3DCGが使える
ドキュメントはちょっと(かなり？)不足気味
今後の発展に期待！！