Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料

15,861 views

Published on

HTML5飯
http://atnd.org/events/52477

発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング-

Published in: Engineering
  • Be the first to comment

ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料

  1. 1. ぱんちら.js JavaScriptで テクスチャマッピング Webフロントエンジニア交流会 @横浜 #HTML5飯
  2. 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. 3. さいきんの仕事
  4. 4. Yahoo!JAPAN 祝っていいとも 公開終了
  5. 5. 面白法人カヤック カヤックサイト2013版 http://www.kayac.com/
  6. 6. おとこ大学 アダルトあ Private http://adult-ah.com/
  7. 7. NHK HACKATHON NEWS CALL Private http://create.kayac.com/web/newscall/
  8. 8. つくってみたラボ 現実の鍵でウェブサイトに ログインする http://create.kayac.com/electronic-work/real-keychain/ Private
  9. 9. 本日のテーマ
  10. 10. ぱんちら.js JavaScriptでテクスチャマッピング
  11. 11. demo http://nenji.ru/_/pantira.js/
  12. 12. レイヤー構造 img canvas
  13. 13. テクスチャマッピング • 3D(2D)モデルにテクスチャを貼る • 形状にあわせて画像を変形するマッピング これを canvas でやれば スカートを自由に変形できる!?
  14. 14. canvasでできる変形 • 拡縮(scale) • 傾斜(skew) • 移動(translate) • 回転(rotate) 台形変形がない!
  15. 15. どうするか?
  16. 16. 三角形をつかう
  17. 17. 三角形をつかう
  18. 18. バージョン1 http://nenji.ru/_/pantira.js/
  19. 19. スカートのふわふわ感たりなくない?
  20. 20. バージョン2 http://jsdo.it/nenjiru/eXkp
  21. 21. バージョン1との違い スカートの頂点座標の計算に ベレの方法を採用
  22. 22. ベレの方法 ベレ法はラグドール物理ともよばれIKを実現するのにも利用されている 速度を明示的に保存しないことが特徴。速度が必要ときには、前回との座標との差分から求める 対になった粒子を引き寄せたり話したという拘束条件を行う。 ベレは、点と線でオブジェクトを構成する。棒は2つの点で構成され、構造物は一つ以上の棒か ら構成される ようするに・・・ 2点間の振る舞いを表すアルゴリズム
  23. 23. Verlet polygon http://jsdo.it/nenjiru/pCaT
  24. 24. 資料 テクスチャマッピング 最速チュパカブラ研究会 http://d.hatena.ne.jp/gyuque/20090211 ベレの方法 詳解 ActionScript 3.0アニメーション http://www.amazon.co.jp/dp/4873114373
  25. 25. ご静聴ありがとうございました
  26. 26. http://twitter.com/nenjiru

×