Globally adjusting Hue/Saturation

[Flake]

Hey everyone,

I'm trying to 'color-correct' my scene, and want to adjust the global Hue and Saturation. I came across ColorCurves, but am not sure how to use them.

Quote

The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT).

Does this mean I can apply them to the scene, or is this the wrong tool for what I'm trying to accomplish?

[Nabroski]

Hello

i think what you are asking for is here
https://doc.babylonjs.com/tutorials/How_to_use_PostProcesses

or add some colors via lights
https://doc.babylonjs.com/tutorials/Lights

simpel and effective

also:
https://doc.babylonjs.com/extensions/Sky

give this a try
http://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master#camera-controls-color-grading-and-color-curves

if you not sure how to code something look up here
http://doc.babylonjs.com/playground

Good Luck

 

[Flake]

Heya Nabroski, thanks for the multifaceted response!

Unfortunalty lights don't give me the amount of controll I need ( I don't think I can unsaturate mesh with a light) and color curves only apear to work with PBRMaterials

I'll look into the Post Processing and post the any results.

 

[Nabroski]

Hello

I dont know if you are into photography, since 1851 the most imported thing is light.
Let there be light;...and so on

Long story short:

Created a litte playground for you also add a camera filter like a pro photographer 
you can apply textures to it or colors like on instagram
http://babylonjs-playground.com/#1ZFUUL#6

Have Fun
Best

Edited June 28, 2016 by Nabroski
changed playground:edit some notes:more notes

[Flake]

The cool but also slightly intimidating thing about programming is, that there are so many different approaches one can take to get to the goal.

Thanks again Nabroski for the different starting points! In the end I created a shader that mimics Photoshop's Hue, Contrast, Brightness and Saturation settings. It works just the way I wanted.

Most of the code was ported from Andrey Postelzhuk's Unity shader.

// create the material with default/neutral values
// this is then applied to you mesh
var material = new BABYLON.ShaderMaterial("colorMatchMat", scene, "./assets/shaders/colorMatch",
  {
    attributes: ["position", "uv"],
    uniforms: ["worldViewProjection", "hue"]
  });

material.setTexture("textureSampler", new BABYLON.Texture("./assets/app/face.jpg", scene));
material.setFloat("hue", 0.0);
material.setFloat("contrast", 0.5);
material.setFloat("brightness", 0.5);
material.setFloat("saturation", 1.0);

// Vertex Shader (nothing happens here)

precision highp float;
attribute vec3 position;
attribute vec2 uv;
uniform mat4 worldViewProjection;
varying vec2 vUV;

void main(void) {
   gl_Position = worldViewProjection * vec4(position, 1.0);
   vUV = uv;
}

precision highp float;
varying vec2 vUV;

uniform sampler2D textureSampler;
uniform float hue;
uniform float contrast;
uniform float brightness;
uniform float saturation;

vec3 applyHue(vec3 aColor, float aHue)
{
  float angle = radians(aHue);
  float cosAngle = cos(angle);
  vec3 k = vec3(0.57735, 0.57735, 0.57735);

  return aColor * cosAngle + cross(k, aColor) * sin(angle) + k * dot(k, aColor) * (1.0 - cosAngle);
}

vec3 saturationLerp(float from, vec3 col, float t) 
{
  float r = (from + t * (col[0] - from));
  float g = (from + t * (col[1] - from));
  float b = (from + t * (col[2] - from));
  return vec3(r, g, b);
}

vec4 applyHSBEffect(vec3 startColor)
{
  float _Hue = hue * 360.0;
  float _Contrast = contrast * 2.0;
  float _Brightness = brightness * 2.0 - 1.0;
  float _Saturation = saturation;
 
  vec4 outputColor = vec4(startColor, 1.0);
  outputColor.rgb = applyHue(outputColor.rgb, _Hue);
  outputColor.rgb = (outputColor.rgb - 0.5) * (_Contrast) + 0.5;
  outputColor.rgb = outputColor.rgb + _Brightness;  

  float intensity = dot(outputColor.rgb, vec3(0.299, 0.587, 0.114) );
  outputColor.rgb = saturationLerp(intensity, outputColor.rgb, _Saturation);
  
  return outputColor;
}

void main(void) {
  vec3 textureColor = texture2D(textureSampler, vUV).rgb;
  gl_FragColor = applyHSBEffect(textureColor);
}

 

[Mann1ng]

Hi,

This can be done using Babylon without any additional custom colorization code.

Example: Here I've updated saturation using  defaultPipeline.imageProcessing.colorCurvesEnabled

https://www.babylonjs-playground.com/#ECI2Q0#120

:)