Mapped texture color is slightly different with original image

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?


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!

1 Like

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… :frowning:

seems like it’s most important. use a canvas texture.

1 Like
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

1 Like

Thanks for suggestion!

I’ll also apply filter too :slight_smile:

1 Like

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.