Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Short answer: I don't think it's the library's <em>fault</em>, but it is definitely an issue that the library should resolve.</p> <p>Specifically, webgl-2d <a href="https://github.com/gameclosure/webgl-2d/blob/master/webgl-2d.js#L296" rel="nofollow">sets the GL color mask during initialization</a> using <code>gl.colorMask(1, 1, 1, 0)</code> -- thus blocking any writes to the alpha channel.</p> <p>Now, I must admit that I'm not entirely sure what's happening to turn the screen white. The blend function is (src alpha, one minus src alpha), which means that for every color written out, it will be blended with the background color according to the source alpha component. To simplify the explanation, here's the formula for just the Red channel:</p> <pre><code>Red = Rs * As + Rd * (1 - As) </code></pre> <p>...where Rs is the source (new) Red channel, As is the source Alpha channel, and Rd is the destination (current background) Red channel.</p> <p>So, if we assume a Red color of 50 (or ~0.196 in WebGL), my understanding is that what <em>should</em> be happening is:</p> <pre><code>Red = 0.196 * 1 + 0.196 * (1 - 1) = 0.196 </code></pre> <p>In other words, it should be replacing the previous color with the new one.</p> <p>As long as the source channel equals the destination channel, even where alpha other than 1.0 is involved, the numbers change a bit, but not the result:</p> <pre><code>Red = 0.196 * 0.5 + 0.196 * (1 - 0.5) = 0.196 </code></pre> <p>The result would obviously change if the destination Red channel is, in fact, different from the source channel, but even then I don't see how it works out to a white color. If the issue were due solely to blending, I would expect an incremental step towards white based on the value in the Alpha channel, not a "jump" to white in a single frame.</p> <p>So mathematically, it looks fine to me. But, I can reproduce this issue in my own WebGL framework (<a href="http://blog.jaxgl.com/what-is-jax" rel="nofollow">Jax</a>) by setting the color mask to prevent alpha writes, so it's not completely the fault of the library. My guess is this could be a bug in the OpenGL drivers on your and my (and countless other) machines.</p> <p>I will continue to research this issue, and update this answer if I can learn anything.</p> <p>Regardless, the problem can be resolved within the <em>webgl-2d</em> library. I have <a href="https://github.com/gameclosure/webgl-2d/pull/29" rel="nofollow">submitted a pull request</a> to the developer. (FYI, the repo you linked in the question was a fork from the original repository; I can't tell who the current maintainer is so I sent the pull request to the original repository.)</p> <p>Until the pull request is (hopefully) accepted, or the issue is otherwise resolved, I believe you can do this:</p> <pre><code>ctxGL.colorMask(1, 1, 1, 1); </code></pre> <p>...before doing any rendering, and it should Just Work.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload