What is the ViewPort Transformation?

OpenGL WebGL viewport transformation
Share this:

This article can somehow be related to understanding
gl.viewport(x_offset, y_offset, width, height)  in WebGL


glViewport(x, y, width, height) in OpenGL

It needs to be understood what this line of code is. This article is not intended to WebGL rather this is on computer graphics where we discuss here on viewport and viewport transformation. We need to know when this thing that is given in the code above or in any library or language comes to use. 

First, after Projection transformation, the scene is clipped which discards the elements (primitive elements such as points, lines, triangles ) that are outside the clip space. This clipping is to discard elements that are not within fov (field of view ) of the camera. The resultant objects are inside 2 by 2 by 2 or ( 2x2x2 ) volume with center at the origin. When this is complete now we need to display all these inside clipping space elements in the HTML Canvas element. For that, we need to map the clipped space into images.

Clip space and Viewport space

This transformation is called viewport transformation and in this viewing window which is (1, 1) to (-1, -1) is scaled to image’s width and height.

Viewpoint transformation is applied internally within the graphics pipeline, you don’t need to do this yourself. But that doesn’t mean you cannot specify your viewport size. By default, the size of the viewport is the size of canvas. If you don’t want this, you can provide an offset which defines the offset of the image from the lower-left corner that helps you create a smaller image.

Viewport coordinates system and variable definitions in image

Notice that in the viewport coordinate we have a center at the bottom left.

Thanks for reading.

Happy learning, Happy Coding


Related posts

Leave a Reply