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)