title: Translate 3D cube on x-axis
body: <p>Im trying to translate two 3D cubes away from each other. I've tried using the clipspace aswell as the translation matrix but nothing has worked. The solution im looking for is the cubes side-by-side preferably on the x-axis. </p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var gl,program,canvas;
  
  var vBuffer, vPosition;
  var idxBuffer;
  
  var vertices = [
      -0.5, 0.5, 1,
       0.5, 0.5, 1,
       0.5, -0.5, 1,
      -0.5, -0.5, 1,
      -0.5, 0.5, 0,
       0.5, 0.5, 0,
       0.5, -0.5, 0,
      -0.5, -0.5, 0
  ];
  
  var dVecIdx = new Uint16Array([
    0, 1, 1, 2,
          2, 3, 3, 0,
    4, 5, 5, 6,
          6, 7, 7, 4,
    0, 4, 1, 5,
          2, 6, 3, 7
  ]);
  
  var projection = [
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 1,
      0, 0, 0, 1
  ];
  
  var a = Math.sqrt(0.5);
  var rotation = [
     a, 0, a, 0,
     0, 1, 0, 0,
    -a, 0, a, 0,
     0, 0, 0, 1
  ];
  
  window.onload = function init() {
  
      canvas = document.getElementById("gl-canvas");
  
      gl = WebGLUtils.setupWebGL(canvas);
      if (!gl) { alert("WebGL isn't available"); }
  
      gl.viewport(0, 0, canvas.width, canvas.height);
  
      gl.clearColor(1.0, 1.0, 1.0, 1.0);
  
      gl.enable(gl.DEPTH_TEST);
  
      program = initShaders(gl, "vertex-shader", "fragment-shader");
  
      vBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);
  
      vPosition = gl.getAttribLocation(program, "vPosition");
      gl.enableVertexAttribArray(vPosition);
      gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
  
      idxBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, idxBuffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, dVecIdx, gl.STATIC_DRAW);
  
      render();
  }
  
  function render() {
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
      gl.useProgram(program);
      gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
      projLoc = gl.getUniformLocation(program, "projectionMatrix");
      loc = gl.getUniformLocation(program, "rotate");
      gl.uniformMatrix4fv(projLoc, false, projection);
      gl.uniformMatrix4fv(loc, false, projection);
      gl.drawElements(gl.LINES, dVecIdx.length, gl.UNSIGNED_SHORT, 0);
      
      gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
      projLoc = gl.getUniformLocation(program, "projectionMatrix");
      loc = gl.getUniformLocation(program, "rotate");
      gl.uniformMatrix4fv(projLoc, false, projection);
      gl.uniformMatrix4fv(loc, false, rotation);
      gl.drawElements(gl.LINES, dVecIdx.length, gl.UNSIGNED_SHORT, 0);
  
      requestAnimFrame(render);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"&gt;&lt;/script&gt;
      &lt;script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"&gt;&lt;/script&gt;
      &lt;script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"&gt;&lt;/script&gt;
  
      &lt;script id="vertex-shader" type="x-shader/x-vertex"&gt;
          attribute vec3 vPosition;
          attribute vec4 vColor;
          varying vec4 fColor;
          uniform mat4 projectionMatrix;
          uniform mat4 rotate;
  
          void main() {
              gl_Position = projectionMatrix * rotate * vec4(vPosition, 1);
              fColor = vColor;
          }
      &lt;/script&gt;
  
      &lt;script id="fragment-shader" type="x-shader/x-fragment"&gt;
          precision mediump float;
          varying vec4 fColor;
  
          void main() {
              gl_FragColor = fColor;
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="border: 1px dotted black;"&gt;
          &lt;div style="text-align:center"&gt;
              &lt;canvas id="gl-canvas" width="500" height="500"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is appreciated!</p>