狠狠撸

狠狠撸Share a Scribd company logo
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_dragg
ablecubes
Cube をドラッグで移動する
サンプル
マウスとの当たり判定は
three.js の機能でそれなりに
簡単にできる
demo
http://threejs.org/
examples/
#webgl_animation_ski
nning_blending
歩き→走り を滑らかにつ
なげる
モーションブレンド
demo
http://stemkoski.github.io/
Three.js/Re?ection.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が使える
ドキュメントはちょっと(かなり?)不足気味
今後の発展に期待!!

More Related Content

three.js の紹介