How to use a gradient instead of solid color for a GUI node

A very, very basic project I’ve made is attached below :wink: No textures, just a pure fragment program :slight_smile:

You can modify the fragment program my_gui.fp and use your preffered radial gradient function, tinker a little bit there :slight_smile: Further modifications could allow you to change the behavior of the fillings of the nodes and so on.
Notice the fragment program applies to all of your nodes separately - If you would need to use few different gradients in one GUI, you would need to think of a workaround (more GUIs e.g.) or something more sophistiticated :wink:

Regarding controling the shader from your game/app logic - it’s a little bit tricky, but you can control it from your render script, as figured out here :wink:

GUI_shader.zip (19.2 KB)

5 Likes