質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • Java

    14092questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • JavaFX

    402questions

    JavaFXとは、Java仮想マシン上で動作するリッチインターネットアプリケーション (RIA) のGUIライブラリです。Swingとは異なり、FXMLと呼ばれる XMLとCSSを併用してデザインを記述します。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 358

 前提・実現したいこと

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

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

イメージ説明

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

イメージ説明

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

 試したこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

(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

など。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 15:22

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

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

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

    キャンセル

  • 2018/05/23 15:32

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

    キャンセル

  • 2018/05/23 17:16

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

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

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

    キャンセル

  • 2018/05/23 17:36

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

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

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

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

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

    キャンセル

  • 2018/05/23 18:47

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

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

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

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

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 15:33

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

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

    キャンセル

関連した質問

  • 解決済

    Scene BuilderでCSSファイルと画像ファイルを読み込んだが、NetBeans上で反映され...

    Scene BuilderでCSSファイル読み込んで、ボタンが平面的になるボタンを作成し、 画像をファイルから読み込んで挿入し、Scene Builderでプレビューすると↓のよ

  • 解決済

    Blender Game Engineでマテリアルを透過したい

    Blenderでゲーム開発をしようとしているものです。 Blender Renderで透過処理したマテリアルをBlender Gameに反映させたいと思っているのですが、透過でき

  • 解決済

    tableview row(cell)

    コード import UIKit class ViewController: UIViewController, UITableViewDelegate, UITableView

  • 解決済

    ACCESS クエリでの一部重複?の除外方法について

    前提・実現したいこと こんにちは、質問タイトルが適格でないかもしれませんが宜しくお願いいたします。 通販事業をしており、商品の仕入から販売までのデータベースをACCESSの

  • 解決済

    Monacaでtimepickerの実装

    前提・実現したいこと MonacaでiOS/Andriod両方に対応しているアプリケーションを開発していて、アラーム機能を実装しようと思い、Monacaでtimepickerのよ

  • 解決済

    atom自動補完やり方

    これのプログラミング版になります 今いろいろ調べているのですが、atom自動補完ができません。宜しくお願い致します。 リンク内容 autocomplete-p

  • 受付中

    ER図について

    つぶやきアプリを作っているのですが、 ER図を作るとする例えばどんなものがありますか?? サンプル程度でいいので教えていただきたいです

  • 解決済

    C#からGoogle Sheets APIを呼び出したい

    前提・実現したいこと Visual Studio 2015でアプリ作成中です。 C#からGoogle Sheets APIを呼び出したいのですが、実行するとエラーメッセージが表

同じタグがついた質問を見る

  • Java

    14092questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • JavaFX

    402questions

    JavaFXとは、Java仮想マシン上で動作するリッチインターネットアプリケーション (RIA) のGUIライブラリです。Swingとは異なり、FXMLと呼ばれる XMLとCSSを併用してデザインを記述します。