WorldWideTelescope/wwt-windows-client

Why the same RGB HEX code result in different color in wwt windows client and other place?

qu123xxx opened this issue · 8 comments

qu123xxx commented

Hi I have encounter a problem when I try to visualize a color through hex code of RGB： #103D25

If I input this code in any color translate website, I can see this color:
image

If I input it in wwt windows client with RGBA hex code FF103D25 I will see this color:
image

I use RGBA hex code is because I can't display any color with RGB hex code.

So I want to ask, what happen to the color and how to display correct color in wwt windows client?

astrojonathan commented

The issue is how applications handle GAMMA. Color representation in 3D Computer graphics vs. web run thru very different pipelines. Web Colors have sRGB color representation that has a GAMMA baked into it. in 3D Graphics with Alpha, Colors are linear so when they are anti-aliased or blended they show up correctly, then the entire output is GAMMA corrected for display. This means that colors can vary. You can try to apply a de-gamma curve to the RGB values and use that hex code if you want an exact visual match.

qu123xxx commented
qu123xxx commented

I have find some rules in adjust GAMMA value in following way~
Based on the progress of use colour.gamma_function(). I assumed that WWT make an exponent arithmetic to the origin_rgb. Such as a^x=b. Thus, in order to get the correct hex value which can show correct color in WWT, I do the following things:

  • Step1

Capture the image with single color which is I want to show from wwt.
wwt_image :
image

  • Step2

Use colour to read it, and get the RGB value.

import colour
import numpy as np
wwt_rgb=colour.read_image('wwt_image.png')
wwt_rgb=list(wwt_rgb[1,3])[0:3]
# RGB from WWT
W_R=wwt_rgb[0]
W_G=wwt_rgb[1]
W_B=wwt_rgb[2]

# Original RGB
O_R=0.16813
O_G=0.45999
O_B=0.55808
  • Step3

Based on the assumption：(Original_RGB)^X=WWT_RGB
X=Log(WWT_RGB)/Log(Original_RGB)
So, X should be get from this code

    X_R=np.log()//np.log()
    X_B=np.log()//np.log()
    X_G=np.log()//np.log()
  • Step4

Once we know the X, we can do some math to process the RGB data to get the input_RGB based on this equation：(a^(1)/x)^x=a

I_R=colour.gamma_function(O_R,exponent=1/X_R)
I_G=colour.gamma_function(O_G,exponent=1/X_G)
I_B=colour.gamma_function(O_B,exponent=1/X_B)
input_RGB=np.array([I_R,I_G,I_B])
input_hex=colour.notation.RGB_to_HEX(input_RGB)

input_hex is #052d44,and we can see the color is almost the same in wwt and browser although there are some differences in RGB data.

RGB(38,117,141) in WWT
image

RGB(42,117,142) in HTML Color RGB
image

But as we can see above, if I want to input a plot to WWT from matplotlib like this.
image

It would too many color to correction, So I wonder if I can know how the wwt 3d graphic engine process the input_RGB color exactly. Maybe makes me easier to finish this kind visualization.

Any help would be greatly appreciated, thank you.

updated 2020/02/25 18:55

I find the GAMMA Correction is a bit difficult.
I use the color-science module in python to adjust the color:

Original color RGB values from matplotlib is [0.16813,0.45999,0.55808], hex code is #2a758e
image

import colour
import numpy as np

RGB_Mpl=np.array([0.16813,0.45999,0.55808])
RGB_WWT=colour.gamma_function(RGB_Mpl,exponent=2.1)
WWT_hex=colour.notation.RGB_to_HEX(RGB_WWT)

WWT_hex is #06314a
image

But they are still have some differences.
How can I get the right RGB values to get exact visual match ? Is there any fixed GAMMA value to adjust it ?

pkgw commented

Because web and 3D color models and processing pipelines are different, it may not be feasible to obtain an exact match across an entire palette of colors. Assuming and un-applying a gamma of 2.1 is probably the best that you're going to be able to do without a putting in a lot more effort.

qu123xxx commented

Thanks for you reply~ I think I have found a way to solve it.
I try to use the screen capture script to get the RGB in a specific place in WWT and adjust the gamma automatically to make the input_data same as the capture_data. I think it would be fast.

qu123xxx commented

image

I have done it.

pkgw commented

@qu123xxx Cool! If you'd like, a post on the WWT Forum documenting what you did would be a great way to preserve the workflow and potentially help out anyone else in the future trying to achieve the same effect.

qu123xxx commented

However, when I try to visualize time series data which about 1301772 rows data in one layer, my computer lags. So I suppose it may need higher hardware configuration to make it more vivid.
It is have some way to speed up it or I have to replace my computer~
This is my hardware configuration：
CPU: i5-3470
Graphic card: GTX 660
RAM: 8Gb
hard disk: 7200 rpm mechanical hard drive
It is quite complex because it need other packages and the operation is vary in different files. I'll try write it down when I finish my work.