I want to map artwork image, but mapped image(texture)'s color is slightly different with original image.
Setting is
Renderer.outputEncoding = LinearEncoding
Mesh(PlaneBufferGeometry, MeshBasicMaterial)
Texture.encoding = LinearEncoding
Texture.anisotropy = renderer.capabilities.getMaxAnisotropy()
How can I approach this color correction problem?
Thanks.
Left: render on canvas
Right: load image file on browser
Hey, as far as I am aware the best way to get exact colors is to use a canvas texture (it will be correct regardless of the light I think) I dunno if this is the best advice for what you’re after though… I guess otherwise you could play with the Texture.encoding (maybe not using linear encoding but srgb encoding instead for example) and your lighting.
Thanks for advice.
I tried to change renderer.outputEncoding & texture.encoding,
but it doesn’t seem to help get correct color.
I should keep on trying to find the way.
Sorry that didn’t work for you. As I said a canvas texture will do the trick for sure. Also here’s a great discussion on the entire topic of color / color management: Three color problem - #7 by drcmda best of luck!
Where is difference. Cant see.
Hope this image help for you.
Don’t care about the resolution.
Left: threejs canvas
Right: original image in os viewer
are you using any ambient lighting / lights in general or an hdri map?
I added 1 ambient light before, but I use MeshBasicMaterial for texture.
And I don’t want to get effect by light(MeshBasicMaterial isn’t affected by light anyway), just for test circumstance, I remove all light and run test.
ah I see. have you tried setting toneMapped to false on the material?
I overwrite renderer.toneMapping to NoToneMapping and set material.toneMapped to false but still color is different… 
seems like it’s most important. use a canvas texture.
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
Thanks @amvdxc.
Solution is using canvas texture!
Also it seems encoding(Linear | sRGB) doesn’t make difference…
Using canvas texture makes much better result but I still sense little bit of diffrence.
Someone who has suggestion or recommendation for development, please let me know.
(both renderer output & texture)
Left: sRGB
Center: Linear
Right: original image
Thanks for suggestion!
I’ll also apply filter too 
Try OrthographicCamera
The difference here is subtle enough that this could be related to color space of the original image. For example, if the original uses Display P3 or Adobe RGB, the browser must approximate that as sRGB. To improve that I think you would need to export an sRGB (Rec.709) version of the image instead.
