FEATURE: Improve alpha blending for X-ray

[xeolabs]

We currently use the same blending modes for Selection, X-Ray and Highlight effects.

The blending modes we use currently are chosen to look best for Selection and Highlight, but seem to make X-ray too dark.

Solution could be to:

• allow different blending modes for for X-Ray, Selection and Highlight,
• maybe expose the ability to select the blending mode for each of these effects through the API, to override them for X-ray if needed,
• or, always apply a better blending mode for X-ray, leaving blending the current blending modes for Selection and Highlight as they are currently.

Currently

X-Ray is too dark with the current blending modes.

gl.blendEquation(gl.FUNC_ADD);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

Experimental Improvement, using ADD, ONE_MINUS_SRC_ALPHA for X-ray

X-ray looks better with the blending mode shown below.

gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

[pbbr]

@xeolabs This is a very useful adjustment for X-Ray mode. But we have recognized, that the following mode doesn't work correctly when the background / canvas is transparent. In this case, transparent objects getting colored from the canvas background color.

gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

Maybe there's a better blending mode / function to achieve the desired result?

[xeolabs]

@pbbr I've done lots of experimentation with blending modes but haven't yet found one that works perfectly for all cases. If anyone has suggestions they would be most welcome.

[pbbr]

@xeolabs Unfortunately, we didn't find a better configuration too. But what we see is, that with this blend function, transparent objects look very "bright" in Safari (Edge and Chrome are correct, both on Windows and Mac).

Safari:

Edge / Chrome:

Interesting is, that a captured snapshot looks correct. Do you have an idea how to change this?

[pbbr]

https://github.com/xeokit/xeokit-sdk/issues/1251#issuecomment-1916225747

@xeolabs Did you had any idea how to improve the appearance of transparent objects in Safari?

[xeolabs]

@pbbr I haven't looked at this issue lately on Safari, so nothing to report yet. Do you represent one of our enterprise users? If so, then if we could track this via our Jira then we can ensure that it gets prioritized properly

[pbbr]

@xeolabs Yes, we are. But we don't have access to Jira. How we can get this?

[xeolabs]

@pbbr please contact Wlod via this link, and he should be able to set you up with Jira access: [email protected]