以前HTML5案件で作ったもので、canvasで上の図のようなことができるJavaScriptファイルなんですが、これをライブラリ化してみました。

まだ欠陥が多いしAPI仕様もまとまってないのですが、ひとまずこんな表現が可能です。

ソースはここにあげときました。（使い方よくわかんないけど）

ActionScript 3.0にはGraphicsクラスにdrawTriangles()ってメソッドがあります。

何をするかって言うと、ビットマップ画像をテクスチャマッピングすることが目的です。

これにより一枚の静止画をユラユラ布のように揺らしたり、3Dでは遠近感をつけたりと、画像を自由に変形することが可能になるコンピュータグラフィックの手法です。

FlashPlayerやActionScript 3.0が素晴らしいと思うのが、こういったマッピング処理の数学的な難しい処理をすでにAPIとして実装してくれています。

僕達は、頂点座標を指定して、それをどう動かすか？に専念したらいいんです。

ところが、HTML5の新要素、canvasとかでこれを表現し、アプリなどに乗せてしまうようなお仕事が来た時、「iPadだったらHTML5で出来ますよ」なんて言ってしまったらさあ大変！

そんな機能はネイティブで搭載されていません。

つまり、「無いものは作る」or「仕様を満たすライブラリを探す」or「出来ません、と謝る」という選択に迫られます。

実は色んなライブラリがもう既に出まわっていますが、いざ案件でHTMLによるテクスチャマッピングを実装するには、可能な限り自分で内容を知っておきたいという気持ちがあったので、これに挑戦してみました。

これを使ったら、ポリゴンの頂点座標のx座標やy座標をずらすと、画像もその頂点にあわせて変形できます。

頂点座標の取得はgetMesh()で、頂点オブジェクトが配列で返ってくるので、例えば

とかにすると、左上の頂点から41頂点目のX座標を40px右にずらします、

最後にdraw()メソッドで再描画すると、図のように表示されるというものです。

メッシュの表示、非表示

あくまで、今出ている黒い線（メッシュ）は、制作者が分かりやすいように引いているガイド線のようなものなので、案件で納品するときは消さないといけないケースがあります。

以下のようにstroke()メソッドを用意したので、引数にtrue / falseを与えてください。

これで再度draw()すると、メッシュは表示されなくなります。（今回のデモ図版では、わざとtrueに設定しましたが、デフォルトはfalseです。）

GitHubに置いた、今回のサンプルは波のように揺らしてますが、これは三角関数を使って、X座標を行ったり来たりさせてます。メッシュ非表示にするためにstroke(false)にしたときの結果、こんな感じになります。

欠点として、一部、ポリゴンの隙間が出来ることもあるということや、

ふちはジャギーが出て汚い、ということです。

場合によってアニメーションで見せる場合、そこまで気がつかずごまかせることもあるけど、

その場合かなりパフォーマンスが低下するので、注意が必要です。

何か案件で使えそうな時は自己責任でご自由にお使いください。