描画処理、CGにおけるビューポートとはなんですか？


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

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

[もう逃げない。HTMLのviewportをちゃんと理解する](https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607)

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

### OpenGL系の例

[【OpenGL第3回】3D描画(ビューポート・視点位置・透視投影の設定)](https://tecsingularity.com/opengl/viewport/)

> 聞きなれない言葉なので難しそうに感じるかもしれませんが、とても単純な話で、ビューポートとはウィンドウの中で表示を行うエリアのことです。
>
> 今回、ビューポートはglViewport関数で描かれていて、
>
>   * **glViewport(0, 0, width, height);**
>

>
>
> で描画されています。最初の二つの引数が始点(x,y)で、後は幅と高さです。ちなみに(0,0)は左下です。上記の書き方の場合には、ウィンドウ全体をビューポートにするということです。
>
> なので、例えば
>
> **glViewport(0, 0, width/2, height/2);**
>
> とした場合には、以下のように描画されます(オレンジの背景の部分は後から図を作るときに付与しています)。

[ビジュアル情報演習](http://web.wakayama-u.ac.jp/%7Ewuhy/08_3DCGwithGLUT.html)

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

### Flutter Flameでの例

[Camera and Viewport (Deprecated)](https://docs.flame-
engine.org/latest/flame/camera_and_viewport.html)

> 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));](https://github.com/ufrshubham/dino_run/blob/0c8452c5ca604ab2be1215e1de2175110c200fd0/lib/game/dino_run.dart#L65)

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

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




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

[![ウィンドウとビューポートの対比](https://i.stack.imgur.com/nfCLI.png)](https://i.stack.imgur.com/nfCLI.png)

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

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

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




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

[![ウィンドウとビューポートの対比](https://i.stack.imgur.com/nfCLI.png)](https://i.stack.imgur.com/nfCLI.png)

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

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

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

