Using shaderMaterial from three.js DREI make the texture way darker than the original

[amo]

Hi,

Everything is in the title. I created a custom glsl shader and even if I dont modify anything, the result is way darker than the original. I am using this:
vec3 texture = texture2D(uTexture, uv).rgb;

to get the texture so perhaps the error is there.

You can see the original picture in /public et nature_morte.jpg.

codesandbox link

Do you have any idea of what is going on ? The code is a bit messy, I can clean it up if necessary.
Perhaps the problem is linked to that : three.js - Washed out color in ShaderMaterial - Stack Overflow

Thanks for your help

[drcmda]

link broken. but shaderMaterial is nothing else than a plain THREE.ShaderMaterial. what you are most likely missing is encoding and tonemapping includes but that’s the case with any custom shader in threejs.

    gl_FragColor = ...
    #include <tonemapping_fragment>
    #include <encodings_fragment>

[amo]

Ok, I’ll check that. I have updated the link if you want to have a look.For sure, I encoded nothing for the moment.

[drcmda]

still getting “Project not found” it’s probably set private. but either way, every color shader in threejs needs encoding and tonemapping fragments.

[amo]

Thank you anyway

[amo]

@drcmda

#include <encodings_fragment>

Does this works better ?
https://codesandbox.io/p/github/amapic/test_glsl/share?file=%2Fpages%2Findex.jsx%3A235%2C37&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clj71pcd6000b356pzhejxmmz%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clj71pcd6000d356pcfzlnn60%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40.70379982182283%252C59.29620017817717%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clj71pcd6000b356pzhejxmmz%2522%253A%257B%2522id%2522%253A%2522clj71pcd6000b356pzhejxmmz%2522%252C%2522activeTabId%2522%253A%2522clj72xfhj00qu356p1vd7y2kd%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clj71pcd6000a356pa3rffpdr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522clj72uy7y00gm356pzwksmbk8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpages%252Findex.jsx%2522%252C%2522id%2522%253A%2522clj72xfhj00qu356p1vd7y2kd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clj71pcd6000d356pcfzlnn60%2522%253A%257B%2522id%2522%253A%2522clj71pcd6000d356pcfzlnn60%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clj71pyuf00b2356pn6curnz4%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522id%2522%253A%2522clj72xno600va356pctwiuaxo%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A3000%252C%2522taskId%2522%253A%2522dev%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clj72xno600va356pctwiuaxo%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[amo]

I add this as you told #include <encodings_pars_fragment>;

I now have the message “this function already has a body” which means the package is already loaded. How not to load it twice ? basic question but I only found c# answer to this.

[drcmda]

it needs to be in the fragment, inside the main function underneath gl_FragColor. the correct includes are

#include <tonemapping_fragment>
#include <encodings_fragment>

not “pars”

it might also be that the texture you’re giving is has a wrong colorSpace. you will have more luck if you search for THREE.ShaderMaterial specifically (stackoverflow etc) because that’s where the issue is. drei/shaderMaterial is just a helper that creates setter/getters, but wouldn’t change how the shader works:

function shaderMaterial(uniforms, vertexShader, fragmentShader) {
  return class extends THREE.ShaderMaterial {
    constructor(parameters = {}) {
      const entries = Object.entries(uniforms)
      super({
        uniforms: entries.reduce((acc, [name, value]) => {
          const uniform = THREE.UniformsUtils.clone({ [name]: { value } })
          return { ...acc, ...uniform }
        }, {}),
        vertexShader,
        fragmentShader,
      })
      entries.forEach(([name]) =>
        Object.defineProperty(this, name, {
          get: () => this.uniforms[name].value,
          set: (v) => (this.uniforms[name].value = v),
        })
      )
      Object.assign(this, parameters)
    }
  }
}

[Lawrence3DPK]

your sandbox is still unavailable but give this a try

shaderMaterial.toneMapped = false
texture.colorSpace = THREE.SRGBColorSpace

[amo]

@Lawrence3DPK

texture.colorSpace = THREE.SRGBColorSpace

I have this error:

I had this:
#include <tonemapping_fragment>;
#include <encodings_fragment>;

and both tone mapped and three.colorSpace

Do you have a link to a similar code which is working ? I also have an alpha map

[Lawrence3DPK]

texture = SRGBToLinear(texture) 

I’m not sure this is valid glsl, you’d probably want to convert your textures color space outside of the shader before passing it in as a uniform…

[amo]

I removed the srgbtolinear:

I now have his error. What to do ?

And it is how I load the image:

Both images are jpg

[Lawrence3DPK]

As it suggests in the console error, probably delete the semicolon after your endif and the second semicolon further on? Glsl has a strict syntax that needs to be followed in order for it to compile…

[amo]

Thank you for so many answer, it works perfectly

[Lawrence3DPK]

Always a pleasure