ぱんちら.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/

レイヤー構造 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

https://twitter.com	577
http://www.slideee.com	61
http://s.deeeki.com	8
http://tweetedtimes.com	3
http://b.hatena.ne.jp	3
https://tweetdeck.twitter.com	3
http://www.linkedin.com	3
http://twitterrific.com	2
http://wiki.onakasuita.org	1
https://www.chatwork.com	1
http://cache.yahoofs.jp	1
http://www.google.co.jp	1

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

by Minoru Nakanou , エンジニア at KAYAC Inc.

on Jun 21, 2014

Statistics

Views

Actions

12 Embeds 664

Accessibility

Categories

Upload Details

Usage Rights

Report content

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