How to realize the effect of heatmap

To achieve the effect of heatmap, see the following.

Hello and welcome to the Babylon community! First things first, it helps us knowing a bit more about your intended application? What kind of data do you want to display? Does it change with time? Is it interactive?

Then, from the picture you’re showing, it looks like this effect has two main parts: the mound shaped meshes and the gradient effect. The mound meshes can be constructed a variety of ways, like mathematically calculating the positions of each of the hot regions and their falloffs, or in a simpler manner, like scaled spheres placed on a ground plane: Simple mound shapes idea | Babylon.js Playground (

The gradient effect can also be done pretty simply too by using our Node Material Editor, here’s a quickly thrown together “heatmap” material: Babylon.js Node Material Editor (

1 Like

Ok did some changes and Babylon.js Node Material Editor ( I think this one looks closer to your pic since it’s smoother :thinking:


Hello just checking in, was your question answered? @nixuhuang