Heat map on solid particles

Hello,

i am currently using solid particles to render many textured boxes. Now for each box i have a bunch of data i’d like to visualize as a heat map on one side of the box. What are the options to implement this?

I was thinking about dynamic texture for each box where i would draw semi transparent circles based on data and then apply that texture to each particle. I expect this solution to be slow.

Second idea was to add more vertices to my boxes and use some vertex shader to color my vertices, is this possible with SPS? Or maybe some fragment shader?

Thanks for any hints

How many particles are you dealing with ludevik?

First option would require new material for each particle if the data being displayed for each is different.

Second option, you could manipulate the vertices colors forming gradients between colors. This method would be updating vertex data each frame so just like the dynamic texture resolution can impact performance, so can the vertices count using this method.

Do you have a PG?

I don’t have any hard limit how many particles there could be, but realistically i would be happy if it will work with 10000 particles.
Each particle has its own set of data so they will be different, but they are constant for given timestamp, so unless the user changes the time, they remain constant. There are less than hundred values up to thousands of values per particle so i would need that many vertices for each particle.
Good thing is that when i have many particles then i expect the number of values per particle to be low and when i have fewer particles then the number of values is greater, so they are kind of mutually exclusive.
I don’t have PG yet as i am not sure which way to pursue. I’ll start playing in the PG and post when i have something.

1 Like

I created a playground for simple heat map. It creates 100 random values, creates texture data based on those values and then creates a texture which is then set as diffuse texture on material.

Next question is how to map a single value through LUT so i can map a single value to some color. Now the texture contains much more data that it needs, i only have single value which should be somehow mapped to color when rendering.

I would use a DynamicTexture and then set each part of it to the wanted particles with the property .uvs
If the standard box is not the right model (because its uv don’t fit your need), I would modify first the box uvs (setting uv =(0,0) for 5 sides) and then use this modified box as a model.

Yes, this will be next step for particle system, creating one big texture and using only part of that texture for different particles. For now i am creating new texture and new material for each particle and using materialIndex on the particle. It works for small number of particles and materials. Before i use the big texture i want to solve color mapping from single value to color. Maybe using some custom shader where i send the data somehow and color LUT into the shader and the shader will pickup correct color based on LUT.

I am bit stuck now. I have 2 textures, one is heatmap texture and the second one is normal diffuse texture that i am using (e.g. brick wall procedural texture). I can use particle.uvs to map heatmap texture on each particle separately as diffuse texture. My goal is now to alpha blend heatmap texture over the brick texture at various alpha values, so the user can change the transparency of the heatmap. Brick texture is same for each particle, what changes is heatmap texture.

I am already using CustomProceduralTexture as diffuse texture for all particles. My fragment shader receives varying vec2 vUV which are the fragments of particle.uvs. I could use those in fragment shader to get per particle heatmap texture info, but i also want ‘global’ vUV which goes from (0,0,1,1) for every particle for the other texture so i could mix those two textures based on alpha uniform.

Is it possible to define another vertex property in solid particle system so i can have two varying vec2 vUV? One for each particle, one for whole particle system.

This is the effect i am looking for.

Same material applied to solid particle system.

And this is my current state.
I have two particles, one heatmap texture and i am setting uvs on each particle. For heatmap texture i use uvs [0,0,0.5,1] and [0.5,0,1,1]. But for diffuse texture i just want [0,0,1,1] so it remains same for all particles, but now it is same as particle.uvs.

Thanks to @Evgeni_Popov i was able to add globalUVs (uv6) for diffuse texture and particle UVs for heatmap texture and blend them together. Here is my current PG.

Adding some screenshots:

With trilinear sampling mode:

Now i am considering sending the data texture as single value only (so only R, G, B or A) to the shader along with some uniform for mapping the texture channel value to color.

I played more with the heatmap. Now i am sending just the values as 2d texture with only Red channel. Color mapping is done in shader using another small 1d texture as linear gradient.
Result:

@Evgeni_Popov Hello, maybe it’s worth checking why is this PG not working on 5.0: https://playground.babylonjs.com/#2LX5WU#10

EDIT: I am going to paste this into the Bugs section.

Thank you!

uv1-uv6 are standard attributes, if they are provided on the mesh geometry they are automatically declared in the shaders (I think before 5.0.0 it was only uv1/uv2 that were automatically declared), so one should not redeclare them (see line 90):

https://playground.babylonjs.com/#2LX5WU#18

1 Like