title: How to transform vertices without changing the format?
body: <p>If I want to change the size or position of an object in WebGL, I take the original vertex-data {x,y,z} of this object and pass it to the vertex-shader, where it's multiplied with a matrix, that holds the information about the transformations, resulting in a new set of coordinates, which is only known to my GPU, but invisible for me.</p>
  
  <p>That works fine, as far as the only thing that counts, is the picture on the screen, but I want to be able to save the transformed vertices without additional information about matrix multiplications, simply as x,y,z-values, just like the original data.</p>
  
  <p>The idea was, to take the final step of multiplying the transformation-matrix with the original vertex-data by my own in JavaScript, but I just don't get it working!</p>
  
  <p>I wrote the following function to multiply a 4x4-matrix with an array of x,y,z-values, by adding a fourth value {1.0} to change the vec3-data into vec4-data...</p>
  
  <pre><code>function matrixVectorProduct (mat4, data) {
  
    var result = new Array( );
  
    for (var i = 0; i &lt; data.length / 3; i++) {
  
      var n = i * 3;
  
      var vec4 = [data[n], data[n + 1], data[n + 2], 1.0];
  
      var x = mat4[0]  * vec4[0] + mat4[1]  * vec4[1] +
              mat4[2]  * vec4[2] + mat4[3]  * vec4[3];
  
      var y = mat4[4]  * vec4[0] + mat4[5]  * vec4[1] +
              mat4[6]  * vec4[2] + mat4[7]  * vec4[3];
  
      var z = mat4[8]  * vec4[0] + mat4[9]  * vec4[1] +
              mat4[10] * vec4[2] + mat4[11] * vec4[3];
  
      var w = mat4[12] * vec4[0] + mat4[13] * vec4[1] +
              mat4[14] * vec4[2] + mat4[15] * vec4[3];
  
      result.push(x, y, z, w);
  
    }
  
    return result;
  
  }
  </code></pre>
  
  <p>...but beside the fact that I have no idea of how to convert the vec4-values back to vec3-values, there must be something wrong with the concept as a whole:</p>
  
  <p>Let's suppose we have the vertices for a simple triangle like</p>
  
  <pre><code>var vertices = [0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0];
  </code></pre>
  
  <p>and we create a 4x4-matrix with</p>
  
  <pre><code>function createMat4 ( ) {
  
    var mat4 = new Float32Array(16);
  
    mat4[0]  = 1; mat4[1]  = 0; mat4[2]  = 0; mat4[3]  = 0;
    mat4[4]  = 0; mat4[5]  = 1; mat4[6]  = 0; mat4[7]  = 0;
    mat4[8]  = 0; mat4[9]  = 0; mat4[10] = 1; mat4[11] = 0;
    mat4[12] = 0; mat4[13] = 0; mat4[14] = 0; mat4[15] = 1;
  
    return mat4;
  
  }
  </code></pre>
  
  <p>translate it by - let's say [0, 0, -5] - using this function</p>
  
  <pre><code>function translateMat4 (mat4, vec3) {
  
    var x = vec3[0],
        y = vec3[1],
        z = vec3[2];
  
    var a = mat4;
  
    mat4[12] = a[0] * x + a[4] * y + a[8]  * z + a[12];
    mat4[13] = a[1] * x + a[5] * y + a[9]  * z + a[13];
    mat4[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
    mat4[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
  
    return mat4;
  
  }
  </code></pre>
  
  <p>and finally multiply the created and translated matrix with the vertex-data stored in <code>vertices</code> by using the <code>matrixVectorProduct</code>-function noted above, the result should be </p>
  
  <pre><code>translatedVertices = [0.0, 1.0, -5.0, -1.0, -1.0, -5.0, 1.0, -1.0, -5.0];
  </code></pre>
  
  <p>but it is just [x,y,z,1], because -5 x 0.0 (z-value) equals 0, so it cannot work this way.</p>
  
  <p>What am I doing wrong?</p>