Add shadow shader

[Dimchikkk]

Add option to enable inner shadow
(see https://github.com/StaffEngineer/velo/blob/main/assets/shaders/shadows.wgsl for inspiration)

[bytemunch]

Should inputs be the same as CSS?

Like this tool on inset mode.

I'm speculating now, I think the way the redraw function works at the moment either the shadow will be rendered above the text or alpha blending would break down where shadow and text meet (for big shadows). To remedy this the redraw function would need to sample the material's final color at each pixel. I'd have to play around with a shader implementation to be sure tho.

[Dimchikkk]

Let me give you some intro. This plugin is temporary solution until bevy doesn't have native text input. Bevy should integrate cosmic-text rendering in 0.12-0.13 release. So, native cosmic-text input is expected in 0.13-0.15 bevy release I guess. Big chunk of this plugin can be upstreamed to bevy, chunk of keyboard/mouse interactions, etc. The plugin does CPU rendering, bevy will have GPU rendering. Now back to the shadows. Since we already doing CPU rendering maybe we can play with cosmic-text draw function and make inner shadow. In velo shadows was done by using wgsl, utilising bevy custom material feature (GPU rendering). Another option is for bevy_ui make element invisible and use it only for layouting (for sprite everything is alright) and then use custom material bevy feature to draw inner shadow and then render cosmic-text image into sprite and put it in place of bevy_ui element.

[bytemunch]

Ah okay. I was thinking of porting all the draw functions to shaders but my wgsl is rubbish right now haha, if that's being worked on upstream I'll leave it alone. Will give this another look later, gonna take a crack at double clicks for now

[Dimchikkk]

Yeah, I don't see straight solution to tackle this problem yet, more experimentation is needed :)

[Dimchikkk]

One approach to experiment with:

1. If CosmicEditUiBundle is created, make it invisible and use bevy_ui node only for positioning (skip this step in case of CosmicEditSpriteBundle)
2. Using shader/custom material bevy's feature draw inner shadow and add it as child of root sprite
3. Draw cosmic-text into corresponding root sprite.
4. For CosmicEditUiBundle synchronise size/position of button and root sprite

[bytemunch]

bevyengine/bevy/pull/9506 will close this, now in final review :)

[Dimchikkk]

@bytemunch we already can fix half of the issue, when sprite is used as the base for text drawing, right? :)
Then it's going to be just re-using shader code once bevy merges support for ui materials.

[bytemunch]

things are happening 👀

2023-11-01_211250.mp4

[Dimchikkk]

Niceee...so using SDF we can add rounded corners border and inner/outer shadows 🥇