transparent rendering seems to require premultiplied alpha for parity between renderers

[luciangames]

When using transparent renderers, the WebGL and Canvas renderers show visible disparity. (Forum topic 2476)

Setting premultipliedAlpha to true in the WebGL context options (the default if left unspecified) fixes it.

[GoodBoyDigital]

Hi @luciangames - just fixed this one - turns out I needed to clear the buffer using gl.clearColor(0, 0, 0, 0); and it all looks consistent across browsers. Cheers! 👍

[luciangames]

I'm afraid not, Matt. The canvas and gl renderers still look different
without premultiplied alpha.

But I definitely think it's better to explicitly pass a numeric alpha
parameter to gl.clearColor, than a boolean. That seems to fix the weirdness
(surprise #2 in my forum post) in Firefox. Maybe it doesn't coerce that
boolean to a float for some reason.

Maybe just remove that "if" statement, and change the alpha parameter to
"!this.transparent | 0". This way, you force the coercion to happen
(quickly) in the JS engine instead of whatever Firefox does with it in
native code, and (bonus) remove an unnecessary branch from the rendering
path. Let the user remain responsible for the rgb values.

Anyway that's a separate issue, and this one is still unresolved.

(Sorry. I appreciate you!)

[GoodBoyDigital]

hehe no worries, would be good to get this properly licked!

It seems ok for me, in the 3 browsers I get this:

Keen to know how this example looks for you? thanks @luciangames !

[luciangames]

I wrote a little example to illustrate the difference between renderers (of
transparent sprites), but there's something really crazy happening with
the canvas renderer right now that obscures the issue. (The canvas isn't
getting cleared between frames for some reason.)

http://codepen.io/anon/pen/aHCwx

This example is loading pixi from
http://raw.githack.com/GoodBoyDigital/pixi.js/dev/bin/pixi.dev.js. So as
soon as the new bug is fixed it should show the issue.

If it weren't for this new bug, you'd see that a transparent sprite looks
very different between renderers.

In the screenshots you posted (I'm not sure where the example lives at this
point), it appears that the sprite is fully opaque, so the issue wouldn't
manifest in that case.

Thanks!

[englercj]

@luciangames The code pen you posted looks good to me in FF and Chrome, are you still seeing an issue? Can you give us a screenshot?

[GoodBoyDigital]

righto! should be sorted now :)
Once I tested with non opaque sprites I saw the issue. Thanks for helping with this @luciangames 👍

[luciangames]

Oh, good. High five.

minimal . abstract . strategy
lucian games, llc

On Fri, Jan 24, 2014 at 5:15 AM, Mat Groves notifications@github.comwrote:

righto! should be sorted now :)
Once I tested with non opaque sprites I saw the issue. Thanks for helping
with this @luciangames https://github.com/luciangames [image: 👍]

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/469#issuecomment-33214949
.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.