ぱんちら.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でテクスチャマッピング

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

More from minoru nakanou

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