Drawing on a Dynamic Texture over existing image

Questions
1

Hello!

Here’s the situation.

  1. I load this 3d model with a texture mapped to it.
  2. On the click of a button I generate X-number of random vectors in the space around the model.
  3. For each vector generated, I determine the closest point on the model to it.
  4. Using pickWithRay I use the babylon magic to get the UV coordinates for where the cast ray hit.
  5. I store these coordinates in an array.
  6. I feed that array into SimpleHeat, this neat little code bit from Vladimir Agafonkin (mourner (Vladimir Agafonkin) · GitHub) that simulates heat mapping.

The idea is to show a heat map over the surface of the model.

Now here is what the model looks like before the heat map is applied:
image

And when I click the button, I get:
image
which is beautiful, BUT… notice that the areas between the heat striations turns black. Instead of the black, I’d like to keep the original texture.

Without running the data through SimpleHeat, I can draw over the original texture just fine, so I know that the solution lies in the script.

At one point, in the _draw method, the context gets cleared. When I comment that out, I get:
image
Notice you can see the original texture is still there but it being all red now makes no sense to me. That’s my lack of knowledge shining through.

Now, keeping the clearing of the context commented out and further commenting out the _colorize method call, I get this:
image
You can see that this is the closest yet. If you look closely you can see the gradient circles that demark the heat points are visible, but… no color, of course.

The data array that is pushed into SimpleHeat looks like this:
([UVCoord.x, UVCoord.y, OpacityValue], …)

The link to SimpleHeat, should anyone want to play around with it. its cool! simpleheat/simpleheat.js at gh-pages · mourner/simpleheat · GitHub

And my Playground

Just a note: The model is not optimal for the heat mapping, but if you keep watching the underside of the jet you’ll see the best examples of it. Can also change numberOfHeatPoints to a lower number to reduce time spent on generation.

Maybe one of you can see something I’m missing?
Thank you,
Carlos

2

Hi,

When you do ctx.clearRect, you clear the original fill and image you put on it, so you’d have to draw those again before drawing the heat map. Also, ctx.putImageData just overwrites the pixels without alpha blending them as it would with ctx.drawImage.

This works:

https://www.babylonjs-playground.com/#T100FS#19

And thanks for sharing the SimpleHeat link, it looks interesting!

1 Like
3

Gijs thanks! exactly what I wanted to do. Appreciate the help!

2 Likes