3

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

Marten Zander
  • 1,158
  • 6
  • 20
  • 39
  • this is color management issue look for similar questions here – Chebhou Jul 29 '15 at 07:09
  • @Chebhou do you have a link? – Marten Zander Jul 29 '15 at 07:10
  • sorry no but just a search http://blender.stackexchange.com/search?q=color+management – Chebhou Jul 29 '15 at 07:15
  • @Chebhou hm... I can't find any post on color managment related to three.js – Marten Zander Jul 29 '15 at 07:16
  • not to three.js exactly but with the way blender treat the color if that make sense , see this http://blender.stackexchange.com/questions/28284/colour-shift-when-viewing-render-outside-of-blender – Chebhou Jul 29 '15 at 07:24
  • @Chebhou I don't know dude. I have been messing arround with blender and a linear workflow a few month ago. the result was, blender already comes with a linear workflow (since 2.5 I think). I read the post you linked and tried to recreate his problem. I rendered an image of my scene and saved it as .tif. When I open the TIF in Photoshop, colors are the same as in Blender. Everything looks good so far. – Marten Zander Jul 29 '15 at 07:42
  • you have to wait for the more experienced users – Chebhou Jul 29 '15 at 07:50
  • (notice also the webgl lacks shadows..another hint that this might be more related to lighting) -- I think the rounding of rgb is unlikely to cause dramatic differences – zeffii Jul 29 '15 at 08:14
  • @zeffii Yes I have scene lightning. I am using a sun-light from the left, ambient light and hemi light form the back. Since hemi-light downgrades the performance massivley, I am not using it in webgl. But I replaced the sun with a directional light, also casting shadows and the ambient light of course. Even if I turn of shadows in blender and web gl the difference is clear. Besides that, the ambient color in webgl behaves strangley different from the ambient color in blender – Marten Zander Jul 29 '15 at 08:18
  • @zeffi its almost the same. and if you read my question correctly, you can see if i enter the color via a hexcode, the color is almost correct (besides the difference caused by the lightning) – Marten Zander Jul 29 '15 at 08:20

1 Answers1

6

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.

Marten Zander
  • 1,158
  • 6
  • 20
  • 39