UI Styles: Implement 'box-shadow'

[revery-ui]

UI Styles: Implement 'box-shadow'

[akinsho]

@bryphe @OhadRau sounds like a great suggestion to make things less error prone, I can tweak what I'm working on to use the BoxShadow.make version 👍

[akinsho]

I'll have a look at this @bryphe, any tips?

[bryphe]

Awesome! Really appreciate the help @Akin909

I wrote up some thoughts, but it is pretty general. Let me know if you have questions on any of the specifics 👍

[akinsho]

@bryphe re. setting the uWorld for the shadow does that mean creating a similar function like getWorldTransform in Node.re ?

[bryphe]

@bryphe re. setting the uWorld for the shadow does that mean creating a similar function like getWorldTransform in Node.re ?

Essentially we'd have to do something like this:

let shadowTransform = Mat4.create();
Mat4.fromTranslation(shadowTransform, Vec3.create(shadowOffsetX, shadowOffsetY));

let worldShadowTransform = Mat4.create();
worldShadowTransform = Mat4.multiply(worldShadowTransform, _this#getWorldTransform(), shadowTransform);

And then we'd set uWorld to do that. The worldTransform is all of the parent transforms applied (any animations, offsets, etc), and then the shadowTransform is just the transform we need for the shadow. Essentially what this is saying is 'First, move my shadow quad based on the shadowOffsetX, shadowOffsetY. Then, apply each parent transform in turn'. Parent transforms might include rotations, scales, etc - they would all get applied in this case.

Hope that helps! Reading through the transforms section here might help too

[akinsho]

@bryphe thanks that helped a lot 👍,got another question now I've actually drawn the shadow, I'm not sure I followed the strategy you suggested about using more quads with lessening opacity to draw the blur?

[OhadRau]

What are your thoughts on named parameters for the BoxShadow? Right now I think it's a little confusing if you don't already know the order of arguments for BoxShadow. I think it would benefit to either have a record/object represent the shadow's parameters or a labelled function that could optionally be used to allow for named/out-of-order parameters.

E.g. of ways we can do this:

~boxShadow={"xOffset": 1, "yOffset": 2, "blurRadius": 3, "spreadRadius": 4, "color": Colors.red}
~boxShadow=BoxShadow.{xOffset: 1, yOffset: 2, blurRadius: 3, spreadRadius: 4, color: Colors.red}
~boxShadow=BoxShadow.make(~xOffset=1, ~yOffset=2, ~blurRadius=3, ~spreadRadius=4, ~color=Colors.red)
~boxShadow=BoxShadow({"xOffset": 1, "yOffset": 2, "blurRadius": 3, "spreadRadius": 4, "color": Colors.red})

If we use an object here or if we use the .make function, we can get default values easily which is a big plus. Alternatively, for the record we could do something like BoxShadow.{...default, xOffset: 1, yOffset: 2}. Ideally the whole library would follow this same pattern, so it might be worth turning this into its own issue where we can further discuss the pros/cons of each of these.

[bryphe]

@OhadRau - I'd be open to it, and I think it's a great way to 'use the language'. I never remember the order of those parameters, have to look it up every time 😄

The BoxShadow.make seems consistent with how we use Style's at least.

@Akin909 - what do you think?

[bryphe]

@bryphe thanks that helped a lot 👍,got another question now I've actually drawn the shadow, I'm not sure I followed the strategy you suggested about using more quads with lessening opacity to draw the blur?

Sweet I just pulled the branch and saw the shadow coming through! 😍

I actually don't think we'll actually need more quads with this strategy, if we handle the gradients all in the shader with that 'cutoff'. Seems like it'd all be doable in the pixel shader - just need to handle the other directions!

[bryphe]

Implemented with #107 - thank you @Akin909 !