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

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

面白法人カヤック 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://twitter.com/nenjiru

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

More Related Content

What's hot (20)

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

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