I have some images of knobs with shadows rendered out of Blender.
When I use Blender’s compositor (Alpha Over Node - Blender 4.2 Manual) or GIMP (each knob on a different layer with Normal blend mode) to overlay the knobs on the background, the result looks quite different compared to drawing the backgrond and knob images in JUCE.
The JUCE version has much darker shadows cast by the knobs. Seems like the alpha channel data is somehow corrupted by JUCE.
This image shows blender on the left, GIMP on the right and JUCE in the middle.
Is there a way to make JUCE behave closer to Blender’s Alpha Over Node? I don’t see any configuration options on the functions I use to load the image or draw it to the screen.
Could this be related to Blender saving the knobs using premultiplied alpha? Is it possible to export the knobs without premultiplied alpha?
Thanks, I saw this come up in some blender forums too. I did another export with straight alpha and unfortunately it makes no difference. In both versions of the knob images, the shadow part has RGB value zero. It only made a minor difference to the edge of the knob where it’s partially transparent.
Personally I’d probably render the shadows as part of the background rather than as part of the knob.
I want to avoid that because it wouldn’t look right with switches that change shape when they are toggled. e.g. up/down toggle switches. Even with the knobs there are a few pixel gaps between the ridges where the shadow is visible. Although I could work around that by rendering the shadows using a simplified stand-in model for the knobs.
I tried rendering just one knob image over a white background and that looks substantially different between GIMP and JUCE too. I’ll try with some simpler alpha gradients and see if I can reproduce this. It seems like a bug for the rendering to be so different from GIMP.
I’ve done some more testing with a simple gradient.
Using GIMP, I created a black image with a 0 to 100% alpha gradient horizontally. If I put that on top of a white background in GIMP, the centre column is much brighter (bcbcbc) in GIMP when compared to the same image rendered over a white background using JUCE or Flutter or using Firefox (7f7f7f). Since I created a linear gradient, the result from GIMP doesn’t make sense here, and the other tools seem correct.
I also noticed that GIMP doesn’t import this gamma test image correctly, and if the image is re-exported from GIMP, then it doesn’t work in Firefox anymore either.
I think there is something weird going on with the gamma on the alpha channel. If I add a gamma of 0.45 to the alpha channel inside the blender compositor, it looks much closer to what JUCE and Flutter are rendering. I will probably need to bake the inverse of this gamma into the PNG file so that it is displayed correctly by JUCE.
I got an acceptable result using “magick $file -channel A -gamma 0.45 +channel $file” to adjust the alpha channel gamma. I guess GIMP and JUCE/Flutter handle the alpha channel data differently for my images.
