Dimchikkk / bevy_cosmic_edit

Apache License 2.0
74 stars 9 forks source link

Add shadow shader #66

Open Dimchikkk opened 11 months ago

Dimchikkk commented 11 months ago
image

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

bytemunch commented 11 months ago

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 11 months ago

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 11 months ago

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 commented 11 months ago

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

Dimchikkk commented 11 months ago

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 10 months ago

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

Dimchikkk commented 10 months ago

@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 10 months ago

things are happening 👀

https://github.com/StaffEngineer/bevy_cosmic_edit/assets/43527203/b9ac75ad-ae3e-4509-8394-24ab30d84e46

Dimchikkk commented 10 months ago

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