title: First step to take learning matrices in WEBGL
body: <p>After drawing a simple triangle in webgl, I've decided to start to learn how to do transformations. So basically I'm thinking that the simplest thing I can do is to write an identity matrix and multiply it for the vertex positions.</p>
  
  <p>So I've added to the code the identity matrix as </p>
  
  <pre><code>var identityMatrix = [1,0,0,0,
                        0,1,0,0,
                        0,0,1,0,
                        0,0,0,1]; 
  </code></pre>
  
  <p>Then I've added to the shader the mat4 variable as</p>
  
  <pre><code>'uniform mat4 id_matrix;'
  </code></pre>
  
  <p>And multiplied it for the position (so I'm expecting no changes in the transformations at all, since I multiply everything by 1)</p>
  
  <pre><code>gl_Position = id_matrix * vec4 (a_position,1);
  </code></pre>
  
  <p>Finally I retrieve the location of the matrix in the shader and fill it with my data</p>
  
  <pre><code>var shaderIdentityMatrix = gl.getUniformLocation(program, "id_matrix");
  gl.uniformMatrix4fv(shaderIdentityMatrix,false,new Float32Array(identityMatrix));
  </code></pre>
  
  <p>But after those changes, nothing appears on screen. Am I doing wrong assumptions?</p>
  
  <p>Here's the full code</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;canvas id = "can" width="400" height="400"&gt;
  
  &lt;/canvas&gt;
  
  
  &lt;script&gt;
  var webgl_canvas = document.getElementById('can');
  var gl = webgl_canvas.getContext('experimental-webgl');
  var triangles = [-0.8,-0.8,0,0.8,-0.8,0,0,0.8,0];
  var identityMatrix = [1,0,0,0,
                        0,1,0,0,
                        0,0,1,0,
                        0,0,0,1];    
  var vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(triangles), gl.STATIC_DRAW); 
  
  vertexBuffer.itemSize = 3;
  vertexBuffer.numItems = 3;
  
  
  
  
  
  var vertexShader_source = 'attribute vec3 a_position;' + 'uniform mat4 id_matrix;' + 'void main() { gl_Position = id_matrix * vec4 (a_position,1); }';
  var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';
  
  
  
  
  
  
  
  
  
  //Compile shaders
  var buildShader = function (shaderSource, typeOfShader) {
  var shader = gl.createShader(typeOfShader);
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      alert (gl.getShaderInfoLog(shader));
  }
  return shader;
  }
  
  var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
  var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);
  
  //setup GLSL program
  program = gl.createProgram();
  gl.attachShader(program,compiledVertexShader);
  gl.attachShader(program,compiledFragmentShader);
  gl.linkProgram(program);
  
  
  //Draw
  var shaderIdentityMatrix = gl.getUniformLocation(program, "id_matrix");
  gl.uniformMatrix4fv(shaderIdentityMatrix,false,new Float32Array(identityMatrix));
  var positionLocation = gl.getAttribLocation(program,"a_position");
  gl.enableVertexAttribArray(positionLocation);
  gl.useProgram(program);
  gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
  gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>