Inconsistency between <meshBasicMaterial> and MeshBasicMaterial textures

[funwithtriangles]

Textures are washed out when using MeshBasicMaterial:
https://codesandbox.io/s/r3f-issue-textures-bad-wzyk1?file=/src/App.js

They look as expected with <meshBasicMaterial>:
https://codesandbox.io/s/r3f-issue-textures-erq2h?file=/src/App.js

Curiously, everything is fine when both techniques are used in the same scene:
https://codesandbox.io/s/r3f-issue-textures-both-irkcb?file=/src/App.js

Possibly related:
#344
#839

Right now the workaround is to use <meshBasicMaterial>, however this means I'm not able to memoize my materials.

[drcmda]

see: #1129

color management means that all textures, all colors systemwide have correct gamma. but it won't mutate externals. if you use external materials you loose that advantage. you'd have to color correct yourself, just like in plain threejs, calling color.linearToGamma or something like that. or switch colormanagement off altogether but you will not have good looking scenes with that.

imo this makes no sense and is very wasteful, youre creating a new material on every render. the render function shouldn't have side-effects, no exception.

function Plane(props) {
  const texture = useTexture(texUrl)
  const mat = new MeshBasicMaterial({ map: texture })
  return <mesh {...props} geometry={geom} material={mat} />
}

instead:

function Plane(props) {
  const texture = useTexture(texUrl)
  return (
    <mesh {...props} geometry={geom} dispose={null}>
      <meshBasicMaterial map={texture} />
    </mesh>
  )
}

im not sure why you think this isn't managed. or what you mean by saying you want to memoize.

btw, if you're dealing with cached assets (useLoader/useTexture/etc) better put dispose={null} somewhere at the top, that will prevent assets from being disposed of on unmount. in your example, if you'd switch routes from that and then come back, the texture is gone.

[funwithtriangles]

Thanks for getting back to me. I think my example wasn't too helpful, a bit too simple and with the mistakes you've pointed out.

I'm trying to create multiple meshes with the same material/texture, so I'd rather not create a new material for every mesh. Making use of <meshBasicMaterial> seems to create a new material every time. Is there some other way I can memoize the material?

https://codesandbox.io/s/r3f-issue-textures-multiple-materials-cnyfw?file=/src/App.js:0-885

Using a single material externally is more efficient but I'm still having colour issues. I've tried convertLinearToGamma and convertLinearToSRGB but neither seem to do this job:

https://codesandbox.io/s/r3f-issue-textures-single-material-s5ore?file=/src/App.js:533-552

[drcmda]

right, so, if you want color management for your globals, then colors need color.convertSRGBToLinear() and textures texture.encoding = THREE.sRGBEncoding. a full explanation is on don mccurdy's website: https://www.donmccurdy.com/2020/06/17/color-management-in-threejs otherwise <Canvas colorManagement={false} and then it won't touch colors and encodings. but these two is all that r3f does (to its managed graph).

[funwithtriangles]

Here's how to counteract the color management:

texture.encoding = sRGBEncoding
material.toneMapped = false

https://codesandbox.io/s/r3f-issue-textures-single-material-s5ore?file=/src/App.js:486-518