Search code examples
three.jspngcolor-spacesrgb

Three.js show sRGB colors wrong

I have problem with PNG sRGB rednering in Three.js. I have this piece of code where I am generation texture from SVG file:

(...) // managing whole SVG data which is long and not important as I will show below
window.temCanvas =  document.createElement('canvas');
temCanvas.width = '2048';
temCanvas.height = '454';
window.temContext = temCanvas.getContext('2d', {colorSpace: "srgb", preserveDrawingBuffer: true});
temContext.clearRect(0, 0, 2048, 454);
temContext.drawImage(newTextureTopSVG, 0,0, 2048, 454);

var newTex1 = temCanvas.toDataURL("image/png"); // here should be info about sRGB?

Texture generated this way is showing different colors. All 0 and 255 values are showing correctly but when it is between i.e. rgb(0,128,255) should look like this:

enter image description here

but it is rendered as:

enter image description here

I saved png generated from SVG and compared it to similar png generated from graphic software, there is difference which I see in Notepad++, correct file contain this: enter image description here file which is rendering badly (after saving from canvas in Firefox) doesn't contain srgb text: enter image description here

I suppose I have to add sRGB info here:

var newTex1 = temCanvas.toDataURL("image/png");

How to do it? But shouldn't it be always sRGB for PNG?

Maybe I am wrong and it is possible to force Three.js to show colors correctly by changing something in Material, Texture etc.?

I am using:

renderer.outputEncoding = sRGBEncoding;

I don't want to provide all data, I will edit this post if needed. It is way too long. Especially managing SVG data.

Solution

  • When using renderer.outputEncoding = sRGBEncoding;, sRGB encoded color textures must be configured like so:

    texture.encoding = sRGBEncoding;

    Otherwise the sRGB workflow is incomplete resulting in wrong colors.