Flake

Globally adjusting Hue/Saturation

Recommended Posts

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?

Share this post


Link to post
Share on other sites

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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 by Nabroski
changed playground:edit some notes:more notes

Share this post


Link to post
Share on other sites

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);
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.