ぱんちら.jsJavaScriptで

テクスチャマッピング

Webフロントエンジニア交流会 @横浜 #HTML5飯

面白法人カヤック HTMLファイ部

中農稔／ねろ !

エンジニア：JSer、ASer、Flasher 兼ウェブアニメーター

SNS：nenjiruhttp://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/

レイヤー構造

img

canvas

テクスチャマッピング

• 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