Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング|最速チュパカブラ研究会 では、HTML5のCanvasの上で、3Dモデルのテクスチャマッピングを行う方法を紹介している。 内容は「アフィン変換とクリッピングを使って、画像上の三角形領域を、別の三角形にマッピングする」というもの。 図を使って説明する方がわかりやすい。 ↑画像の上に青い三角形がある。この領域を緑色の三角形にマッピングしたい。 ↑青い三角形の中身を緑色の三角形の内部にマッピングした結果。 結果の図から、何をしたいか理解できるだろう。 このような画像の切り取りと変形ができると、3DCGで使われるテクスチャマッピングが2Dグラフィックスで実現できる。 でも、青い三角形と緑の三角形は、大きさ・形が違うので、単純なコピーではうまくいかない。 青い三角形の各頂点が緑の三角形の頂点位置に来て、なおかつ内部の画像が適切に
![SVGでのアフィン変換の活用 - 大人になってからの再学習](https://cdn-ak-scissors.b.st-hatena.com/image/square/19df1bffbffff2de7a7f41525f8b29cae3048814/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FZ%2FZellij%2F20130911%2F20130911080118.png)