title: Most performant method for multiple 2D point-lights in webGL/openGL ? [Dynamic lights]
body: <p>I'm working on a game that is basically a rapid changing 2D scene where some <strong>point lights</strong> (each can have its own color) are placed on the screen that can also <strong>move on their own with each frame</strong>.</p>
  
  <p>Let me first give you a few situations I sketched on paper earlier today:</p>
  
  <p><img src="https://i.stack.imgur.com/L6Tj2.png" alt="Different kind of point light situations"> </p>
  
  <p>The endproduct should be like shown in 4. My question boils down to: 
  <strong>Which implementation would you choose for performance, and why would you do so.</strong></p>
  
  <ul>
  <li>How many shader programs will be needed, what resources &amp; how big (texture ? VBO ?)</li>
  <li>How many context switches (program change, other uniforms, ..)</li>
  </ul>
  
  <p>My current approach would be to have a texture of where light is and where not. This will get rendered at start of each frame, but only used on the next frame. So Light would always laag 1 Frame behind, which might just look fine anyways. During normal rendering of objects (e.g. blue rectangle) i'll look up the light texture in fragment shader and combine that value with the objects one.</p>
  
  <p>However, I see the following drawbacks:</p>
  
  <ul>
  <li>Light always laags behind (60 FPS => 16.6ms). With objects moving up to 15 pixels per frame, this might look laagy.</li>
  <li>I need to keep a big texture no matter how many lights are on the screen (can be 0, can be 100).</li>
  <li>With each frame, I'd need to clear the light texture to gray with alpha for global dimmdown and then redraw all lights..  </li>
  </ul>
  
  <p>The biggest advantage I see is that this is only 2D, so it does not really need to be aware of any shadows or something. </p>
  
  <p>Feel free to post any suggestions, I'm happy to read about and test them all. Don't want to waste any performance unnecessarily.</p>