Recall that once we've applied the Model-View transformation to the vertices, the next step is to transform the view coordinates to NDC coordinates:

We do this by simple multiplication by using ESSL in the vertex shader:

gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition,1.0);

The predefined variable, gl_Position, stores the NDC coordinates for each vertex of every object defined in the scene.

In the previous multiplication, we augment the shader attribute, aVertexPosition, to a 4-component vertex because our matrices are 4x4. Unlike normals, vertices have a Homogeneous coordinate equal to one (w=1).

After this step, WebGL will convert the computed clipping coordinates to normalized device coordinates and from there to canvas coordinates using the WebGL viewport function. Let's see what happens when we change this mapping:

1. Open the ch04_06_projection-modes.html file in your source code editor.
2. Go to the draw function. This is the rendering function that is invoked every time we interact with the scene (by using the mouse, the keyboard, or the widgets on the page).
3. Find the following line:

gl.viewport(0, 0, canvas.width, canvas.height);

4. Try each of the following three operations:

const width = canvas.width,
  height = canvas.height,
  halfWidth = width / 2,
  halfHeight = height / 2;

// First
gl.viewport(0, 0, halfWidth, halfHeight);

// Second
gl.viewport(halfWidth, halfHeight, width, height);

// Third
gl.viewport(50, 50, width - 100, height - 100);

5. For each option, save the file and open it on your browser.
6. What do you see? Please note that you can interact with the scene just like before.