Jump to content

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


Link to comment
Share on other sites


it should normally be pretty reusable :-)

You can use includes in your shader: 

// Include the uniform definition

// include the functions

  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.
public cameraColorCurves: ColorCurves = null;

and use the helper method to define the required uniforms:


and bind them:

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

This should be it :-) 

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


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


Link to comment
Share on other sites

  • 2 weeks later...

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.

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.


  • Recently Browsing   0 members

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