In order to translate a geometry's vertices from 3D to 2D space with Three.js, we must multiply each vertex's position by two more built-in attributes: projectionMatrix and modelViewMatrix.

A matrix is just an array of data where a specific grouping represents some larger piece of information. For instance, let's say we have the array:

mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0)

Looking at this at first, the data doesn't make much sense, but if we were to organize this into groupings of four:

mat4 aMat4 = mat4(
    1.0, 0.0, 0.0, 0.0,  // 1. column
    0.0, 1.0, 0.0, 0.0,  // 2. column
    0.0, 0.0, 1.0, 0.0,  // 3. column
    0.0, 0.0, 0.0, 1.0   // 4. column
);

Each grouping represents some piece of information, such as rgba or xyzw values.

You typically see matrices organized into squares or rectangles, that's because that type of organization helps us digest the data better, although in the end, a matrix is simply just an array of data.

Add in the required projectionMatrix and modelViewMatrix attributes from Three.js, multiplying the current vec4 by both of them to complete the most basic form of a Three.js vertex shader:

Note, projectionMatrix, modelViewMatrix, and your vec4 must be multiplied in that exact order, otherwise, your vertex shader won't work as expected!