Flake Posted July 7, 2016 Share Posted July 7, 2016 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 Quote Link to comment Share on other sites More sharing options...
Sebavan Posted July 7, 2016 Share Posted July 7, 2016 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 :-) Quote Link to comment Share on other sites More sharing options...
Flake Posted July 8, 2016 Author Share Posted July 8, 2016 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.. Quote Link to comment Share on other sites More sharing options...
Flake Posted July 8, 2016 Author Share Posted July 8, 2016 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 Quote Link to comment Share on other sites More sharing options...
Sebavan Posted July 8, 2016 Share Posted July 8, 2016 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 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted July 8, 2016 Share Posted July 8, 2016 Done! Quote Link to comment Share on other sites More sharing options...
Flake Posted July 18, 2016 Author Share Posted July 18, 2016 Thanks @Sebavan & @Deltakosh , I'll think I'll use the official version and put my Frankenstein material to rest. Sebavan and GameMonetize 2 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.