Heatmap with babylon.js

[degressor]

Hi, I'm new to babylon.js and would like to make a surface with 2D heatmap and 3d bar charts on the heatmap. I already got good example for the 3d bar chart, but struggling with the heat map.  I think I would get it, but need some help - how to start?  Draw 2D on the surface? On the ground? 

[Wingnut]

Hiya degressor!  Interesting project!  I wish we had a few more details.  Are you doing land?  (you mentioned 'ground').

Anyway, here is #1 demo image... and #2 demo image found via Google image search for 3D heat map.

In both of these, there is no "drawing" of a classic 2D heat map. No fancy color-dithered texture/material.  The color dither (gentle transition across color-change edges)... is done by placing the bars close-together.  Color = heat-level, like normal, but you would be "painting-with-colored-bars" and not with BabylonJS DynamicTexture (a texture made-from a context2d canvas). 

This method would be fairly easy to do.  It is the gentle color changes from 3Dbar-to-3Dbar... that makes it appear color-dithered. 

No 2D drawing at all.  Only various colored 3D bars... whose height AND color... are determined by the heat values.  Since heat values rarely change large amounts across short distances, the colors automatically dither (change gently) across adjacent bars.  It self-dithers, due-to heat map data being "bound" to color spectrum.

I mentioned DynamicTextures.  This is how to have a canvas "context2d" (like SVG... paint-on-canvas) that you can use as a texture.  You could use your heat data (gotten from a json file/data?) to draw-onto a dynamicTexture's context2d canvas... and then use that dynamicTexture as a Babylon.standardMaterial.diffuseTexture.  That will make a 2D heat map, but that method is not used in either of the demos I reffed/linked.

AND... you could use both methods.  Use a 2D dynamic texture to make a 2D heat map for the bottom texture, and then STILL do color-coded (and height-coded) 3D bars atop that.  It might look "visually-busy", though.  Possibly too many colors... difficult to determine values, visually.  Sometimes, when visualizing data, it is best to keep it simple and clean.  But you can offer users MANY visualization options to choose-from.  For this, it is good to understand "overlaying".  Some examples might be... turn on/off 3D bars.  Turn on/off 2D heatmap on bottom layer (on the ground itself).  Change colors, scales, viewing angles, etc.  Layers/overlaying is the way to allow many viewer options, and it gives good power for future expansion. 

Perhaps, you could choose a few URLs from the Google image search, to show us what you wish.  Paste your favorite image URLs into another post, or edit your first post and paste some favorite image URLs in there.  This would help us "see" what you want to do.  We want to see what you wish-for.  Then we can give better advice.   

Cool project!  I see good fun and learning ahead.  Others will surely comment soon, especially after you give us some image urls to your favorite visualizations.  Sorry for long post... I get talkative sometimes.

[degressor]

Hi Wingnut, many thanks for your answer. What I need is really a flat heat map and bars on it, not a geographic map, no hight's on the map. 

I thought about the first solution you suggested too. And after your suggestion, I did a first trial on it. Now I'm struggling with making a color transition more smooth. 

[jerome]

If you need to display a lot of bars with different sizes, colors, positions, etc, then the SPS may be your friend : http://doc.babylonjs.com/overviews/solid_particle_system

example 80K buildings : http://www.babylonjs-playground.com/#2FPT1A#36