Change saturation of texture?

Questions
1

Hi there,

is there a fast way to change the saturation of a Material using a texture?
i would like to have a simple way to make this material to grayscale, but the texture is color:

      <standardMaterial
        key={url}
        name={name}
        zOffset={zOffset}
        alpha={alpha}
        diffuseTexture={new Texture(url)}
      ></standardMaterial>

i looked into node materials but it seems way overkill for “just” a saturation adjustment.

Any help would be great!! Thanks a lot!

2

Adding @brianzinn as it looks to be used in Babylon React.

3

Will setting the color curve work for you?
quizzical-montalcini-zvvndj - CodeSandbox

hi @pcace - good question. If using a color curve will work for you read below. Otherwise If you can provide an imperative example we can maybe work backwards.

I haven’t written <colorCurve> to be understood by the reconciler, but you could add it at runtime to the renderer (automatically working would require change to react-babylonjs or you can add it dynamically yourself) to support. ie:

/* this will not work, but it could be made to work */
<standardMaterial cameraColorCurvesEnabled ...>
   <colorCurve assignTo='cameraColorCurves' globalSaturation={100} />
</standardMaterial>

In the absence of that you will need to use one of the escape hatches to drop to imperative code.

const onMaterialCreated = (material) => {
  const curve = new ColorCurves();
  curve.globalSaturation = -100; // between -100 and +100
  material.cameraColorCurves = curve;
};

return (
  <standardMaterial
    name="mat"
    cameraColorCurvesEnabled
    diffuseColor={Color3.Red()}
    specularColor={Color3.Black()}
    onCreated={onMaterialCreated}
  />
)
4

Very interesting! Thanks a lot!
is there any reason why curve.globalExposure does not show any change?
And: Color curve does apply to every material in the scene right? so this here is all b/w:

would there be any change to make it so that there is only one object listening to the colorcurve?

Thanks a lot again for the sandbox too!

5

I would suggest to start a new question without JSX and then you will get more help from the general community. I don’t know to apply to color curve to a single material, but I was expecting that what I sent you would (although the “global” in the property name is maybe a hint!!).

Here is a repro playground to start a new thread:
material color curves | Babylon.js Playground (babylonjs.com)

Also, here is an example of color grading a texture that is declarative - when you find something that works let me know and we can look at your solution. It would make a good example page.
brianzinn.github.io/react-babylonjs/examples/post-process/image/

6

You can isolate the behavior to one material by not sharing the image processing configuration with the rest of the scene by creating a new one just for one material like the ground here: https://playground.babylonjs.com/#599J9G#1

2 Likes