three.js の紹介

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

Upload: sho-hosoda

Post on 25-Jun-2015

980 views

Category:

Technology


1 download

DESCRIPTION

three.js の紹介です。 #coinsLT で発表しました。

TRANSCRIPT

Page 1: three.js の紹介

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

Page 2: three.js の紹介

自己紹介

@gam0022

coins11(情報科学類4年)

NPAL(非数値処理アルゴリズム研究室)

Ruby と C# が好き

Page 3: three.js の紹介

自己紹介(TwinCal)

TwinCal

“TwinCal"ググれば出てくる

Twinsの履修情報から、Googleカレンダー・iCalの時間割を作成するWebサービス

Page 4: three.js の紹介

自己紹介(大五郎Bot)

大五郎Bot

マルコフ連鎖でフォローユーザのツイートを学習して喋るBot

Rubyで実装

Favstar から BAN ←去年5月

Page 5: three.js の紹介

自己紹介(大五郎Bot)

3回目の凍結から解除 ←New(今ここ)

永久凍結の危機は回避

Page 6: three.js の紹介

自己紹介

BearTail でエンジニア

Dr.Wallet というアプリの開発を手伝っている

BearTail は優秀なエンジニアを募集中

Page 7: three.js の紹介

さて

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

Page 8: three.js の紹介

three.js とは

three.js

http://threejs.org/

JavaScript用の3DCGのライブラリ

WebGL をラッパーしているので、GPUを利用できる

WebGLRendererだけでなく、CanvasRendererもあるので、WebGL が動作しない環境でも使える!

Page 9: three.js の紹介

three.js とは

MIT License (かなり寛容なライセンス)

できること

商用利用

修正

配布

派生作品に別のライセンスを課すことなど

Page 10: three.js の紹介

何ができるか

実際に動くものを見たほうが早い

公式ページの example などから、面白そうなものをいくつか選んできた

http://threejs.org/examples/

http://stemkoski.github.io/Three.js/

Page 11: three.js の紹介

demo

http://threejs.org/examples/#webgl_animation_cloth

布にボールを投げたり風をあてたりできる

布のシュミレーションは ばねモデルで自力でやってるよう

Geometry(形状) の動的な update 処理

Fog(霧) 効果

Page 12: three.js の紹介

demo

http://threejs.org/examples/#webgl_interactive_draggablecubes

Cube をドラッグで移動するサンプル

マウスとの当たり判定は three.js の機能でそれなりに簡単にできる

Page 13: three.js の紹介

demo

http://threejs.org/examples/#webgl_animation_skinning_blending

歩き→走り を滑らかにつなげる

モーションブレンド

Page 14: three.js の紹介

demo

http://stemkoski.github.io/Three.js/Reflection.html

鏡のように反射する Material

とても綺麗!

Page 15: three.js の紹介

demo

http://stemkoski.github.io/Three.js/Many-Cameras.html

複数のカメラを設定

webカメラの映像を Material に設定

Page 16: three.js の紹介

良い所

実際に使ってみての感想

WebGL (というか3DCG) の難しい部分を完全にライブラリ任せでできる

ソースコードもとても短く書ける

OpenGL と比較すると、Geometry や Material がオブジェクト化していて使いやすいインターフェースになっている

Page 17: three.js の紹介

良い所

立方体を表示する最低限のコード。HTMLを含めて35行だけ!

Page 18: three.js の紹介

良い所

ブラウザ上で動くのは嬉しい

タブレット端末でも動かせるかも!?

去年、Chrome for Android で WebGL がサポートされた

canvas でも動作するので iOS でも使える

Page 19: three.js の紹介

悪いところ

OpenGL と比べるとドキュメントが全然少ない

公式ページの docs が唯一のドキュメント

http://threejs.org/docs/

Page 20: three.js の紹介

悪いところ

http://threejs.org/docs/#Reference/Extras.Core/CurvePath

全部 todo なclass がある

GitHubでソースコードが見れるので、困ったら、実装を見ながら、使い方を調べるしか無い\(^o^)/

Page 21: three.js の紹介

ところで

Q. three.js(3次元) があるなら、two.js(2次元)もあるのか?

➡ A. ある

2次元描画ライブラリ Two.js

svg, canvas, webgl でレンダリングできる

http://jonobr1.github.io/two.js/

Page 22: three.js の紹介

まとめ

まとめ

three.js という 3DCG ライブラリがある

GPUが使えて、高速に描画できる

ブラウザ上でもかなり高度な3DCGが使える

ドキュメントはちょっと(かなり?)不足気味

今後の発展に期待!!