title: two equal object on same canvas (split mode) webgl
body: <p>I'm try to use the same object (a simple cube) in split screen. 
  Initially I create two canvas, with two different programs and I used a same point for render twice a cube. 
  Obviously didn't work and i read on this <a href="https://stackoverflow.com/questions/33165068/how-can-we-have-display-of-same-objects-in-two-canvas-in-webgl">Topic</a> that I can't do this way.</p>
  
  <p>The answer suggest to use </p>
  
  <blockquote>
    <p>single canvas using gl.enable(gl.SCISSOR_TEST), gl.scissor and
    gl.viewport</p>
  </blockquote>
  
  <p>I'm new with this stuff and i don't understand how to do.</p>
  
  <p>He suggest an example too, but is very complex and I don't understand.</p>
  
  <p>My example is very simple, i just want draw this two cube(from the same points) with different projection just for see in real time the difference between different projection.</p>
  
  <p>Anyone can help me?</p>
  
  <p>Edit: As suggest from Gman i edit my code in this way</p>
  
  <pre><code>window.onload = function init() {
  
      canvas = document.getElementById( "gl-canvas" );
  
      gl = WebGLUtils.setupWebGL( canvas );
      if ( !gl ) { alert( "WebGL isn't available" ); }
  
     //4
      const width = gl.canvas.width;
      const height = gl.canvas.height;
      const displayWidth = gl.canvas.clientWidth;
      const displayHeight = gl.canvas.clientHeight;
  
  
  
  
   gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
  
      gl.viewport( 0, 0, canvas.width, canvas.height );
  
      gl.enable(gl.DEPTH_TEST);
  
  //
  //  Load shaders and initialize attribute buffers
  //
  program = initShaders( gl, "vertex-shader", "fragment-shader" );
  gl.useProgram( program );
  
  colorCube();
  
  
  
  render(0, 0, width / 2, height, displayWidth / 2, displayHeight);
  
  // draw on right
  render(width / 2, 0, width / 2, height, displayWidth / 2, displayHeight);
  </code></pre>
  
  <p>and the render function is</p>
  
  <pre><code>var render = function(drawX, drawY, drawWidth, drawHeight, dispWidth, dispHeight) {
  
  
  
  eye = vec3(radius*Math.sin(phi), radius*Math.sin(theta),radius*Math.cos(phi));
  
  
  gl.enable(gl.SCISSOR_TEST);
  gl.viewport(drawX, drawY, drawWidth, drawHeight);
  gl.scissor(drawX, drawY, drawWidth, drawHeight);
  
  gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
  
  mvMatrix = lookAt(eye, at , up);
  const aspect = dispWidth / dispHeight;
  
  
  
  pMatrix = ortho(left, right, bottom, ytop, near, far);
  
  
  gl.uniformMatrix4fv( modelView, false, flatten(mvMatrix) );
  gl.uniformMatrix4fv( projection, false, flatten(pMatrix) );
  
  
  
  
  gl.drawArrays( gl.TRIANGLES, 0, numVertices );
  
  
  //requestAnimFrame(render);
  </code></pre>
  
  <p>}</p>
  
  <p>if i don't remove requestAnimFrame i see the 2 cube just for a sec and after all will be delete.</p>