0

描画処理、CGにおけるビューポートとはなんでしょうか?
仮想的な描画空間と考えてよいでしょうか?
例えば、ネット上には下記のような説明を見つけることができました。

仮想的なウィンドウと説明している例

もう逃げない。HTMLのviewportをちゃんと理解する

  1. まず、実際の液晶の解像度は一旦忘れろ。
  2. <meta name="viewport" content="width=480">と指定したとする。
  3. するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。
  4. ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。...

OpenGL系の例

【OpenGL第3回】3D描画(ビューポート・視点位置・透視投影の設定)

聞きなれない言葉なので難しそうに感じるかもしれませんが、とても単純な話で、ビューポートとはウィンドウの中で表示を行うエリアのことです。

今回、ビューポートはglViewport関数で描かれていて、

  • glViewport(0, 0, width, height);

で描画されています。最初の二つの引数が始点(x,y)で、後は幅と高さです。ちなみに(0,0)は左下です。上記の書き方の場合には、ウィンドウ全体をビューポートにするということです。

なので、例えば

glViewport(0, 0, width/2, height/2);

とした場合には、以下のように描画されます(オレンジの背景の部分は後から図を作るときに付与しています)。

ビジュアル情報演習

パイプラインの最後にあるのはビューポート変換で す。これは、いろいろと変換を重ねてきた結果に対して、実際に画面
に切り取る部分や表示する位置を設定するものでした。

OpenGLでは、上の図のビューイングパイプラインと若干異なるアーキテクチャなのですが、基本的には大体同じです。このビュー
ポート変換は、OpenGLでは関数「glViewport」で実現できます。ただし、上記の図とは異なり、OpengGLではある領域
を切り取る作業はビューポート変換の役割ではなく、画面内で表示する位置(左上を原点としてx,y)、幅(width)、高さ
(height)だけを指定することができます。

Flutter Flameでの例

Camera and Viewport (Deprecated)

FixedResolutionViewport: this viewport transforms your Canvas so that,
from the game perspective, the dimensions are always set to a fixed
pre-defined value. This means it will scale the game as much as
possible and add black bars if needed.

まとめ

どうやらHTMLのviewportは仮想的な空間で間違いないと考えています。
OpenGL系は、ちょっとまだよくわかっていません(表示エリア? パイプラインの一部?)。
Flutter Flameの場合もHTMLと同じで仮想的な空間のことだと思います。

実際に下記のコードを試してみましたが、ウィンドウサイズを小さくすると縮小され、大きくすると拡大されました。
仮想的な空間を用意することで、実際のウィンドウサイズに応じて縮小・拡大ができるようにしていると思います。
camera.viewport = FixedResolutionViewport(Vector2(360, 180));

Flutter Flameの場合は、別途カメラも用意されており、viewportとカメラの違いはなんとなく理解できているつもりなのですが(viewportが仮想的な空間で、カメラはその仮想的な空間をどのように見るかということ?)、OpenGLの場合は、viewport自体がカメラの役目な気もして、すこし混乱しています。

おそらく文脈によって意味が異なりそうな気がしますが、描画処理、CGにおけるビューポートとはどのようなものなのでしょうか?

1 件の回答 1

2

CG 的な文脈で考えると、ワールド座標系(論理空間上)の描画対象領域である「ウィンドウ」に対する、デバイス座標系(物理ディスプレイ上)の描画対象領域が「ビューポート」ではないかと思います。
「ウィンドウ」と「ビューポート」を互いの関係性から捉えて考えるとわかりやすいと思います。

ウィンドウとビューポートの対比

そういう意味で、HTML の viewport の話は、単に、ブラウザの表示領域の中の部分的な領域という意味で「ビューポート」のことを仮想的と形容しているのだと思います。CG 的文脈だと、上述のように、ビューポート(デバイス座標系)の方が物理的(現実的)で、ウィンドウ(ワールド座標系)の方が論理的(仮想的)な感じがします。

ウィンドウをビューポートに投射(プロジェクション)する関係になります。単に縮尺の拡大・縮小だけでなく、もしウィンドウとビューポートの縦横比が違えば、縦長になったり横長になったりもします。

カメラは、ウィンドウの決定に関係します。ワールド座標系における、ウィンドウの位置はもちろんのこと、天地の方向(例えば、ウィンドウとビューポートの対応(投射)を上下逆さまにすることも可能)にも関係します。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。