title: Displaying multiple frames of a video element simultaneously
body: <p><em>Some background: graphics newbie here, have just dipped my toes into the world of 3D in the browser with mrdoob's excellent three.js. I intend to go through all the tuts at <a href="http://learningwebgl.com/" rel="nofollow noreferrer">http://learningwebgl.com/</a> soon :)</em> </p>
  
  <hr>
  
  <p>I'd like to know how one would roughly go about re-creating something similar to:
  <a href="http://yooouuutuuube.com/v/?width=192&amp;height=120&amp;vm=29755443&amp;flux=0&amp;direction=rand" rel="nofollow noreferrer">http://yooouuutuuube.com/v/?width=192&amp;height=120&amp;vm=29755443&amp;flux=0&amp;direction=rand</a></p>
  
  <p>My naive understanding of how yooouuutuuube works is as follows:  </p>
  
  <ol>
  <li>Create a massive BitmapData (larger than any reasonable browser window size).</li>
  <li>Determine the number of required rows / columns (across the entire BitmapData plane, not just the visible area) based on the width/height of the target video frame </li>
  <li>Copy pixels from the most recent video frame to a position on the BitmapData (based on the direction of movement)</li>
  <li>Iterate through every cell in the BitmapData, copying pixels from the cell that precedes it</li>
  <li>Scroll the entire BitmapData in the opposite direction to create the illusion of movement, with a Zoetrope-type effect</li>
  </ol>
  
  <p>I'd like to do this in WebGL as opposed to using Canvas so I can take advantage of post-processing using shaders (noise and color channel separation to mimic chromatic aberration).</p>
  
  <p>Here's a screenshot what I have so far:</p>
  
  <p><img src="https://i.stack.imgur.com/VfOHj.jpg" alt="enter image description here"></p>
  
  <ul>
  <li>Three videos (same video, but separated into R, G and B channels) are drawn to a canvas 2D context. Each video is slightly offset in order to fake that chromatic aberration look. </li>
  <li>A texture is created in Three.JS which references this canvas. This texture is updated every draw cycle.</li>
  <li>A shader material is created in Three.JS which is linked to a fragment shader (which creates noise / scanlines)</li>
  <li>This material is then applied to a number of 3D Planes.</li>
  </ul>
  
  <p>This works just fine for showing single frames of video, but I'd like to see if I could show multiple frames at once without needing to add additional geometry.</p>
  
  <p>What would be the optimal way of going about such a task? Are there any concepts that I should be studying/investigating in further detail?</p>