Materials from Blender to Three.JS: Colors seem to be different 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.



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:



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
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;




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.