疑似3D(台形)の座標を、2D座標とリンクさせたいです

Question

前提・実現したいこと

・2Dと疑似3Dの座標を、計算で一致させるには

台形型に傾けた「疑似3D」の座標を、2Dに換算したいのですが
下図のようになる場合、y=?をどのような公式で算出すればよいか行き詰まってしまいました。
x座標は比率で対応出来そうなのですが、yの公式で悩んでいます。

実装のイメージとしては、このような感じで2Dと3Dの座標を連動させたいと思っています。

初の質問で言葉不足になっていましたら申し訳ありません、
どうかご教授の方を宜しくお願いいたします。

試したこと

台形に傾けた際の角度、三角関数が必要かもしれない、
座標の分布が曲線になるのでは？等、試行錯誤していました。
2Dの描画・当たり判定・反射処理などは身に付いたのですが
初の3Dへの挑戦で行き詰まってしまいました。

まだAPIの使い方に不慣れな面もあるので
プログラミング技術というよりは、計算式から理解したいと思っています。
よろしくお願いいたします。

Answer 1

三次元空間上の物体をある方向から見たときの二次元平面への投影には以下のような計算方法を用います。

(1) 3D空間上のアフィン変換(異動、回転、スケーリングなど)
(2) 透視投影（平行投影という方法もありますが質問の例を見ると透視投影がマッチしていると思います）

単純なケースならもう少し単純な計算でできないかという気もするかも知れませんが、例えば挙げておられる例（真正面からある角度に傾いた直方体）であってもそれほど単純でもなく一般化された計算方法つまり(1),(2)を用いる方がかえって簡単と思います。

(1)は簡単にいえば点の座標を(x, y, z, 1)とおき、これと異動、回転、スケーリングおよびその任意の変換の合成を4x4の行列で表現しそれらの積を計算することで行います。(2)は(1)より単純で視点から視線が向いている方向を3D空間のZ軸みなせた場合はその点のx, y, zの座標から2D平面上の座標x', y'を

x' = c * x / z
y' = c * y / z

のようにして計算すれば出てきます。

(1)は3Dモデルを(2)に都合がよい座標系へ変換するために用いるといってもよいです。

「3D CG、アフィン変換」などの用語で探すと具体的な計算方法の解説が見つかると思います。

例えば

http://satoh.cs.uec.ac.jp/ja/lecture/ComputerGraphics/3.pdf

など。

Comments

[earthling_child]

ご教授ありがとうございます。

アフィン変換・投影等を検索してはいたのですが
台形での実例が少なく、噛み砕くのには時間がかかりそうです。
初の3Dでz座標のイメージがあまり出来ていないのかもしれないです。

透視投影という大きなヒントを下さりありがとうございます。

[KSwordOfHaste]

台形の実例がないのは「この手法が任意の図形を扱える汎用性の高いもの」のため「台形」と仮定する必要がないからです。どんな図形でもいいのです。それはさておき、Y座標だけじゃなくてX座標も「単純な比率」で計算しようとすると多分不正確になりますよ？ozwkさんや自分の回答は透視投影を前提にしてますが台形を前提にせずに任意の「頂点の座標」を投影というふうに考えます。ご質問の上の絵の左側の2Dの画像は「その画像上の一点が3D空間上でどこにあたるか」をまず計算し、しかるのちに透視投影するのが妥当と思います。

[earthling_child]

ありがとうございます、透視投影の考え方が理解出来ていないんだなという事が分かりました。

Cameraを使用していなかったので焦点がどこにあるのかや
台形左上のz座標がいくつなのかという事が分かりませんでした。
まだ2Dの概念から抜け出せていないのかもしれません。

お二方にご教授頂いた考え方を頭に入れて
もう少しサンプルコードを探してみようと思います。

[KSwordOfHaste]

> プログラミング技術というよりは、計算式から理解したい

この心構えは個人的に大変好感を持ちます。プログラミングテクニックよりそれに用いる理論の方がずっと難しいと感じることもしばしばですので勉強はやはり大事と思います。

ちなみに3D CGの根幹理論に近い点をご紹介したのですが、実際は自分でこうした計算を実装することはあまりありません。例えばJavaFXは3D CGの機能を持ってまして、シーン上に立体を配置でき、配置したシーン全体を点Ｐを中心に直線Lを回転の中心として何度回転せよと設定すると「ぐるん」と回転してくれます。透視投影も自前で計算する必要はなくカメラをシーンに配置するだけだったりします。JavaFXのサンプルを探すと実はライブラリーの機能を使うサンプルになっていると思います。

3Dアプリの公式ガイド・サンプルとしてはこのあたりも参考になるかと思います。

https://docs.oracle.com/javase/jp/8/javafx/graphics-tutorial/javafx-3d-graphics.htm

[earthling_child]

最初Cameraを使ってみたのですが
なんか端の方に行った図形がおかしいなと（伸びる？）と思って
じゃあ独自で計算してみよう、と思ったのがきっかけだったのですが
カメラの動かし方の問題だったのかもしれないですね。

PerspectiveTransformで傾けた画像の上に
2Dを描画すればいいかと少し強引な感じになっていました。
本当はカメラを使って2Dを斜めから見ればいけるはず、なんですよね。

こんな初心者にご教授をして下さり、本当にありがとうございます。

なんか偶然「このアイデアはもしかしたら日本のAI社会に…」ってものが降りてきてしまって
（自分1人じゃ全っ然能力足りないですが…笑）
KSwordOfHasteさんのような方に話せたらいいなぁ、なんて思いつつやる気が出てきました。

すごく勉強になりました、教えて頂いた事を大事にメモして切り抜けたいと思います。

Answer 2

カメラモデルを参考に、
3次元空間上の点がスクリーンのどこに射影されるかを計算します。
(レンズ歪みは無視していい)

Comments

[earthling_child]

射影の理解が全然出来ていないのかもしれないです。
z座標とスクリーンの関係をもっと理解しないといけないかもしれないですね。

Cameraメソッドを使ったらレンズ歪みが出てしまったので
javaFXのPerspectiveTransformで独自に試していた所だったのですが
なかなか座標のイメージが沸かず苦戦していました。
ご教授ありがとうございます。