DirectX12 画像描画の座標指定について

Question

DirectX12 で画像を描画する際、どこで座標をしているのか教えてほしいです。
下記、書籍のサンプル（Chapter5）を試しに動かすと、viewport.TopLeftXの値が0の場合、画像が画面の中央に表示され、viewport.TopLeftXの値が100の場合、画像が画面の中央より少し右に表示されるように見えました。

単純に考えると、0が一番左上なのかなと思うのですが、そもそも考え方が違うのでしょうか？（例えば、画面の中央が0とか？）

「viewport.TopLeftX = 0;//出力先の左上座標X」

＜書籍サンプル＞
https://books.google.co.jp/books?id=OC3RDwAAQBAJ&pg=PA143&lpg=PA143&dq=%E3%83%93%E3%83%A5%E3%83%BC%E3%83%9D%E3%83%BC%E3%83%88+TopLeftX&source=bl&ots=qPAu2T_O6m&sig=ACfU3U0emOvHlV-ZwAjS4FVFmPndOVVeAA&hl=ja&sa=X&ved=2ahUKEwiJ9Nqyz9HoAhUBD6YKHfatAjYQ6AEwAHoECAwQLQ#v=onepage&q=%E3%83%93%E3%83%A5%E3%83%BC%E3%83%9D%E3%83%BC%E3%83%88%20TopLeftX&f=false

---

また、上記の書籍にあるサンプルでなく、ネットで見つけた下記サンプルでも画像表示できました。
こちらも同様に「D3D12_VIEWPORT g_viewport = {0.0f, 0.0f, (float)WINDOW_WIDTH, (float)WINDOW_HEIGHT, 0.0f, 1.0f};」の最初の0.0fを100.0fに変えたら画像が中央より右に少し動きました。
https://techblog.gmo-ap.jp/2017/10/04/%E7%B6%9Adirectx12%E3%81%A7%E9%81%8A%E3%82%93%E3%81%A7%E3%81%BF%E3%81%9F/
・「ソースはこちらからダウンロード出来ます」の「こちら」リンク

---

＜環境＞
Windows10 VisualStudio 2019

＜私の知識レベル＞
DirectX9 と DirectX2d で簡単なサンプルを動かせたくらいの知識です。
3Dとかほとんど理解できていません。

Answer 1

単純に考えると、0が一番左上なのかなと思うのですが、そもそも考え方が違うのでしょうか？（例えば、画面の中央が0とか？）

D3D11_VIEWPORT.TopLeftX は、ビューポートの左側のX座標です。
「ビューポート」と「画像」の座標を混同されていないでしょうか。

X position of the left hand side of the viewport. Ranges between D3D11_VIEWPORT_BOUNDS_MIN and D3D11_VIEWPORT_BOUNDS_MAX.

D3D11_VIEWPORT (d3d11.h) - Win32 apps | Microsoft Docs
https://docs.microsoft.com/ja-jp/windows/win32/api/d3d11/ns-d3d11-d3d11_viewport

Comments

[droid]

回答ありがとうございます。ビューポートを今まで知らなかったので、ググったのですが、「3Dシーンが投影される２次元（2D）の矩形」みたいなものでしょうか。画像をずらしたと思っていましたが、ビューポート自体を動かしていたということですね。

https://techblog.gmo-ap.jp/2017/10/04/%E7%B6%9Adirectx12%E3%81%A7%E9%81%8A%E3%82%93%E3%81%A7%E3%81%BF%E3%81%9F/
・「ソースはこちらからダウンロード出来ます」の「こちら」リンク

にあるサンプルを実行すると、中央に画像が表示されてしまうのですが、画像の座標がソースのどこで制御しているのか、もし簡単にわかるようでしたら、教えて頂きたいです。試しに色々変えたけど、どこで画像の座標を指定しているのかよく分かりません。＞＜

[nskydiving]

「画像」の座標は以下の箇所で指定されていますね。

// 三角形のジオメトリを定義
Vertex triangleVertices[] = {
{{-0.25f, 0.25f*g_aspectRatio, 0.0f}, {0.0f, 0.0f}},
{{ 0.25f, 0.25f*g_aspectRatio, 0.0f}, {1.0f, 0.0f}},
{{ 0.25f, -0.25f*g_aspectRatio, 0.0f}, {1.0f, 1.0f}},
{{-0.25f, 0.25f*g_aspectRatio, 0.0f}, {0.0f, 0.0f}},
{{ 0.25f, -0.25f*g_aspectRatio, 0.0f}, {1.0f, 1.0f}},
{{-0.25f, -0.25f*g_aspectRatio, 0.0f}, {0.0f, 1.0f}},
};

[droid]

nskydivingさん、すみません、ご丁寧にありがとうございます！
ようやく分かりました。そこで画像描画の座標指定がされていたのですね。
Vertexについて、検索して、以下のように修正したら、試したかった、左上に四角形描画が出来ました。
基本的なことが理解できたので、次の景色が開けた気がします。感謝です！　m(_ _)m
---
// トライアングルリストで2つの三角形を組み合わせて四角形のポリゴンを作成し、テクスチャを張る
// ポリゴンの座標（X、Y、Z） テクスチャの2D座標（X、Y）
// 画面の左右は「-1」～「1」、上下は「-1」～「1」
Vertex triangleVertices[] = {
// 1つ目の三角形
{{-1.0f, 1.0f, 0.0f}, {-1.0f, 1.0f}}, //左上
{{-0.5f, 1.0f, 0.0f}, {1.0f, 1.0f}}, //右上
{{-1.0f, 0.5f, 0.0f}, {-1.0f, -1.0f}},//左下

// 2つ目の三角形
{{-0.5f, 1.0f, 0.0f}, {1.0f, 1.0f}}, //右上
{{-0.5f, 0.5f, 0.0f}, {1.0f, -1.0f}}, //右下
{{-1.0f, 0.5f, 0.0f}, {-1.0f, -1.0f}},//左下
};
---