How to apply shadow to shapes?

Hello,

I would like to create a kind of Neumorphism UI theme for my OF app.
If you don’t know what neumorphism is, you can have a look here
https://dribbble.com/tags/neumorphism

I need a drop shadow effect to be able to create neumorphic UI controls (outer shadows, inner shadows on shapes such as rectangle, rounded rectangle, circle…)

I can’t find any way to create 2D shapes shadows in OF.
I have searched on this forum and on OfxAddons but can’t find an easy way to create shadows (or blur).

Thanks for your help

Eviral

Hi @Eviral , there are a few different ways to do this in OF. If you can’t find an addon, then you’ll likely have to build the specific effects you want before you can apply them. But OF does not have a shadow-effect class or functions as far as I know.

A basic approach might be use an additional shape for a shadow, and then use the drawing order to draw all the shadows first, or use a 3d position distinguish shadows from shapes. You can also render multiple times (creating layers) into an ofFbo if that would be helpful. An ofMesh can sometimes be useful for basic shapes even when drawing in 2d.

A slightly more involved approach might be to render shapes into an ofFbo, and then use an ofShader to create the shadows. The shader could potentially use another texture as a mask to tell it where and/or how much shadow effect to apply. Multiple shader passes can be made if needed. A pair ofFbo (read from one, write to the other) is very helpful with multiple passes.

Finally, you could try rendering everything in 3d, with ofLight and ofMaterial; this approach is more involved and may not be quite what you have in mind, but it might also make a very interesting UI.

1 Like

I agree with @TimChi
For this case - either faking it with layers of flat images that look like they have depth ( I bet that’s how most of the examples on that link do it ), or via a shader that simulates the shadows but not using a real lighting model might be the best way to go.

For shadows in general @NickHardeman has been working on this and hopefully we will have built in shadow support in the nightly builds pretty soon. But they won’t be as soft and smooth probably as those examples.

Another approach would be to do everything in 3D and use Physical Based Rendering ( might be overkill though ).

Take a look at:

and:

Looking at those examples again, I bet that something like a dial is a png sequence ( like a movie ) rendered out from Cinema 4D or similar.

With the sequence showing the dial going from 0 to 100 and then the user is essentially scrubbing the sequence as the turn the dial.

As @TimChi mentioned, you could render the 2D shapes into an FBO, blur and then draw the blurred fbo under the shapes to simulate shadow. To make a drop shadow effect, draw the shape into the shadow fbo with an offset, ie down and to the right a bit. See this example about how to implement a blur shader and an fbo.

Hey I like this idea a lot! Not completely OF, but there are lots of tools out there to create all kinds of stuff that can then be easily used in OF. Plus changing the (static) look of the UI comes down to changing the png sequence, rather than rewriting a bunch of code.

Thanks for yours answers guys !
I’m looking for a simple ready to use solution because i’m quite new to C++ and OpenFrameworks.
I’m going to try the proposed solutions and will tell you if it feets my need.

Thanks again :slight_smile:

I recall that @zach was using a lot of drop shadows somehow on his dailysketches.
Which method where you using zach?

Yes, @zach, please give me a code sample of your drop shadows :slight_smile:
Thanks Roy !

ah I don’t do anything fancy – I either use a glsl blur, like ofxBlur or I often use a blurry circle spot image to fake a kind of shadow.

Hello,

I have tried ofxBlur and ofxBlurShader but unfortunately the blur quality is insufficient.
To be able to create a correct Neumorphism theme for UI controls i need high quality blur.
Gradients created by blur needs to be very smooth like on this image :

I am disappointed to see the poor quality of bluring in openframeworks and how complicated it is to display a poor drop shadow :frowning:
So sad…

Hey @Eviral , you might be able to find a nice blur shader on Shadertoy (or similar), and then adapt it to OF. Also, multiple shader passes can help, and/or with different values in the shader.

I would venture to guess that SwiftUI is taking a similar approach. The example in the link is likely applying a shader (maybe even multiple passes of multiple shaders) to create the effect with the .shadow() modifier. Notice how .shadow() is called twice. The SwiftUI modifier doesn’t just create a shadow effect. There are opposing areas of blurred highlights to simulate reflectivity.

Finally, if you’re using macOS, you might be able to use apple’s frameworks in your OF code. I don’t think the swift-only ones will work, but the objective-c ones might. I use their GCD header for parallel computing. But my knowledge here is super limited.

Thanks @TimChi for your help :slight_smile:
I have found this nice drop shadow shader on ShaderToy but i don’t know how to make it works in my OpenFrameworks project.

I can’t find any clear tutorial explaining how to integrate ShaderToy shaders in of.
If somebody can help…

Thanks a lot

Hey I don’t think there is a direct way to integrate the shadertoy shaders; OF still needs an ofShader. Shadertoy shaders can be adapted though. I apologize if this wasn’t clear in my previous post.

One approach to adapt them is to just sort study the shadertoy code, figure out essentially how it works, and then use the ideas in an ofShader. Another (more literal way) is to transcribe the code. But regardless oF still needs an ofShader.

The shadertoy example is not a blur. It generates grey values from its various functions. So, this might be a nice approach. Using something like its sigmoid() function could make a more customizable distribution of grey colors than what several passes of a blur might do.

If you have not used ofShader before, I fully appreciate the effort that it will take to build this effect in a way that you like. I find shaders invaluable in OF, and for me, this effort was definitely worth it.

There really are lots of ways to create gui elements with a nice buttery shadow effect. For instance, you might want to look at creating .png images of gui elements outside of OF, and then drawing them into an ofFbo.

If you need to learn about ofShader, ofBook has a great chapter on them, and the projects in /examples/shader/ go along with that chapter.