Flake Posted June 27, 2016 Share 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? Quote Link to comment Share on other sites More sharing options...
Nabroski Posted June 27, 2016 Share 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 Flake 1 Quote Link to comment Share on other sites More sharing options...
Flake Posted June 27, 2016 Author Share 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. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted June 27, 2016 Share 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 Quote Link to comment Share on other sites More sharing options...
Flake Posted June 28, 2016 Author Share 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); } Nabroski and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
Mann1ng Posted June 25, 2020 Share Posted June 25, 2020 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 :) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.