WebGL walkthrough

 We are now taking a quick peek on what the host program would look like. This blog post will give a walkthrough of the WebGL API. We might get a bit low-level and technical, but many of these details are hidden in reusable code or libraries. A simple example is a 3D cube, with 6 faces where every face has a single color. 

A camera can move into a circular path around the cube, and there are axes of rotations that passes through certain vertices. If you spin a cube, then it rotates across certain axes. This is the simple example that we will talk about. 

At the high level, there is a function start() and a window.onload = start;

In the .html file, there are shaders both for the vertex and the fragments.

There are position color and position attribute. 

We set the fragment color = vertexColor. We are also assigning a fragment color to a 4-dimensional vector. 

uMVP is a combination of the modelling transform, the vertex transform, and the projection transform.

Shaders need to be compiled to run on the GPU the same way a vertex needs to be compiled.

First of all, we create a shader object. We need to identify the types of shader to be used. getShaderInfoLog will be a descriptor language.

Compile the shader and make sure everything is good to go.

Specify a different source for the fragment shader, and be mindful of the fact that this is a fragment shader. Compile the shader, which is written in GLSL. Only a vertex shader uses glPosition, where a fragment shader uses glFragColor. Only a vertex shader accesses attributes.

There can be a valid vertex shader and a valid fragment shader, but not a valid pair. For example, you need to have the varyings match in terms of the vertex shader and the fragment shader.

We need to attach vertex and fragment shader, and link the program, with all the associations. We also need to check the link status for each of the shaders. There's a link status error checker, and after that has worked out, this means that we have a valid program, and we can go ahead and use this shader pair.

Everything is changed from machine language, then in a binary transform manner.

VertexPos indicate the locations of the vertices. 

Next will show how the meshes of the objects were created. It's perfectly reasonable for 2 triangles to touch the same vertex and for them to have different spatial distributions. If you want a vertex of 2 colors, you need to make 2 copies of that vertex. Using 4 vertices for 6 faces of cube, so 4 x 6 = 24 vertices. I can create a separate vertex for every separate triangle, and there's no reason to reuse it. 

Creating, populating, and drawing using a vertex attribute is a multi-step process. getAttribLocation is a pointer/numerical identifier on where the attribute the is desired is located. These are preparations for attributes associated with positions and colors. 

The vertexPos represents respective coordinates of one face of the cube. Gl is in a list like [x0 y0 z0 x1 y1 z1] etc. for all of the vertices in a mesh. 

Now it's time to take the data and send it over the the GPU. In order to do that, we use a buffer object, which establishes a pipeline where we can write several subsequences of data, and tell to patch it over to the GPU.

We then we create a buffer for every vertex attribute. After creating buffer, then we have different types used to feed into the GPU.  An ARRAY_BUFFER communicates with the GPU triangle vertex indices. We only can have one element array buffer that we can call at a time. Every subsequent command that facilitates the transfer between the CPU and GPU, it uses gl.ARRAY_BUFFER alias, and the bufferData is the command that takes vertexPos, and send it out to the GPU. (Vertex Positions). 

These are not part of the GPU. Need to know the number of items associated with every vertex attribute. It's 3 because there are 3 numbers (x, y, z) and 24 individual vertices. 

The attribute pointer association is performed when someone is ready to do the drawing.There's a function called VertexAttributePointer that the trianglePositionBuffer binded with ARRAY_BUFFER and linked with the individual position attribute.

The vertices are then marked in triples and then a Buffer is created for triangle vertex indices.

After this, I can do the drawing and draw triangles, and segmented polygons. .length is the triangle that is here and then the byte is the bit. It only draws 3 if created 2 triangles.

gl.uniformMatrix4fv sets up the uniforms and attributes of the matrix.  We do this to copy a specific value with this uniform using the GPU. We write it in the shader program in the matrix, and define the uniform in the shaders.  We can get uniform location, and find the mVP, then get MVP matrix to know what location in the GPU memory to go ahead and populate in an individual matrix.