Flake 6 Report post Posted June 27, 2016 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
Nabroski 250 Report post Posted June 27, 2016 Hello i think what you are asking for is herehttps://doc.babylonjs.com/tutorials/How_to_use_PostProcesses or add some colors via lightshttps://doc.babylonjs.com/tutorials/Lights simpel and effective also:https://doc.babylonjs.com/extensions/Sky give this a tryhttp://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 herehttp://doc.babylonjs.com/playground Good Luck 1 Flake reacted to this Share this post Link to post Share on other sites
Flake 6 Report post Posted June 27, 2016 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
Nabroski 250 Report post Posted June 27, 2016 (edited) 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 instagramhttp://babylonjs-playground.com/#1ZFUUL#6 Have Fun Best Edited June 28, 2016 by Nabroski changed playground:edit some notes:more notes Share this post Link to post Share on other sites
Flake 6 Report post Posted June 28, 2016 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); } 2 Nabroski and Deltakosh reacted to this Share this post Link to post Share on other sites