描画処理、CGにおけるビューポートとはなんでしょうか?
仮想的な描画空間と考えてよいでしょうか?
例えば、ネット上には下記のような説明を見つけることができました。
仮想的なウィンドウと説明している例
- まず、実際の液晶の解像度は一旦忘れろ。
<meta name="viewport" content="width=480">
と指定したとする。- するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。
- ブラウザは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におけるビューポートとはどのようなものなのでしょうか?