Deform a grid with datas (heatmap visualisation)

Questions
1

Hello, I’m new here, new to threejs but quite advanced in 3d knowledge or vanilla JS. I’m currently trying to do spatial data visualization by creating a dynamic 3D graph (that varies with datas). I already did this in 2D with the d3js library, but is it possible in 3D with threejs?

I’ve seen 3d heatmap projects made with the app Unity like here, but never with Threejs.

My challenge is to create a grid that deforms on Y and becomes more colored according to the more or less long temporal presence of an object above it, as a 3d heatmap. I made a small image to be more explicit. In my example, the longer the sphere has been in one place on the surface, the higher the grid.
The idea would then be to be able to click on different buttons to display different visualizations.

Do I have a chance of achieving my goals with Threejs? And if yes, what would be the most efficient method in your opinion? Could I create an ‘on the fly’ heightmap image (black/white jpg) with the datas and apply this height with a dynamic heightmap shader? Or is it better to deform a grid point by point by calculating each height for performances ?

Thank you for your help and advices !

heat
heat1920×1417 122 KB

2

I would combine these 3 examples (first one is optional)

1 Like
3

For a heatmap texture I would give a try to this approach (with some modifications, of course): three.js examples

1 Like
4

Thank you for these links ! I will try to combine these technics. It sounds promising.

@prisoner849 : If I understood well you imagine ‘to print’ the shadow on the base texture, and then inverse the texture ?

However I have two fears :

The first one is I’d like to avoid playing the animation and show all the movements of my sphere to draw the base texture. My goal is to show a 3D visualization of a movement in a space once it is done, not to show all the movements ‘in live’. With dynamic, I meant dynamic datas that could change to show different 3d visualizations. But maybe, I could play it very fast just to generate the map and hide the sphere at the same time ?

My second fear is there are a lot of datas. (Imagine 1 ou 2 hours of motion capture and you want to show a visual statistic of what happened…)

:thinking: I have to try… :sweat_smile:

5

VideoTexture with heatmap is also an option, I think.