matrix - 長方形を台形に変換するために必要な変換行列をどのように競合させるのですか?

Question

CSS 変換と IE の同等のフィルターをいじっており、2D の四角形を台形に変換して遠近感をシミュレートしたいと考えています。

具体的には、長方形の右側を同じ高さのままにし、左側を高さの 80% にして、両側の中点が水平方向に一直線になるようにします。

私は行列代数に精通していますが、どの行列がそれを行うかを決定する方法がわかりません。

score 3 · Accepted Answer

投影には、4x4 マトリックスを使用します。

1    0    0    0
0    1    0    0
0    0    0    0
0    0    1/d  1

これは、同次座標で機能します (d は、標準的な遠近設定での投影面から目の距離です)。

別：

同次座標での作業を避けるには(または、4x4 マトリックスを使用できない場合、またはマトリックス変換にハードウェアアクセラレーションを使用できない場合)、次のようにします。

x' = (d*x)/(z+d)
y' = (d*y)/(z+d)
z' = 0 (it's always projected onto the projection plane)

ところで、これは基本的に台形の質問にも答えます。長方形を 3D 空間に正しく配置するだけです。方法を理解するのは難しくありません。右側の壁に長方形の絵が描かれていると想像してください。次に、アイポイントを下げて、絵の底と同じ高さにします。これで、台形として投影されます。

score 1 · Accepted Answer

ああ、もう少し考えてみると、2Dマトリックス変換は、回転、傾斜、または変換しかできません。つまり、変形前に平行だった線は変形後も平行になります。

他の誰かが同じ考えに陥った場合に備えて、この質問はここに残します。

score 0 · Accepted Answer

これは、前述の 4x4 マトリックスを使用できるようにする新しい CSS3 matrix3d 変換で実現できます。

score 0 · Accepted Answer

それには2つの答えがあります：

元の質問（長方形を台形に変換する）には十分なはずのストライプベースの変換用のもの：

もう 1 つはもう少し複雑ですが、4x2 マトリックスに基づくカスタムのピクセルベースの変換を可能にします (四角形の各コーナーをカスタム定義できる凸状の四角形に四角形を変換します)。

4 に答える 4