`#version 300 es
// an attribute is an input (in) to a vertex shader.
// It will receive data from a buffer
// 2D
//in vec2 aVertexPosition; //a_position;
// 3D
in vec4 aVertexPosition; //a_position;
in vec4 aVertexColor ;
out vec4 vColor;
// Used to pass in the resolution of the canvas
uniform vec2 uResolution;
// translation to add to position
//uniform vec2 uTranslation;
// rotation to add to position
//uniform vec2 uRotation;
//uniform vec2 uScale;
// A matrix to transform the positions by
//2D
//uniform mat3 uMatrix;
//4D
uniform mat4 uMatrix;
// all shaders have a main function
void main() {
// Scale the position
// vec2 scaledPosition = aVertexPosition * uScale;
// Rotate the position
// vec2 rotatedPosition = vec2(
// scaledPosition.x * uRotation.y + scaledPosition.y * uRotation.x,
// scaledPosition.y * uRotation.y - scaledPosition.x * uRotation.x );
// Add in the translation
// vec2 position = aVertexPosition + uTranslation;
//vec2 position = rotatedPosition + uTranslation;
// with matrix is easier
// just Multiply the position by the matrix.
// 2D vec2 position = (uMatrix * vec3(aVertexPosition , 1)).xy;
/*
// Also to convert from pixels to clip space with matrix is easier.
// If you look at each of those steps in turn,
//1- the first step, "convert from pixels to 0.0 to 1.0",
//is really a scale operation.
//2- The second is also a scale operation.
//3- The next is a translation and
//4 - the very last scales Y by -1.
//We can actually do that all in the matrix we pass into the shader.
// We could make 2 scale matrices,
//1- one to scale by 1.0/resolution,
//2 - another to scale by 2.0,
//3- a 3rd to translate by -1.0,-1.0 and
//4 - a 4th to scale Y by -1
//5- then multiply them all together
// but instead, because the math is simple,
// we'll just make a function that makes a
// 'projection' matrix for a given resolution directly.
// convert the position from pixels to 0.0 to 1.0
// vec2 zeroToOne = aVertexPosition /vec2(2.0 , 2.0 ) ;
// vec2 zeroToOne = aVertexPosition / uResolution ; //
vec2 zeroToOne = position / uResolution ; //
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
*/
// Multiply the position by the matrix.
// vec2 position = (uMatrix * vec3(aVertexPosition , 1)).xy;
//2D
// gl_Position = vec4(position , 0, 1);
//4D
gl_Position = uMatrix * aVertexPosition ;
// Pass the color to the fragment shader.
vColor = aVertexColor ;
}`