|Written by Ian Elliot|
|Monday, 06 December 2021|
Page 4 of 5
The Matrices - Connecting with the Shaders
For a uniform follow the same three steps:
In this case you have to connect the use of:
uniform mat4 modelViewMatrix; uniform mat4 perspectiveMatrix;
To make things even more simple we are going to use predefined transformation matrices. How they are constructed isn't difficult, but it takes us away from the main part of the story. The model view matrix might as well just be the identity matrix, i.e. no transformation of the 3D co-ordinates is performed:
var mvMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ];
var shaderMVMatrix = gl.getUniformLocation(program, "modelViewMatrix");
You have to specify the program and the variable within the program that you want the reference to. The reference is in fact an index into a table of variables. Next you make the connection, there are a set of methods that you can use depending on the data type being transferred to the shader. In this case the method we need is:
gl.uniformMatrix4fv(shaderMVMatrix, false, new Float32Array(mvMatrix));
You can see that this copies the data in mvMatrix to the specified shader variable. From this point on the shader will use the specified matrix.
The procedure is the same for the perspective matrix:
var pMatrix = [ 3, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 2, 0, 0,-1, 0 ]; var shaderpMatrix = gl.getUniformLocation(program, "perspectiveMatrix"); gl.uniformMatrix4fv(shaderpMatrix, false, new Float32Array(pMatrix));
The perspective matrix provided is simply one that results in a reasonable view of the simple object we are going to draw - you can worry about how to work out what the perspective matrix has to be in any particular situation later. The key to understanding the perspective transform is to know that there is a little more to homogeneous co‑ordinates than simply implementing a transformation. Before the co‑ordinates are plotted, they are converted to normal co‑ordinates by dividing by the last component. That is, if you specify:
then, before being plotted, the system converts this to:
and the pixel is rendered at x/w, y/w. The z value is used to determine what is in front of what. Notice that the division isn’t part of the matrix multiplication. It is how all homogeneous co‑ordinates are treated before being plotted in 2D. Also notice that when w equals 1, which it does for all of the homogeneous vectors you create, then the division has no effect. The perspective transformation, however, creates a vector with w different from 1.
You can see that the final 1 is now -2 and after division this gives:
which is a point within the fundamental co‑ordinate system. As the z co‑ordinate of the point varies, the perspective transformation alters x and y so that things that are further away get smaller. Notice that this transformation can result in points that are outside of the canvas drawing area if z is small. This corresponds to zooming in really close to an object. There is a lot more to creating perspective transformations, but this is enough to get started.
|Last Updated ( Monday, 06 December 2021 )|