Buffer constants

I have chosen to use a single Float32Array to hold all of the vertex data for this application. That includes the X and Y coordinate data, as well as U and V texture coordinate data. Because of this, we are going to need to tell WebGL how to separate this data into different attributes when we load this data into the GPU's buffer. We will use the following constants to tell WebGL how the data in Float32Array is broken out:

const FLOAT32_BYTE_SIZE = 4; // size of a 32-bit float
const STRIDE = FLOAT32_BYTE_SIZE * 4; // there are 4 elements for every vertex. x, y, u, v
const XY_OFFSET = FLOAT32_BYTE_SIZE * 0;
const UV_OFFSET = FLOAT32_BYTE_SIZE * 2;

The FLOAT32_BYTE_SIZE constant is the size of each variable in Float32Array. The STRIDE constant will be used to tell WebGL how many bytes are used for the data of a single vertex. The four columns we defined in the previous code represent x, y, u, and v. Since each one of those variables uses four bytes of data, we will multiply the number of variables by the number of bytes that are used by each variable to get the stride, or how many bytes are used by a single vertex. The XY_OFFSET constant is the starting location inside of each stride where we will find the x and y coordinate data. For consistency, I multiplied the floating-point byte size by the position, but since it is 0, we could have just used const XY_OFFSET = 0. Now, UV_OFFSET is the offset in bytes from the beginning of each stride where we will find the UV texture coordinate data. Since those are in positions 2 and 3, the offset is the number of bytes that's used for each variable, multiplied by 2.