狠狠撸
Submit Search
three.js の紹介
?
1 like
?
4,065 views
Sho Hosoda
Follow
three.js の紹介です。 #coinsLT で発表しました。
Read less
Read more
1 of 22
Download now
Download to read offline
More Related Content
three.js の紹介
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/Re?ection.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が使える ドキュメントはちょっと(かなり?)不足気味 今後の発展に期待!!
Download now