Now that we understand how to define a geometry using vertices and indices, let's render a square. Once we have created the JavaScript arrays that define the vertices and indices for our geometry, the next step is to create the respective buffers. In this case, we have a simple square on the x-y plane with the z values set as 0:
const vertices = [ -0.5, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0, 0.5, 0.5, 0];const positionBuffer = gl.createBuffer();
Clipspace Coordinates
These vertices are defined in clipspace coordinates, because WebGL only deals with clipspace coordinates. Clipspace coordinates always go from -1 to +1, regardless of the size of the canvas. In later chapters, we will cover coordinates in more detail and ...
