Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Default Alpha Blending On WebGL #608

Conversation

AnthonyYoManz
Copy link

Motivation and Context

This addresses issue #606

Unlike normal OpenGL, WebGL expects colours' RGB values to be premultiplied by their alpha value. Meeting this expectation is fairly straight forward, as it can be achieved simply by modifying the fragment shader exclusively for wasm32 architecture.

Unfortunately the usual blend func glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
isn't going to do what you'd expect thanks to this, and so I've changed it to blendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA) by default on wasm32 arch. It might make more sense to apply this change to glow or golem, rather than quicksilver, but I'm not all too familiar with the ecosystem so this could probably use some discussion.

Checks

  • I have read CONTRIBUTING.md
  • I have updated CHANGES.md, with [BREAKING] next to all breaking changes
  • I do not think this requires changes to any documentation

Unlike normal OpenGL, WebGL expects colours' RGB values to be
premultiplied by their alpha value. Meeting this expectation is fairly
straight forward, as it can be achieved simply by modifying the fragment
shader exclusively on wasm architectures.

Unfortunately the usual blend func (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
isn't going to do what you'd expect, and so I've changed it to
(GL_ONE, GL_ONE_MINUS_SRC_ALPHA) by default on wasm architectures.
@ryanisaacg
Copy link
Owner

You have saved me a lot of grief! Thank you for pointing out that WebGL expect pre-multiplied colors by default. Fortunately, we can disable that behavior when we create a context by setting the premultipliedAlpha to false. We have to do that on context creation, which takes place in blinds. If you want to take a stab at it, feel free; if not, I'll try to get to it soon.

@AnthonyYoManz
Copy link
Author

AnthonyYoManz commented May 18, 2020

So I did a little investigation into that earlier and it seemed like it was gonna be hellish. Also I read somewhere that premultipliedAlpha = false doesn't work in Chrome, though that was a bug that's since been fixed.

I've done more investigation into how to specify attributes on context creation and I end up blocked when going as deep down as webgl_stdweb:

https://docs.rs/webgl_stdweb/0.3.0/src/webgl_stdweb/home/cratesfyi/cratesfyi/debug/build/webgl_stdweb-83f4c94fc101c945/out/bindings.rs.html#5668

https://github.com/brendanzab/gl-rs/blob/master/webgl_generator/webgl_generators/stdweb_gen.rs#L662-L665

Basically, the from_canvas method compiles (transpiles?) to canvas.getContext("webgl"); without any room for attributes like premultiplied alpha. If I've not made a mistake at some point, we'd need to add a route for some attributes that can go from blinds down to webgl_stdweb.

One thing I haven't looked into is alternative ways to specify premultipliedAlpha = false, and I have pretty limited familiarity with both JavaScript and WebGL so I'm not really sure where to look.

@ryanisaacg
Copy link
Owner

@AnthonyYoManz Thanks for doing the initial investigation here, I have a fix over on ryanisaacg/blinds#28 that will take care of this for all blend modes.

@ryanisaacg ryanisaacg closed this May 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants