Sign in to follow this  
Flake

Binding a ColorCurve to a Material/Shader

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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 :-) 

Share this post


Link to post
Share on other sites

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.. 

 

Share this post


Link to post
Share on other sites

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 :D

Thanks again Sebavan

ShaderMatWithCC.js

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.