Image rendered from useLoader @react-three/fiber using shaderMaterial has different color from its original color

[reynaldlamury]

Here is my problem, my project is generated from create-react-app, followed by some @react-three/fiber and glsl dependencies, I render simple planeBufferGeometry and for the material I use shaderMaterial

here is code for planeBufferGeometry: (Geometries.jsx)

here is the code for the shaderMaterial: (PlaneShaderMaterial.jsx)

here is the code in App.jsx:

This is the original image:

This is the image after being rendered with useLoader and textured with shaderMaterial:

But when I tried to change the material to MeshBasicMaterial, the color was correct, I think that the problem has something to do with the shaderMaterial not the react-fiber useLoader which preLoads the image

So the rendered image has a little darker color than its original color. I've tried to change the SRGBEncoding but it doesn't work. Any idea how to make it the same color?

[mwmwmw]

It's loading the image with the sRGBencoding try setting it to the default LinearEncoding

Here is an example. Setting it to sRGBencoding produces a darker image. Whereas the default (LinearEncoding) looks right.

https://codesandbox.io/s/le-tigre-linear-encoding-04sxr8?file=/src/index.js

[reynaldlamury]

Thank you for the answer, it works if I replicate the way you structure the code, but the way I do that is a little different as I separate the fragment shader and the vertex shader into defferent file, so I use { extend } from @react-three/fiber library to be able to access that in the Geometry.jsx file, I didn't put it in the same file like you do, it still bothers me because even if I change the encoding to linear, the color is still darker, but thank you for the answer, it gives me another new approach of writing r3f.

here is my opinion regardless of the problem might be: either it has something to do with separating the shader file (not put it in the same file) or it has something to do with the { extend }

[mwmwmw]

If you could put together a codesandbox of your implementation, I'd like to take a look at it.

I did notice you were compiling the shader on your own. I also thought maybe there is some THREE specific shader code that is not injected.

Since you have both the example provided and a local copy of your code, you could run something like Spector to see exactly what Three/R3F is doing.