Clipping and alpha masks for objects

[dew]

When adding a widget it's currently not possible to hide a specific part of it explicitly. Sometimes it would be handy to be able to define a "clipping mask" to define what's shown and what's hidden. Besides clipping - which is sort of a hard alpha mask - it would also be nice to have a "soft" alpha mask (= linear transparency mask) with 8/16/24 bit resolution which allows blending an object very gently against its background.

Clipping and alpha masks could be defined using a vector object like a polygon which is suggested here:
viewtopic.php?f=5&t=81

In case of the alpha mask it could also be loaded from a PNG or even a JPG / JPEG file where grayscale values are interpreted as alpha values.

Not only widgets could have these masks but all elements / objects could use them (optionally) to add clipping or linear transparency to them.


Hope you like it

[dew]

No love? No opinions?

What I am looking for is an easy way to:
- add advanced transparency to objects (widgets, panels, custom views, etc...) -> alpha mask
- add clipping masks to objects (widgets, panels, custom views, etc...) to cut out interesting parts of objects -> clipping mask

Both vector (polygons, gradient fills, ...) and bitmap masks (PNG, JPG, ...) shall be possible for alpha and clipping masks.

Attached are two use cases for these alpha / clipping masks.
Hope you like it

[TrianguloY]

This is available for icons, not sure how easy/difficult will be to adapt it to items in general.

One thing that is available to all items even widgets is the ability to 'cut' them (in a rectangle only). Just change the margin or content size to a negative value (in pixels, remember you can write any number, not necessarily less than 100) and the item/widget will be cut.

[dew]

Yes, I know that setting negative values there could clip off content. But its (a) trial-and-error (b) not very user friendly and (b) not really flexible if the cutout needs to be more complicated.
Also alpha-masks are not possible at all for widgets or other objects besides icons. It would be amazing if ALL objects can be masked / clipped as stated in the request.

I hope that a user-friendly approach can be found so that in the case of a clipping mask the user can create such a mask by defining a polygon *interactively* ON TOP OF the widget / object so that creating a precise mask is possible. This would be much much easier.

Also alpha-masks for widgets (and other elements) would allow some nice blending of otherwise harsh elements with the background. Alpha masks could be based on bitmaps (JPG, PNG) AND/OR on geometric vector shapes with optional gradient fills. This would allow very nice elements!

Hope to see this in a future update

[Pierrot]

I like the idea but as of today I don't have an efficient way to implement this.

I need to refresh my knowledge on this but from what I remember compositing is more difficult and inefficient since the introduction of hardware accelerated graphics on Android. The reason is that compositing works on bitmaps. That means that graphics need to be drawn into bitmaps, then composed with an additional mask, then flush back to the screen surface. This prevents hardware acceleration, and moreover this causes issues with memory use. There's a quota on this kind of memory for each app, and as screens tends to have huge resolutions these days, it's a real issue.

[dew]

Hm, ok? Have not been messing with Android code so far but have been doing some graphics programming (OpenGL, DirectX) for my dev jobs.
Is it possible in Android to render a widget (or any other element) to a hardware resident texture (render-to-texture, i.e. using a HW texture as RGBA frame buffer actually) and then render this texture with an second HW texture containing the user provided alpha / clipping bitmap (using multi-texturing, i.e. an appropriate fragment shader) to the target frame buffer where you then can also apply position, scale and rotation transformations?

So yes, this is multi-stage rendering but going to hardware as soon as possible and reusing render buffers for multiple objects where possible might help to reduce resources.

Games are doing similar things and I hope you can find a way for this feature to integrate it with HW accelerated rendering.

Thanks

[Pierrot]

It's possible to redirect a view "output" to a gl surface, but from there I don't know a way to manipulate surface and make a composition.

I haven't looked at the API recently neither, level of support may well have changed. I know it has been regularly improved over time.

[dew]

Please have a look at this tutorial here:
https://code.tutsplus.com/tutorials/how ... -cms-23650

and the info here:
https://arm-software.github.io/opengl-e ... aders.html

I believe this is the missing link between having a widget / object in a gl surface and then rendering it using a dedicated GLSL fragment shader.
In a GLSL fragment shader you can use additional textures to apply the transparency of a provided mask. You can also provide two masks there: one for clipping and another for alpha. It's all done in the same fragment shader and therefore also fully HW accelerated.

You could even allow some special effects using shaders like reducing saturation, tinting or increasing contrast using the very same fragment shader.
You would have variants of shaders to acomplish this. But since shaders are basically strings they could be combined using string operations on startup to generate the required shader programs. You could define multiple shaders for these scenarios:

(1) no clipping mask, no alpha mask, no effects (no additional textures required, very simple passthrough-shader)
(2) apply clipping mask, no alpha mask, no effects (one additonal texture sampler for binary opacity (0 OR 1 in the mask) which is multiplied with the already existing alpha for each fragment -> output.a = color.a * clippingmask.a)
(3) no clipping mask, apply alpha mask, no effects (one additonal texture sampler for linear transparency (0.0...1.0 in the mask) which is multiplied with the already existing alpha for each fragment -> output.a = color.a * alphamask.a)
(4) apply clipping mask, apply alpha mask, no effects (two additional texture samplers, alpha values are multiplied -> output.a = color.a * clippingmask.a * alphamask.a)
(5)..(8) Same as above but with additional calculations for contrast, saturation, tinting and brightness using user provided parameters. These effects work on the color part (color.r, color.g, color.b).

Creating such shader programs is not really complicated, HW accelerated and fun. For alpha values (clipping and alpha masks) these are just some multiplications basically. Alpha + clipping masks must be loaded and activated before actually rendering the object.

It would bring a lot of customization to all objects in LL!

Hope you consider that for the next release eventually