Today I encountered the question:
How to create a slight shadow (not fully darked) on 2D GUI.Image, that gets revealed in clockwise direction? I need it to show progression of i.e. time left to build unit, like in RTS games. Instead of clockwise the image reveal could go from bottom to top. I would be interested in both ways.
Greets
Take
Sorry @Takemura I am having trouble to figure what you want to achieve can you share a pic or video of what it is you are trying to build ?
Like the first building icon on the image, where the “overlay” color will be revealed, to show progression of construction site.
here is the image texture from the jmonkey forum post (worth reading)
Thanks for the resources, I was able to implement it in general. But how do you apply it on GUI ImageOnlyButton?
My playground so far:
Edit: Can you change color instead “black” shadow?
Here is ImageOnlyButton
but, I don’t think this is actually very useful. I think using it in a game will require a bit more work. Although this pg is kinda buggy because of render ordering, its a really great example imo. Look at the bottom on how they set up the MultiRenderTarget and also how they add specific meshes to the render target’s renderList.
Also, could investigate doing it as a shader material instead of postprocess maybe. Idk
@carolhmj any ideas?
This is really interesting as you are trying to use a texture (I would kind a use a ProceduralTexture in this case) as a GUI image but the gui is using a canvas 2d 
so it is a lot of extra copies from one context to the other. I wonder if we could have a way to use texture as part of the gui @RaananW ? (since @carolhmj is enjoying some well deserved vacations 
)
The GUI is using canvs2d to paint the UI (at least the 2D part of it). When an image is being used it is being “painted” onto the GUI canvas when needed. A WebGL (or Babylon) texture will probably be counterproductive.
A different approach would be to use the GUI3D elements - Babylon 3D GUI | Babylon.js Documentation. in this case there are meshes generated, and they are using textures.
I did try GUI3D as you suggested, but it is not faced towards camera. The workaround was to lookAt camera position. The problem is that it is not aligned like a 2D image.
If you click on center image (like a hiring units), the queue image with cooldown shows and runs.
I ended up creating the cooldown effect on image by Scalable Vector Graphics (SVG). Seems to be the best solution.