I was wondering if there’s any way to apply a color tint to Images from babylonjs-gui.
It has a .color and .disabledColor but neither of these seem to have any effect on what is drawn.
Otherwise, is there any other technique with which I could tint the image sprite?
Hello and welcome!
maybe you can play with alpha? (like the buttons for instance)
https://www.babylonjs-playground.com/#XCPP9Y#4
Thanks so much for the quick response!
Unfortunately alpha only sets the opacity, whereas I’m trying to put up a set of procedurally generated UI sprites with different colors (not transparent).
I could render the image assets in different colors for all of them, but it would be a lot lighter on the download size if I do it in grey and tint it. Is there any other method I could use? 
Thanks again in advance!
I think this is the one you are talking about
https://www.babylonjs-playground.com/debug.html#7EPK2H#22
Edit: That function at the top of the second playground will turn the image to greyscale. if you play around with it you can make it to blue, red or green scale or whatever colour.
Ahh-- would there be a way to do this without using a custom shader/render to texture though? It seems like a bit of overkill just to color some sprites
Most babylon objects like Sprites or SolidParticles seem to have a .color property… is there some equivalent of this that I might be missing?
You could render an image to a canvas, then modify the pixels, and then set the _domImage property of the GUI.Image to be the canvas
Pinging @Deltakosh, would it make sense that the .color propery for a Babylon.GUI.Image should change its tint?
@Fernfreak, would you be able to make a simple Playground to reproduce what you want to do via Image.color?
Could be a good idea yeah!
id be interested in that. I might look into it when i get some time 
My apologies! I was on the road for a bit-- here is a playground for it: it’s on line 14.
My objective is simply to tint a GUI Image: most major engines allow one to adjust the .color property on a sprite in order to apply a tint (similar to lighting for a material): for example:
image.color = new BABYLON.Color4(0,0,0,0);
Would this be the correct usage?
After all, if you can do image.alpha = 0 then it would seem consistent that you can do image.color = new BABYLON.Color4(0,0,0,0);
I would like to create a set of multicolored images from a single grayscale object, rather than creating assets in various colors.
I appreciate Deltakosh’s suggestion to use alpha, but here I would need a color tint, rather than alpha.
I appreciate Rah’s CustomFragmentShader, but I think that might be overkill.
I appreciate Gijs’ suggestion of modifying the image pixels via canvas, but I think that might be too slow to change colors frequently
This is the first time I’m posting a playground snippet, so I hope this link works!
https://www.babylonjs-playground.com/#XCPP9Y#1117
you mean something like ? :
To elaborate on to why there might not be something like .alpha but with tinit
changing the alpha of the image is on each colour, so .rgba, so red green blue alpha. Changing the a of each value would just be setting one variable for each colour in a image.
Where as adding a tint you would have to interpolate the grey and then add the colour on top of it. Er something like that.
Heres the thread i made on this a similar topic a while ago:
Is there still no way to tint a GUI image in Babylon js natively? I tried to use Rah’s process texture function but couldn’t get it to work.
Can you share what you tried in the playground ?
Hi, years later from the original question I ran into the same requirement.
I thought there must be a way we could do this without having to apply a shader to the whole scene :\
looking at how the gui works, we are using canvas 2d to draw to a context and the GUI.Image component just draws it’s IImage to the context, simple enough. The image is stored as the domImage property.
So I extended the Image component, added a tint property, and when the tint color is set it does some standard canvas2d stuff to tint the image and then replace the domImage src with the output of the canvas
Tinting creates two new canvas, it’s a pretty heavy job. I wouldn’t try to animate the tint or anything like that.
I think this would need to be rewritten slightly to work natively, right not it relies on document.create(“canvas”) to get a canvas and a canvas2d context to draw
as an aside about using a shader:
Also I’m not sure how this was supposed to be done in a shader at all. I don’t know how this could be done with a shader applied to a single GUI.Image on the AdvancedDynamicTexture since at that point it’s all composited already and we would be tinting the whole UI layer. Image renders / ContextImageSource so it’s not like the item being rendered is a texture either. is there a way to get the engine to create a context image that is a texture that has a shader we can apply to it?
The ADT is a texture, so you can apply everything that applies to regular textures on it, including shaders, but affecting just one part of the ADT would indeed be more complex, you could use something like render the image in a specific color and check for that color in the shader (like this example, changing black text to yellow: Fake caustics with multiple render passes | Babylon.js Playground (babylonjs.com))