Jump to content

Globally adjusting Hue/Saturation


Flake
 Share

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?

Link to comment
Share on other sites

Link to comment
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.

 

Link to comment
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
Link to comment
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);
}

 

Link to comment
Share on other sites

  • 3 years later...

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

:)

 

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...