title: WebGL - two pass rendering
body: <p>I have an usage question about webGL.</p>
  
  <p>Recently, I had to render in real-time a post-processed image from a given geometry.</p>
  
  <p>My idee was:</p>
  
  <ol>
  <li>the geometry is projected on the screen by the vertex shader</li>
  <li>a first fragment shader is used to render this geometry offscreen</li>
  <li>a second fragment shader post-process the offscreen image, and display the result on the canvas.</li>
  </ol>
  
  <p>How I implemented it:</p>
  
  <p>I wrote a first set of two shaders for the offscreen render. It serves me to draw the geometry to a texture, using a framebuffer.</p>
  
  <p>For the second part, I created a second glsl program.
  Here, the vertex shader is used to project a rectangle that covers the whole screen.
  The fragment shader picks the appropriate pixel from the offscreen texture using a sample2D, and do all its post-process stuff.</p>
  
  <p>This sounds weird to me, for two thinks:</p>
  
  <ol>
  <li>In order to be 'renderable', the offscreen texture has to be created with a size power of two, and thus can be significantly larger than the canvas itself.</li>
  <li>Using a second vertex shader seems redundant. Is it possible to skip this step, and directly go to the second fragment shader, to draw the offscreen texture to the canvas?</li>
  </ol>
  
  <p>So, the big question is: what is the proper way to achieve this?
  What am I doing right, and what am I doing wrong?</p>
  
  <p>Thank you for your advice :)</p>