HTML5飯 http://atnd.org/events/52477 発表資料 ぱんちら.js -JavaScriptでテクスチャマッピング-

1. ぱんちら.js
JavaScriptで
テクスチャマッピング
Webフロントエンジニア交流会
@横浜 #HTML5飯

2. 面白法人カヤック HTMLファイ部
中農稔／ねろ
!
エンジニア：JSer、ASer、Flasher
兼ウェブアニメーター
SNS：nenjiru
http://twitter.com/nenjiru
http://qiita.com/nenjiru
http://github.com/nenjiru
http://www.kayac.com/team/nakano-minoru

3. さいきんの仕事

4. Yahoo!JAPAN
祝っていいとも
公開終了

5. 面白法人カヤック
カヤックサイト2013版
http://www.kayac.com/

6. おとこ大学
アダルトあ
Private
http://adult-ah.com/

7. NHK HACKATHON
NEWS CALL
Private
http://create.kayac.com/web/newscall/

8. つくってみたラボ
現実の鍵でウェブサイトに
ログインする
http://create.kayac.com/electronic-work/real-keychain/
Private

9. 本日のテーマ

11. ぱんちら.js
JavaScriptでテクスチャマッピング

12. demo
http://nenji.ru/_/pantira.js/

13. レイヤー構造
img
canvas

14. テクスチャマッピング
• 3D（2D）モデルにテクスチャを貼る
• 形状にあわせて画像を変形するマッピング
これを canvas でやれば
スカートを自由に変形できる！？

15. canvasでできる変形
• 拡縮（scale）
• 傾斜（skew）
• 移動（translate）
• 回転（rotate）
台形変形がない！

17. どうするか？

18. 三角形をつかう

19. 三角形をつかう

21. バージョン1
http://nenji.ru/_/pantira.js/

22. スカートのふわふわ感たりなくない？

23. バージョン2
http://jsdo.it/nenjiru/eXkp

24. バージョン1との違い
スカートの頂点座標の計算に
ベレの方法を採用

25. ベレの方法
ベレ法はラグドール物理ともよばれIKを実現するのにも利用されている
速度を明示的に保存しないことが特徴。速度が必要ときには、前回との座標との差分から求める
対になった粒子を引き寄せたり話したという拘束条件を行う。
ベレは、点と線でオブジェクトを構成する。棒は２つの点で構成され、構造物は一つ以上の棒か
ら構成される
ようするに・・・
２点間の振る舞いを表すアルゴリズム

26. Verlet polygon
http://jsdo.it/nenjiru/pCaT

28. 資料
テクスチャマッピング
最速チュパカブラ研究会
http://d.hatena.ne.jp/gyuque/20090211
ベレの方法
詳解 ActionScript 3.0アニメーション
http://www.amazon.co.jp/dp/4873114373

29. ご静聴ありがとうございました

30. http://twitter.com/nenjiru