WebGL and Texture Mapping

We started looking at WebGL in this lecture. 

Today, we're going to look at lighting in relation to the WebGL API.

It gets interesting using diffuse and specular lighting. We want to write an applications rather than just depending on shader.bkcore.com. We see a topic that is characterized by some significant concepts.

We started from a very simple example from last time around through a simple spinning cube.

The overall JS program lived inside a big start() setup function. Inside of this is a function called draw() in order to trigger any change. As part of the draw, there are some things that would be quite familiar to you through the slider and everything, and we need to create the camera transform.

The second number input from eye() implements the elevation of the camera. 

We're gonna use GMMatrix like before. The shaders have matrices in them, like a model view projector matrix. Not every linear algebra package will work, use GLMatrix to be 100% compatible.

mat4.perspective GPU have expectations. It won't draw anything behind the camera. The last 2 arguments represents the near and far intercepts of the Z axis.

uniformMatrix4fv populates the uniform that is referenced from the shaders. GetUniformLocation gets the memory address in GPU memory.

We're going to get a memory pointer for the uniform that incorporates the modelView and Projection matrix.

Again, use this card to look everything up.

Uniform[] sets the value of the uniform to be a vector of floats. We can set up depending on the data type is matrix 2, matrix 3, or matrix 4. The UniformMatrix4v is the place where we actually set these attributes.

If we don't do a clear command for GL, what happens is unfortunately the default background is no coloration of the background, and the clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) clears both the depth and the buffer to a particular value.

If I don't do the .enable(depth_test),  I cannot make sure that faces or triangles properly obscure or draw one another. This disables proper hiding from faces of a cube, as follows:

We try to perform hidden-surface elimination using the Z-buffer algorithm. How does this work?

A Z-buffer is an image by default is set to an extremely large value. For example, we can draw a gray triangle and an olife colored triangle on top of it. Subsequent drawing calls are only allowed to complete if the depth of the newly written pixel is "nearer". When we clear the screen and depth buffer, it promps the GPU to resets all the values to infinity. Any value is essentially the absolute value of the Z coordinate of any triangle that manage to find itself on the location and wrote itself on the screen.

As we are rasterizing triangle, we are looking at individual pixels and asking for the Z value of every fragment that is actually being plotted, and determining the 3d location in normalized device coordinates. The X and the Y components of GLPosition are the horizontal and vertical components in +-1 directions. There is a place where this information become relevant, to prime to Z-buffer algorithm. GLPosition will get interpolated onto fragments and the Z value that is interpolated from the vertices is going to be used to do a pixel test, as follows: 

Subsequent drawings only compute if depth of pixel is "nearer" the following represents depth charts.

Is there a content when there is a Z value on what to write? If the answer is yes, then try it out.

We figure out the fragments the second triangle is rasterized to.  We go over the entire array and obtain the result enumerated above.  This is a highly efficient method for determining visibility feeding any number of triangles in whatever order to the GPU. This concludes the survey of the first bit of the WebGL.

The command clearColor sets the background color to a specific color. You then need to enable to Z-buffer algorithm, and you need to clear the color and Z-buffer of the screen. We talked about gl.drawElements, provided with the type of polygons to be drawn (triangles, lines, etc.) and we are given a specification on what the precision of the system to be drawn is. We try to see the extent of the cube being drawn as the second argument. So in a cube, we need 36 vertices in triangles to draw a cube.

The least value is the value that is closest to the intended area that we want to test. A final visualization result will have way more triangles than before. Texturing allows the control of triangle coloration within a finer granularity. 

The ingredient for diffuse and specular reflections is a normal vector, which we will have to provide ourselves for the GPU.

With diffuse and specular reflection, we have even more properties to prepare and set down with the GPU. The fragment shader computes all of the diffuse components. lightV is the direction of the light vec3(0.0, -0.3, 2.0) brings right slightly below the Z axis. There's ambient reflection, specular reflection, and specular exponents. This should be very familiar.

We have a new attribute called the normal, and we're going to do a per-fragment shading, and we assign the per vertex value into the vertex shader, and this will emerge inside of the fragment shader. 

We see the commonality and as a result we can see

1 1 1   -1 1 1    -1 -1 1     1 -1 1    all have the commonality 0 0 1, so such this will be the normal of this axis. 

 Previously I only had the uMVP, converting local to normalized device coordinates. 

In the vertex shader, the model view matrix and the projection matrix are placed separately. The camera space position was being used in order to compute the direction of Vi. fPosition is the camera space of the normalized device coordinates. V is the direction of the I. fPosition are the coordinates of the point on the service and have to take the negative position, is we want to get the inverse vector. 

uMVN is a normal matrix that acts on the fragment shader. The normal matrix converts to the camera space for normals. We use this to multiply the fNormal, and normalize it to bring it into camera space. It's the same as the simple code in shader.bkcore.

We need to enable attribute array in order to indicate a triangle array to indicate that a buffer is coming or being created. We then buffer the data in bufferData, sending the data to the GPU. 

Just before we do the drawing, we have to bind the buffer, and vertexAttribute pointer (associates the name with the buffer that we need to associate the data to). The modelling transform helps to go from local to world to camera.

We want to compute normal matrix. Let's say the model view matrix has a particular structure, with a 3x3 matrix. The bottom part of the normal matrix is 0 0 0 ... 1. It only changes to something  different in the case of projection. 

If the model view only has translations and rotations then (A-1)T = A. 

The matrices are uniform; therefore, we try to dispatch it using the GPU. We need to give handles with all of these variable. We obtain this to get uniform distribution costs. 

Texturing allows us to literally "wallpaper" triangles/polygons with images. It gives us a more fine-grained control of appearance than the vertex colors alone. You can tell webGL to grab an image and use it as your texture. 

Finally, let's talk about the texture "image". This is esentially the wallpaper that I use for coloring and wallpapering the various triangles that I'm gonna have. These images can either be square or rectangular and is laid out such that there is a 2D coordinate system associated with it. 

Imagine the texture image as a stretchable "membrane" and you're going to stretch it, shear it, and superimpose it. We need to specify 2 (u,v) coordinates and look for the location of the image appearing on this particular location.

We  need to switch from 00 10 11 01 to  10 00 01 11 rotating to the left once, or flipping it across the horizontal axis. 

What if we stretch the image to twice the size? Then the extent of the square only covers one quadrant of image. Instead of 1, I can specify .5, and now we can stretch an image and say that only the part of the image that is from 0 to 0.5 (1/4 of the image) will actually be used as the wallpaper as these triangles. I specify what are the vertices is this image within the vertices of the triangle.