title: How to implement the various globalCompositeOperations in WebGL?
body: <p>I'm migrating my project from Javascript Canvas to Javascript WebGL.</p>
  <p>In some portions of my code I used Canvas's <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation" rel="nofollow noreferrer">globalCompositeOperation</a> for things such as lighting and fog.</p>
  <p>Now that I am using WebGL I no longer have access to these, but instead have access to <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc" rel="nofollow noreferrer">blendFunc</a>. The global composite operation I am specifically looking to migrate from Canvas to WebGL is <code>soft-light</code>, but there are two problems:</p>
  <ol>
  <li><p>I don't see that item on the list of blend functions</p>
  </li>
  <li><p>I'm not sure where to find the source for <code>soft-light</code>, so I do not know how to emulate it.</p>
  </li>
  </ol>
  <p>I suppose my question is two-part. One, are there any sources that list how the various global composite operations were implemented, and if so, are there any corresponding WebGL implementations? And if not, how can I convert <code>soft-light</code> to a WebGL blending function for use in my application?</p>
  <p>That is, in Canvas I would do something like this:</p>
  <pre><code>context.globalCompositeOperation = 'soft-light';
  
  // draw images
  
  context.globalCompositeOperation = 'source-over'; // reset back to default
  </code></pre>
  <p>What would be the equivalent in WebGL? Something like.. (this is close but not accurate)</p>
  <pre><code>gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
  
  // draw images
  
  gl.blendFunc(gl.ONE, gl.ZERO); // reset back to default
  </code></pre>