Dimchikkk/bevy_cosmic_edit

Add shadow shader

Dimchikkk opened this issue · 9 comments

Dimchikkk commented
image

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

bytemunch commented

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 commented

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 commented

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

  • 👍1
Dimchikkk commented

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

Dimchikkk commented

One approach to experiment with:
image

  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 commented

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

Dimchikkk commented

@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 commented

things are happening 👀

2023-11-01_211250.mp4
Dimchikkk commented

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