ofImage draw() results in slightly different colors (OF 0.11.2 OSX) [color profile]

Hi,

Sorry if this is a known issue, but I couldn’t find the solution for it.

When I draw an ofImage (PNG with transparency) I don’t get the exact same colors as I see on macOS Preview, google Chrome, Firefox, Photoshop, etc.

The difference is really small but can be noticed here:

Screenshot 2021-12-29 at 18.57.41 copy

The image on OF is warmer. It seems to have more red. I would like to be able to draw an image as it really is.

The code is the simplest possible:

main.cpp:

#include "ofMain.h"
#include "ofApp.h"

int main( ){

ofSetupOpenGL(1024,768, OF_WINDOW); // <-------- setup the GL context

// this kicks off the running of my app
// can be OF_WINDOW or OF_FULLSCREEN
// pass in width and height too:
ofRunApp( new ofApp());
}

ofApp.h:

#pragma once
#include "ofMain.h"

class ofApp : public ofBaseApp
{
public:
    ofImage img;
};

ofApp.cpp

#include "ofApp.h"

void ofApp::setup()
{
    img.load("a.png");
    ofBackground(255);
}

void ofApp::update()
{
}

void ofApp::draw()
{
    ofSetColor(255, 255, 255);
    ofEnableAlphaBlending();
    img.draw(ofGetWidth() / 2 - img.getWidth() / 2, 100);
}

Here’s an image you can use to test the difference:
a
It has these specs:

I initially thought it could be because the image has transparency. I exported the same image in JPG and the problem persists. I have then been suspecting about the color profiles. I tried several exporting settings from Photoshop but nothing solved the issue. I noticed that the image is drawn with the same colors when the color profile is “Colour LCD” (screen shots from my MacBook result on that profile), but whatever other color profile results in an image with different colors on OF. The problem is that I couldn’t find a way of exporting from photoshop with “Colour LCD”.

Does anyone know if it’s possible to draw a PNG with transparency without tinting its colors in OF?

Specs:

  • MacOs Big Sur 11.6
  • of_v0.11.2_osx_release

What I’ve tried:

  • Exported from Photoshop in several different settings. Both PNG and JPG, with and without the “Converted to sRGB” and “Embed Color Profile” options marked).
  • roymacdonald commented here that it might be because Preview uses a gray background. I changed it to white and the difference is still there. All other softwares show exactly the same colors. The problem happens only in OF.

Thanks a lot in advance!!

I’ve looked into this at some point because I had issues matching very specific colors for project. I don’t think OF is tinting anything but rather some color space correction is maybe not being applied to OF vs other apps? I think this may be relevant:

I also wonder if there’s any flag in glfw that can help

GLFW_SRGB_CAPABLE
https://www.glfw.org/docs/3.3/window_guide.html

1 Like

just a quick note that I tried unsuccessfully the following

in ofMain

#include "GLFW/glfw3.h"
...
// before allocating a window 
glfwWindowHint(GLFW_SRGB_CAPABLE, GL_TRUE);
// and in ofApp.cpp 
glEnable(GL_FRAMEBUFFER_SRGB_EXT)

it didn’t get closer, but it did change the look.
perhaps there’s something in this space (looking at color spaces) that can help ?

my guess is it may be something related to color space, either in freeImage or in the OF window. One thing I’ve found generally helpful is to try to make an image with a solid color, and then use the digital color meter where you can experiment with how the values are displayed,

I’m not super knowledgeable about color spaces, but my guess is that if you can figure out what can convert one image to another (linear->sRGB, etc) you may be able to tell what’s going on.

2 Likes

also, maybe helpful ?

https://learnopengl.com/Advanced-Lighting/Gamma-Correction

1 Like

I think that the problem might be because OF draws the image as is, with no color proofing, while the other softwares do. You might want totake a look at this

1 Like

Hey Zach! Thank you so much for the quick reply!

Hum… this seems to be more complicated than I expected… I truly appreciate all the links and that you actually tested yourself, but I feel a bit lost on that topic to be honest… I’ll try to look into that again when I have more time, right now I’m not sure what to do…

What was your solution for the project where you had the same issue? Did you move to Windows/Linux when running/exporting the final version?

From the link you sent, it seems it’s a problem only on macOS.

Thanks again! I’m a big fan of your work!

IIRC my problem was slightly different, but somehow related I think in that I was getting slightly different results when I would read an fbo to pixel and save out to image vs taking a screenshot, so I spent some time kind of banging my head on this issue of how pixels are “presented” and color spaces as I need to match a very specific set of colors. I honestly don’t remember much about it but I think I solved it via using screenshots vs saving images out, but I think my problem was sort of the reverse of your problem in a way. it looked right on screen but not saved. I’m sorry I don’t have a more technical description of the problem… I do think it was related…

1 Like

Hum I understand… I think it must be something with the color space as well because I tested the image with the color profile “Colour LCD” and it displayed the exact same colors on OF. The problem happens when we have some other color profile (I tested several. Exporting from Photoshop. None worked well).

I don’t really understand how to play with color spaces. I couldn’t find a way of exporting to “Colour LCD”. I think that would probably be enough for my specific case. I’ll try to look into that when I have more time and post here if I find any solution…

I wonder if this is helpful

https://developer.apple.com/library/archive/technotes/tn2313/_index.html#//apple_ref/doc/uid/DTS40014694-CH1-NONCOLORMANAGEDFRAMEWORKS-OPENGL___EXPLICIT_COLOR_MANAGEMENT_EXAMPLE

also this kind of reads like a poem

1 Like

ok I think I (might?) have a solution!

can you try this in main.cpp

#include "ofMain.h"
#include "ofApp.h"
#include "ofAppGLFWWindow.h"
#include "GLFW/glfw3.h"
#include <Cocoa/Cocoa.h>

//========================================================================
int main( ){
    
    //glfwWindowHint(GLFW_SRGB_CAPABLE, GL_TRUE);
    
	ofSetupOpenGL(1024,768,OF_WINDOW);			// <-------- setup the GL context

    NSWindow * appWindow = (NSWindow *)ofGetCocoaWindow();
    [appWindow setColorSpace:[NSColorSpace sRGBColorSpace]];

	ofRunApp(new ofApp());

}

you will need to change the file type of main.cpp to objective c++ source using the inspector, on the right side panel

Screen Shot 2022-01-01 at 12.44.23 PM

this seems to fix it so that OF looks like chrome. at least the differences I see seem similar to the differences you documented above

(without and with the change)


the fix comes from this, if helpful

2 Likes

Zach! Haha you truly still adopt people!

It really worked here as well!

It worked regardless of changing the file type to objective c++ (I’m using Visual Studio Code).

That’s amazing. Thank you so much! I really appreciate that you spent your time looking into it. Now we know how to set different color spaces on OF :slight_smile:

1 Like