デジタル・デザイン・ラボラトリーな日々

アラフィフプログラマーが数学と物理を基礎からやり直す。https://qiita.com/yaju

射影変換(ホモグラフィ)について理解してみる その12

パネルを3D回転させるようなことをやってみたいなと思っていたので作成してみました。
jsdo.itで見かけるものはパネルを三角形で分割して処理しているので、これを三角形で分割しないで射影変換で処理して表示してみます。

3D回転をCanvasで作成するのは結構面倒ですね、CSStranslate3dメソッドが実装されているので簡単なんですが…。

f:id:Yaju3D:20140208161001j:plain


しかし、作成中に下記のように90度回転の時に線が細くならずサイズが大きく表示されてしまう問題が発生しました。
下記画像は、Y軸で89度、90度、91度に回転したものです。
f:id:Yaju3D:20140208161719j:plain
下記画像は、X軸で89度、90度、91度に回転したものです。
f:id:Yaju3D:20140208161728j:plain
下記画像は、XY軸で89度、90度、91度に回転したものです。
f:id:Yaju3D:20140208161735j:plain

Y軸とX軸の90度回転による問題は、射影変換による演算結果のパラメータが「NaN」になっていたが、描画時に下記のように論理演算(? | 0)で処理したことによりエラーにならず値「0」となったため、サイズが大きく表示されたのです。

var tmp = j * param[6] + i * param[7] + param[8];
var tmpX = (j * param[0] + i * param[1] + param[2]) / tmp;
var tmpY = (j * param[3] + i * param[4] + param[5]) / tmp;
var floorX = (tmpX + 0.5) | 0;
var floorY = (tmpY + 0.5) | 0;

射影変換による演算結果のパラメータが「NaN」の場合は、画像を表示しない対応を追加しました。

次のXY軸の90度回転による問題は、射影変換による演算結果のパラメータが下記のように値が大きいパラメータが求まったのです。
この場合でも同様に画像を表示しない対応(パラメータ8の絶対値が横サイズ×縦サイズ以上で判断)を追加しました。

89度 90度 91度
0 -11.773  10290591 19.1699
1 12.5004  -11908089 -18.3294
2 144.3118  -22598976 -235.1460
3 -9.31659  12511433 13.6726
4 8.84131  -8931067  -14.40450
5 183.1184  -400428448 -75.7333
6 0.11234  167986.578125 -0.07166
7 -0.11274  -148310.40625 0.071957
8 -0.80581  -3467176.5 1.642055


画像を表示しない対応により90度の時は何も表示されなくなるわけです、理想的には線1本でも表示したかったんですけどね。
随時、動いているようなプログラムの場合は表示されなくても気にはならないですが、画像サイズが大きいままだと一瞬ピカッとなるので気になってしまうんです。

90度ならどの画像サイズでも同現象が出るわけでもないようで、試した画像サイズ(160x120)ではそうなったのです。
ただ、どのような画像サイズであっても対処はしておく必要がありますよね。