`#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 ;
  
}`