extensions

Gradient


Gradient material

Screenshot

Playground example - Not yet deployed

Gradient material can be found here: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/materialsLibrary/babylon.gradientMaterial.js

Using the gradient material

The material creates a smooth gradient with two colors:

var sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 2, scene);

var gradientMaterial = new BABYLON.GradientMaterial("grad", scene);
gradientMaterial.topColor = BABYLON.Color3.Red(); // Set the gradient top color
gradientMaterial.bottomColor = BABYLON.Color3.Blue(); // Set the gradient bottom color
gradientMaterial.offset = 0.25;

sphere.material = gradientMaterial;

topColor and bottomColor are the two colors used in this gradient material. offset is a number between -1 and 1 that represent the amount of each color.