Generate Heat Maps on any Surface with this class for HOOPS Communicator


This class allows the user to apply “heatmap” style surface shading to existing meshes in a model. It is primarily useful for visualizing sensor data on buildings in the context of IoT but there are many other potential use-cases. While the class currently does not use shaders, the implementation is quite fast and shading results can be updated in real time.


var myHeatMapManager = new HeatMapManager(hwv);

Creates a new HeatMapManager object with the webviewer object as its parameter

Adds a new mesh given its nodeid to the HeatMapManager. This function will generate a surface shading mesh from the original mesh but leave the original mesh untouched. In a lot of cases it might be useful to hide the original mesh after adding the mesh to the HeatMapManager.

It is important to note that while any mesh can be used to derive a heatmapmesh from, the source mesh should have a fairly low polygon count (such as walls or floors in a typical building model or the IFCSpace entities in an IFC file). Typical meshes in a CAD model with potentially thousands of individual faces are not good candidate for a heatmap.

myHeatMapManager.setSensorPoint("1", cubenode,new HeatMapPoint(new Communicator.Point3(0,0,0), 1.0));
Associates a new SensorPoint to a HeatMapMesh(). The first parameter is the unique id of the sensor point. The second parameter is the nodeid of the HeatMap mesh the point is associated with. A sensorpoint can be associated to multiple heatmap meshes. The third parameter is the point itself, which consists of its 3D world space coordinate as well as its intensity in the range of 0 to 1.
The second and third parameter can be null. If the second parameter is null the sensor point will be updated with its new value and all associated heatmapmeshes will be recalculated. If the third parameter is null the sensor point will be associated to a new HeatMapMesh but its value will not change.

Below is an example of a complete function that generates a HeatMapMesh for the selected node and creates a sensorpoint in its center:

var r = hwv.selectionManager.getResults();
  for (let i = 0; i < r.length; i++) {
      let nodeid=  r[i].getNodeId();

      var heatMapMesh = await myHeatMapManager.addMesh(nodeid);

      let bounds = await hwv.model.getNodesBounding([nodeid]);
      myHeatMapManager.setSensorPoint("1", nodeid,new HeatMapPoint(, 1.0));
      hwv.model.setNodesVisibility([nodeid], false);
var colormap = [];       
colormap.push(new Communicator.Point3(255, 255, 255));
colormap.push(new Communicator.Point3(0, 0, 0));

Sets a custom colormap. The default colormap interpolates from red to yellow to blue.

Sets the falloffscale for all heatmaps. This value determines how many units it takes for the intensity to go from 1 to 0. Default is 3000.

Sets the opacity of the HeatMapMeshes. Default is 0.5

Sets the texture size for each surface of the heatmapmesh. Default is 32. Higher values will decrease performance.

myHeatMapManager.setOffset(-2, false);
If the second parameter is false, the first value defines by how much heatmap surfaces will be offset from the original mesh along their normal. If the second parameter is true the first value determines the scale factor of the whole HeatMapMesh. If the original mesh the HeatMapMesh is derived from is largely convex applying the scale factor to the whole mesh (usually with a value of 0.99) might work better.

By default all surfaces of a heatmap mesh will be displayed. By setting the type to groundOnly only surfaces that are considered ground planes will be displayed. This will only work for IFC/Revit models (z-up is assumed)

Flushes all heatmapmeshes and resets the HeatMapManager/

Removes a heatMapMesh based on its id.

Below is the main code for the HeatMapManager class. Besides requiring the HOOPS Web Viewer libraries, there are no additional dependencies.

It is important to note that this code is not production-ready and provided “as-is”. It is really meant as a starting point for your own development and as an example for some of the functionality and concepts used in HOOPS Communicator.

If you have any questions or comments or found a bug, please don’t hesitate to post them here in the forum.
HeatMapManager.js (19.2 KB)


I encountered some problems while creating the heatmap.Can you send me a sandbox example or a demo of heatmap?

1 Like

Here is a simple sandbox example of a heatmap applied to an IFCSPACE element:

We are in the process of making some major improvements to the heatmap code so please watch the forum for updates on this class.


Hello, Guido. I heard before that you are in the process of making some major improvements to the heatmap code heat map.
I have encountered some issues using the heat map feature recently.
For example:
1.The position and scale of the heat map generation are incorrect
2.Can the heat map be rendered with different colors according to different regions
So I would like to know about the current improvement situation of heat maps.
3.Some nodes disappear after generating heatmap maps.


unfortunately other things had a higher priority so I did not have to chance to work on it though I’m still planning to get back to it in the next month or two. In the meantime, if you have encountered specific bugs please let me know.

Yes, I have encountered several issues:

1.The position of the heat map deviates from the original node position.As shown in the picture below:
But this only appears on some nodes, may it be related to the mesh data of the nodes? Or is there any other possible reason

2.Can a node have multiple center points when generating a heat map? That is to say, can a node have multiple colored regions.As shown in the picture below:

Of course, this is not a bug, it’s just an idea, because my project proposed such a requirement.