Wrong color space in the Image abstraction?

[GuillaumeAmat]

Describe the bug

I'm trying to use the Image abstraction, in order to load images on planes, but the loaded images are rendered more bright than they really are.

Even the official documentation has the same display issue:

Original asset	Documentation display

Why am I considering the color space as root cause?

I've seen that the Image component has a color prop, which has white as default value. This color seems to be used as multiplied color, over the loaded asset.

When tweaking it to another color, it applies it to the assets in the canvas.

I looked for issues and discussions, and found a similar behavior here: https://github.com/orgs/Tresjs/discussions/739

The contributor solved his issue by applying the SRGBColorSpace color space (though, their issue is not related to Image, but to useTexture).

Reproduction

https://cientos.tresjs.org/guide/abstractions/image.html

Steps to reproduce

Go to the official documentation, or use the given snippet:

<script setup lang="ts">
import { NoToneMapping, SRGBColorSpace } from 'three'
import { TresCanvas } from '@tresjs/core'
import { Image, OrbitControls } from '@tresjs/cientos'

const gl = {
  clearColor: '#82DBC5',
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const URL_STUB = 'https://upload.wikimedia.org/wikipedia/commons/'

const URLS = [
  'f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG',
  '3/36/Cyanistes_caeruleus_Oulu_20130323.JPG',
  '2/2e/Cyanistes_caeruleus_Oulu_20170507_02.jpg',
].map(url => URL_STUB + url)
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[0, 0, 2]" />
    <OrbitControls />
    <Image :url="URLS[0]" :radius="0.2" :transparent="true" :position="[-1.5, 0, -1]" />
    <Image :url="URLS[1]" :radius="0.2" :transparent="true" />
    <Image :url="URLS[2]" :radius="0.2" :transparent="true" :position="[1.5, 0, -1]" />
  </TresCanvas>
</template>

System Info

Used Package Manager

yarn

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[GuillaumeAmat]

Hey @alvarosabu, I've looked again at this issue, and I found the culprit 🙂

Disclaimer for potential readers of this issue

If you want to make the most out of TresJS, learn the Three.js basics. A few YouTube videos, will allow you to understand the features, their rationale, and their quirks.

That's what I did the other day, by the way, and then it clicked: My first investigation was right (in the issue description above), but I was blocked because I didn't understand the basics of Three.js.

The root cause in simple words

1. The TresCanvas component is set to a specific color space (outputColorSpace = SRGBColorSpace).
2. BUT (!), in a Three.js scene, every single texture is also set to a specific color space. And by default, it's not SRGBColorSpace.
3. Eventually, that's why there is a color mismatch when a picture is rendered on a plane via the Image component. It creates a plane, and put the picture on it via a texture without specifying any color space.

Evidence

Here is the portion of code where the Image component handles the texture and url props, and decide whether it should consume one or the other:

cientos/src/core/abstractions/Image/component.vue

Lines 84 to 91 in 26a8e28

	watchEffect(() => {
	if (props.texture) {
	texture.value = props.texture
	}
	else {
	useTexture([props.url!]).then(t => texture.value = t)
	}
	})

When we provide a texture, well, that's our responsibility to set a color space, given that we know enough of Three.js to do so 😛

But if we provide a url, the Image component converts it into a texture via the useTexture composable, and omits to set a color space.

Conclusion

The documentation display can be easily fixed by using the texture prop, instead of the url one. Like so (simplified):

import { useTexture } from '@tresjs/core';
import { SRGBColorSpace } from 'three';

const texture = await useTexture([URLS[0]);
texture.colorSpace = SRGBColorSpace;

And then:

<Image :texture="texture" :radius="0.2" :transparent="true" :position="[-1.5, 0, -1]" />

Though, I think the url prop is kind of useless as is... Unless I still don't understand something, pictures' colors will always look odd if we don't have a way of passing a color space in props as well. WDYT?