X-shader X-vertex

[Carlito Roby]

Allthe code is in tags.The shader GLSL code uses custom types like "x-shader/x-vertex" to prevents the browser from executing the code as JavaScript. These custom scripts types are recognized by some IDE plugins to provide syntax highlighting inside HTML documents.

The coordinate system of the vertex shader is a cube going from -1 to 1 in all three dimensions: left to right, bottom to top, and near to far.The point (-1,-1,-1)is the near bottom left corner of the cube and (1,1,1) is the far upper right corner.Anything outside this cube is clipped and hidden,so this coordinate system is called clip space.

Now we can feed our typed array into a GPU buffer in two steps. WebGL provides an important globalvariable called gl.ARRAY_BUFFER, which is basically a reference to the where we need to send the vertices.First we create a new buffer associated with that global variable and then we fill the buffer with our vertex data:

The type of shader input that receives verticesis called an attribute, hence the function name. Our vertexPosition input can then be attached to thevertex buffer with these two commands:

in vec4 vertexPosition is the current vertex from the input list that is being processed. inmeans input and vec4 is a 4D vector (a 4 element list) of floating point numbers,which represents the 3D coordinate of a vertex. But wait: Why are we using a 4D vector to represent a 3D coordinate? These components of thisvector are called (x,y,z,w), where (x,y,z) is the 3D coordinate. The w value is used for3D perspective calculations and divides the value of x, y, and z during rasterization so, for example, (1,2,3,10) would become the coordinate (1/10,2/10,3/10).This is for advanced use cases and we can ignore it for now.When our list of 3D vertices from JavaScript is converted to this vec4 input, w defaults to 1 and has no effect on the (x,y,z) position.

3a8082e126