Binding a ColorCurve to a Material/Shader

[Flake]

Me again.. still messing around with colour correction.

Is it possible to bind a Colour Curve to a non-PBM Material? When I attempt the following I get errors:

let mat = new BABYLON.ShaderMaterial("mat", scene, "./assets/shaders/blub", 
{
attributes: ["position", "uv"],
uniforms: ["worldViewProjection", "globalScale", "globalOffset", "vCameraColorCurvePositive", "vCameraColorCurveNeutral", "vCameraColorCurveNegative"],
needAlphaBlending: true
});

var curve = new BABYLON.ColorCurves();
curve.GlobalHue = 200;
curve.GlobalDensity = 100;
BABYLON.ColorCurves.Bind(curve, mat._effect); 
// throws Uncaught TypeError: Cannot read property 'setFloat4' of undefined

 

[Sebavan]

Hello,

it should normally be pretty reusable :-)

You can use includes in your shader: 

// Include the uniform definition
#include<colorCurvesDefinition>

// include the functions
#include<colorCurves>

  and at the end of your shader:

// Apply the curves
finalColor.rgb = applyColorCurves(finalColor.rgb);

Then, in your material code you can add a new property for it:

/**
 * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT). 
 * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
 * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image; 
 * corresponding to low luminance, medium luminance, and high luminance areas respectively.
 */
@serializeAsColorCurves()
public cameraColorCurves: ColorCurves = null;

and use the helper method to define the required uniforms:

ColorCurves.PrepareUniforms(uniforms); 

and bind them:

if (this.cameraColorCurves) {
    ColorCurves.Bind(this.cameraColorCurves, this._effect);
}

This should be it :-) 

[Flake]

Thank you for you're detailed explanation Sebavan

9 hours ago, Sebavan said:

Then, in your material code you can add a new property for it:

hehe.. I have no 'material code'. I'm using a vanilla BABYLON.ShaderMaterial. I guess I'll try grab the class off github and add a colour curve into it.. 

 

[Flake]

It worked ^^

I'm not particularly proud of, nor do I fully understand it.. By I copied the relevant ColourCurve code lines out of PBRMaterial and spliced them into the ShaderMaterial. The result is functional, but not elegant. 

I'll add the .js file. Maybe It's a useful starting point for someone or it can be used of an example of how NOT to do it

Thanks again Sebavan

ShaderMatWithCC.js

[Sebavan]

Hi we are on the point to add it in the standard material if that can helps:

https://github.com/BabylonJS/Babylon.js/pull/1253

BR,

[GameMonetize]

Done!

[Flake]

Thanks @Sebavan  & @Deltakosh , I'll think I'll use the official version and put my Frankenstein material to rest.