title: Overlapping viewports with three.js
body: <p>I'm trying to make a camera (gui camera) render above the scene camera. My ideia was to set the gui camera to have a transparent background, and so it would be possible to see through it, but it is not working as I expected.</p>
  
  <p>I defined the renderer like:</p>
  
  <pre class="lang-js prettyprint-override"><code>renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  </code></pre>
  
  <p>And I am trying to render like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Render Main Camera
  renderer.setClearColor(0x000000, 1);
  renderer.render(scene, sceneCamera);
  
  // Render GUI Camera
  renderer.setClearColor(0x000000, 0);
  renderer.render(scene, guiCamera);
  </code></pre>
  
  <p>I used this <a href="https://threejs.org/examples/webgl_multiple_views.html" rel="nofollow noreferrer">https://threejs.org/examples/webgl_multiple_views.html</a> as an example for multiple viewports but it's different since their viewports aren't overlapping.</p>
  
  <p>Thanks in advance.</p>