1
$\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$
4
$\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$
  • $\begingroup$ what does the shot look like now it's corrected? $\endgroup$ – zeffii Jul 29 '15 at 10:22
  • $\begingroup$ @zeffi I updated my answer $\endgroup$ – Marten Zander Jul 29 '15 at 11:04
  • $\begingroup$ cool , that's much closer. $\endgroup$ – zeffii Jul 29 '15 at 11:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.