GradientMaterial not working with ground mesh

As title says, please check this snippet: https://playground.babylonjs.com/#R37BSF#1

The texture and mesh are declared/defined at lines 38-51

How can I solve this problem?

Welcome to the forums!

It looks like the Ground mesh is the culprit. Changing the mesh type to a Plane gives the following result:
https://playground.babylonjs.com/#R37BSF#2

That’s because CreateGround creates a plane in the Y plane, so Y = constant value for all vertices.

GradientMaterial is using the y world coordinate of the vertices to draw the gradient. But as in this case there’s no variation in the y values, there’s no variation in the gradient colors.

As @tbunker suggested, you should use CreatePlane instead, which is creating a plane in X/Y and have Z = constant value.