平面射影　遠近法　canvas

canvasで、画像を、3Dの遠近を反映した変形をしたい。canvasで簡単にできる命令はない。どうもcssだと簡単にできるようだ。あとで試してみる。今回はcssではなくcanvasで実現したい。

焦点距離というのを勝手に決めつつ、表示するオブジェクトの各頂点のx,y,z座標から、２次元状態でのx,y座標を出すことができる。これだと、画像でなければ、割りと簡単にできそうだった。でも画像は、その頂点に合わせて線を引けばいいだけではないので、テクスチャマッピングというのが必要なんだろうと思ってる。テクスチャマッピングは、画像を細かい四角に分割して、変形時の各四角に合わせて、各四角毎に画像のパーツを伸び縮みさせてるっぽい。ポリゴンというのは色んな形が世の中にはあるので、■より▲のがなんでも表せるので使うっぽい。

■が、x軸、y軸、z軸に対してそれぞれ回転することで、そのオブジェクトのどんな状態も表せるんじゃないかと思っていて、オブジェクト自体が伸び縮みする必要はない。ただ変形した状態を２次元にマッピングすると実際の画像が伸び縮みするだけであります。この各軸に基づいた回転結果を２次元座標に変換することができる。今回変形させたいオブジェクトは四角形だから頂点は４つですので、この４点の回転結果としての２次元座標を出すことはできる。でもそこにいい感じに画像をプロットしなくてはいけない。ここで細かい四角形を大きな四角形の中に入れてみる。例えば１００個の四角形を入れてみる。最初の変形前の各四角形に表示されている画像データを取り出す。変形後の各四角形は２次元であり、canvasでも表示できる。変形後の四角形の頂点座標がわかればいいのかなと思いつつも、全部の四角形は回転したり傾いたりしている。とういことは、やっぱり上記のようなまず大きな四角形の座標を求めたところでうまくいかなそうである。WEBを調べると行列を使っている。射影については、なんか複雑な行列になっている。アフィン変換というのは、どうも台形ではなく平行四辺形であることが変わらない想定のやつであり、これなら簡単にcanvasでできる。でもそれだとダメである。ということは、射影の行列をやっぱり勉強して、実装する必要があるし、その結果を何らかの形で、テキスチャマッピングする必要がある。ということで、射影の行列とテキスチャマッピングについて勉強しようと思う。

行列

そもそも、行列というのは勉強したことがない。行列は、下記で説明されている。 http://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97ぱっと見はただ、括弧に行・列どおりに数字が入っているだけであるし、実際それだけらしい。この行列は色んな計算に便利で、これを色んなルールに基づいた足し算とかかけ算をやると、色々なことが分かり易く解けるのである。偉い人が解明したルールを鵜呑みにさえすれば、ルールをコードにすることは簡単であります。

テキスチャマッピング

調べてたら毎回といっていい程出てくるのが、このサイトだったので、これを読んでみる。 Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング（仮題）

やっぱり分割して、画像を配置することでマッピングできる。canvasのアフィン変換は奥行きがないが、細かくすることでなんかそれっぽくなるということらしい。

CSSでやってみる

でも、canvas使ってるからcanvasで実現しないとと思ったけど、canvasの上にDOMをのっけて、そのDOMのスタイルを変更しつつ画像を表示させればいいのではないかと思った。

CSS3 Transform 3D Test CSS Transforms についてのメモ

CSS 3D Transformsというのがあるようで、これがcanvasのアフィン変換よりいいやつらしい。 http://sylvester.jcoglan.com/これを使っている。行列の計算とかが簡単にできるやつらしい。