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

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

• Image 3D rotation - jsdo.it
• Image 3D rotation2 - jsdo.it
• glMatrix.js で投影 - jsdo.it
• glMatrix.js でイメージ投影 - jsdo.it

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

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

下記画像は、X軸で89度、90度、91度に回転したものです。

下記画像は、XY軸で89度、90度、91度に回転したものです。

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)ではそうなったのです。
ただ、どのような画像サイズであっても対処はしておく必要がありますよね。