[SOLVED] Tutorial 6 Draw in 3D

Tutorial 6 Draw in 3D
This session practices drawing a simple 3D scene (Figure a). The scene consists of the floor, a table and a cube. The floor is a plane. The cube is of size 2x2x2 and the origin of its local coordinate system has been chosen at the centre of the cube, as shown in Figure b. The table is constructed from 5 box-like objects: four for the legs and one for the tabletop, which are obtained by scaling the cube.
Figure a Figure b
To position and view objects in a 3D scene, we need to use the modelview and perspective projection matrices. To use them, in the vertex shader, two variables of type 44 matrix are declared as uniform, which is a type in OpenGL Shading Language for storing data that are constant for all vertices of an object (modelview) or the entire scene (perspective projection).

Copyright By Assignmentchef assignmentchef

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
where uPMatrix is for storing the perspective projection matrix and uMVMatrix is for the modelview matrix of an object. Notice that each object in the scene will have its own modelview matrix. These matrices will be updated at runtime by loading to them the current modelview matrix of each object and the perspective projection matrix of the scene view (if the position of camera changes, as needed by interactive navigation control). The current modelview and perspective project matrices need to be stored in the main WebGL program as two global variables. In this tutorial, they are stored in modelViewMatrix and projectionMatrix, respectively. The values for these two global matrices are uploaded to the vertex shader in the function draw()before drawing an object.
In this tutorial, the projection matrix is uploaded once, because we have a fixed viewing angle. The perspective projection matrix is set up by matrix operation mat4.perspective(fovy, aspect, near, far, dest), where fovy is the vertical field of view in degrees, aspect is the aspect ratio (which equals viewport width/height), near and far are the near and far planes of the view frustum, and dest is the destination matrix which the result will be written into.
mat4.perspective(60, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, projectionMatrix);
The modelview matrix must be set before drawing an object. Each object has its own modelview matrix. The initial value of the modelview matrix is set with the camera transformation using mat4.lookAt(eye, center, up, dest). The function lookAt() generates a look-at matrix with the given eye position eye, (the position of the camera), the point centre (the position the camera is looking at), and the coordinate axis pointing upwards, up. The result is written into dest.
mat4.lookAt([8, 5, -10],[0, 0, 0], [0, 1,0], modelViewMatrix);
To keep the initial value of the modelview matrix for later use by other objects, a JavaScript array modelViewMatrixStack is used to store the current modelview matrix before it being modified to suit the current object. After finishing drawing the current object with the appropriate modelview matrix, the stored original modelview matrix is retrieved (by popping it out of the stack) for it to be modified for the next object. For example, the floor plane is drawn first using the initial modelview matrix, because we want to place the plane at the origin of the world coordinate system. The next item to be drawn is the tabletop, but we do not want to place it at the origin. Therefore, the modelview matrix

has to be modified to reflect the positional change (i.e, a translation). Before modifying the current modelview matrix for the tabletop, a copy of current modelview matrix is saved in modelViewMatrixStack. Then it is modified by a translation (0.0, 1.0, 0.0) to put the tabletop at the correct position and by a scale (2.0, 0.1, 2.0) to give it the required tabletop shape/dimensions. Then resulted modelview matrix is uploaded to the shader for it to be applied to the vertices of the tabletop. After drawing the tabletop, the stored intact modelview matrix is retrieved from modelViewMatrixStack for it to be modified for the next object, e.g., a table leg:
pushModelViewMatrix(); mat4.translate(modelViewMatrix, [0.0, 1.0, 0.0],
modelViewMatrix); mat4.scale(modelViewMatrix, [2.0, 0.1, 2.0], modelViewMatrix);
uploadModelViewMatrixToShader();
drawCube(0.72, 0.53, 0.04, 1.0); // arguments set brown color popModelViewMatrix();

Exercise: Copy glMatrix.js into your working directory if you have not done so. Copy the unfinished program on Moodle and modify it to have the features in the following program list. Pay attention to the statements/functions shown in the bold case.