Volumetric Heatmap

[DWork]

I saw a project developed by Unity3d. One of the effect ‘Volumetric Heatmap’ is so fantastic. The heatmap like the decals print over everythings. How can we make this effect?

[mawa]

Hi,
I suppose this could be worked out from a base created recently by ‘master guru of design’ @PatrickRyan

How to achieve scanning effect

@DWork, here is the demo I worked up for a scan wave effect. There are a few things going on here so let me take some time to point out some of the things to pay attention to with the demo. [image] I set up some parameters, some for simplicity and others for flexibility. The first was that I wanted a fairly complex scene with elevation changes in a mesh to show how the wave runs over the mesh. For simplicity’s sake, this is one mesh made from Blender’s geometry nodes, but the shader is not de…

I bet if you give him a little bit of time, he will likely want to comment this (or more) and share some of his immense knowledge with you I know he likes this kind of challenges. You would just need a little bit of patience Meanwhile, have a great weekend

[DWork]

wait

[sebavan]

You could create a pluginMaterial and use a separate uv set to store where to sample the texture

Or rely on a 3d texture to sample based on world position.

[labris]

I just stopped the timer - https://playground.babylonjs.com/#4QH8JM#57

[PatrickRyan]

@DWork, the best way to start this is with a dynamic texture to generate your heat map if you need to generate it in real time. If you have a static texture for a heat map and just need to apply it, you can skip the dynamic texture.

Applying the texture can be done in a couple of ways. The first is just a simple decal as you can see in this example projecting decals into UV space. In your example image, however, the heat map is mixed with the baseline texture so that you can still see some of the underlying values from the original mesh. In this case, you will likely need a node material to do some blending of the heatmap with the baseline texture. In this case you want something like this sample node material.

The baseline texture is a UV test texture, and the overlay is a heat map. I am doing a couple of things here. The first is that I am using the blue channel as a lerp between the baseline UV texture and the heatmap. This means that wherever the heatmap is strongly blue, only the UV texture will show, but where the heatmap is hotter (less blue) you will get a mix of the heatmap and a desaturated version of the UV texture. This is how you see the colors and the details of the map underneath.

This section of the graph allows you to set how transparent the heatmap is by changing the value of the float here:

With a value close to 0.0, the heatmap will obscure the texture beneath:

But a value close to 1.0 will mix the full value of the desaturated UV texture with the heatmap

This is the basic approach you can do with either just a simple decal or with a dynamic texture and node material. And the playground I always include when talking about dynamic textures is the product customizer because it shows a good workflow to update your dynamic texture in real time. While your scene will not be a product customizer, you can simply draw shapes of color into your dynamic texture to achieve what a similar effect.

Hope this helps, but ping back with questions.

[labris]

Quick test with some Sketchfab model - https://playground.babylonjs.com/#2TP75F#43