extensions

Gradient


Gradient material

Screenshot

You can get the gradient material:

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;

The gradient material can be configured with:

  • topColor and bottomColor are the two colors used in this gradient material
  • offset is a number used to offset the color on the Y axis
  • scale is a number used to scale the color on the Y axis
  • smoothness is a number (between 0 and 10) which can be used to define the speed of the color change along Y axis (1 by default)

Playground example

You can find a live example here: https://www.babylonjs-playground.com/#2IFRKC#22 -