3
$\begingroup$

I am just working on a bigger WebGL project, using the three.js framework. I am also using Blender as my 3D Software and the latest version of the three.js blender exporter.


While developing I noticed, that colors seem to be slightly different from the colors I picked in Blender.

enter image description here

I started tweaking colors via code and when I told the purple material at the straw for example to be the hexcode from Blender (#9081E7), this is what my webgl result looks like:

enter image description here

I think it's safe to say that the result looks more like the colors from Blender.

Now my question is: why is this happening? And how can I fix it, without telling every single material to have a specific hexcode?

I looked into my straw.json file and noticed that the three.js exporter is exporting colors in rgb values like so:

"colorDiffuse": [0.278894,0.219526,0.799103]

Is it possible that the engine rounds these values what causes the difference in color?

Thanks in advance

$\endgroup$
10
  • $\begingroup$ this is color management issue look for similar questions here $\endgroup$
    – Chebhou
    Commented Jul 29, 2015 at 7:09
  • $\begingroup$ @Chebhou do you have a link? $\endgroup$ Commented Jul 29, 2015 at 7:10
  • $\begingroup$ sorry no but just a search blender.stackexchange.com/search?q=color+management $\endgroup$
    – Chebhou
    Commented Jul 29, 2015 at 7:15
  • $\begingroup$ @Chebhou hm... I can't find any post on color managment related to three.js $\endgroup$ Commented Jul 29, 2015 at 7:16
  • $\begingroup$ not to three.js exactly but with the way blender treat the color if that make sense , see this blender.stackexchange.com/questions/28284/… $\endgroup$
    – Chebhou
    Commented Jul 29, 2015 at 7:24

1 Answer 1

6
$\begingroup$

Okay, I found the solution by myself.

The reason, why the colors are different in webgl is: the exporter makes use of the rgb values that blender provides. After a lot of research I found out, the rgb values in blender are not gamma corrected. The Hex values are gamma corrected.

Thats why the colors were correct, after I applied the corrected hex-code to the materials.

Since that is a very crappy workflow, I talked to a developer from my team and he did some research on the WebGLRenderer.

He found out that you can enable a property called "gammaOutput". If you do that, all colors get gamma corrected by the renderer.


SOLUTION

renderer.gammaOutput = true;

enter image description here

compared to the first image in my question you can see the webgl version isn't that dark and oversaturated anymore. The small difference you can still notice comes form the environment lightning in blender.

$\endgroup$
4
  • $\begingroup$ what does the shot look like now it's corrected? $\endgroup$
    – zeffii
    Commented Jul 29, 2015 at 10:22
  • $\begingroup$ @zeffi I updated my answer $\endgroup$ Commented Jul 29, 2015 at 11:04
  • $\begingroup$ cool , that's much closer. $\endgroup$
    – zeffii
    Commented Jul 29, 2015 at 11:10
  • 1
    $\begingroup$ Thanks! This also helped me. $\endgroup$
    – Foxinni
    Commented Feb 4, 2020 at 6:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .