Trying to create a 3d heatmap to track user interaction with a 3d model. I’m basing the functionality from this playground. Except for the particle system. At the moment i’m working with a specific 3d mesh.
This is it’s texture and more or less the area which actually goes over the mesh.
I’m using this code plus a raycast to get the values that should be colored in. Unfortunately, the picked uv values do not translate well back onto the heatmap texture, I suspect because of the way the cutout for this specific mesh is done (doesn’t unwrap perfectly). Would you have any idea how to work around / solve this issue?
This would be really hard to tell without a repro in the playground unfortunately 
The mesh + textures are provided by a custom api, I’m not 100% sure I’m allowed to share a repo.
This is what I had in mind. It does work here, but not for the mesh I am using
Update. Getting the size values from the mesh seems to make it adapt to any mesh.
this.size = (this.hit.pickedMesh.material as PBRMaterial).albedoTexture.getSize()
const index = Math.round(Math.round(u * this.size.width) + (Math.round(v * this.size.height) * this.size.width))
Also setting them in the new texture.
this.heatmap = new RawTexture(
new Uint8Array(this.values),
this.size.width,
this.size.height,
Engine.TEXTUREFORMAT_R,
this.scene,
false,
false,
Texture.TRILINEAR_SAMPLINGMODE
);
2 Likes
Came a long way since this the first issue I posted above.
Of course I’m back because I ran into another issue.
I was messing around with the heat map and decided to color around points in a radius and make it a gradient depending on the distance from the center.
Would anyone know what is causing this interaction between the two circles? My intent is to make them merge when they meet.
This is the code I use to iterate around the circle indices; where index is the 1D canter value, color is any value between 0 and 255, width is the dimension of the whole texture and getDistance returns the distance from the center to any given point in teh circle.
const c = 255
const w = this.size.width
const col = index % w
const row = Math.floor(index / w)
const r = 120
const maxDist = (w * r) + (w / 2)
for (var x = col - r ; x <= col; x++){
for (var y = row - r ; y <= row; y++){
if ((x - col)*(x - col) + (y - row)*(y - row) <= r*r){
var xSym = col - (x - col);
var ySym = row - (y - row);
// (x, y), (x, ySym), (xSym , y), (xSym, ySym) are in the circle
var i0 = x + y * w
var i1 = xSym + y * w
var i2 = x + ySym * w
var i3 = xSym + ySym * w
if(this.values[i0] > color + (( c / maxDist ) * ( this.GetDistance(col, row, x, y))) ){
this.values[i0] = color + (( c / maxDist ) * ( this.GetDistance(col, row, x, y)))
}
if(this.values[i1] > color + (( c / maxDist ) * ( this.GetDistance(col, row, x, ySym))) ){
this.values[i1] = color + (( c / maxDist ) * ( this.GetDistance(col, row, x, ySym)))
}
if(this.values[i2] > color + (( c / maxDist ) * ( this.GetDistance(col, row, xSym, y))) ){
this.values[i2] = color + (( c / maxDist ) * ( this.GetDistance(col, row, xSym, y)))
}
if(this.values[i3] > color + (( c / maxDist ) * ( this.GetDistance(col, row, xSym, ySym))) ){
this.values[i3] = color + (( c / maxDist ) * ( this.GetDistance(col, row, xSym, ySym)))
}
}
}
}
It is really hard to tell without a repro where we could debug and play around Would be great if you could create one in the playground ?
Hello @J_e_r just checking in if you still have an issue and if so if you can provide us with a playground repro
Hey @carolhmj. This repo sums up what i want to do. I am currently using this on a vuejs web platform which has a component that displays the models and another one manages the models to change the textures to the heat map.
For some reason it only works on the babylon 5.0.0-beta.5. Although on the repo it works for the latest version.
This is the error I’m getting.
webRequest.ts:156 GET http://localhost:3333/apps/7Pfj5S9GJ1qhTSfqf0Cs/src/Shaders/custom_2.vertex.fx 404 (Not Found)
WebRequest2.send @ webRequest.ts:156
retryLoop @ fileTools.ts:483
requestFile @ fileTools.ts:485
RequestFile @ fileTools.ts:519
LoadFile @ fileTools.ts:342
ThinEngine2._loadFile @ thinEngine.ts:5632
Effect2._loadShader @ effect.ts:622
Effect2 @ effect.ts:359
ThinEngine2.createEffect @ thinEngine.ts:2750
StandardMaterial2.isReadyForSubMesh @ standardMaterial.ts:1308
Mesh2.render @ mesh.ts:1936
SubMesh2.render @ subMesh.ts:430
RenderingGroup2._RenderUnsorted @ renderingGroup.ts:278
RenderingGroup2.render @ renderingGroup.ts:144
RenderingManager2.render @ renderingManager.ts:170
Scene2._renderForCamera @ scene.ts:3545
Scene2._processSubCameras @ scene.ts:3566
Scene2.render @ scene.ts:3829
(anonymous) @ index.ts:174
Engine2._renderFrame @ engine.ts:1306
Engine2._renderLoop @ engine.ts:1324
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
requestAnimationFrame (async)
ThinEngine2.QueueNewFrame @ thinEngine.ts:5836
ThinEngine2._queueNewFrame @ thinEngine.ts:1595
Engine2._renderLoop @ engine.ts:1343
webRequest.ts:156 GET http://localhost:3333/apps/7Pfj5S9GJ1qhTSfqf0Cs/src/Shaders/custom_2.fragment.fx 404 (Not Found)
How are you loading your shader in your vue project?
Same as this
But instead having the mapMaterial.diffuseTexture be the image upload it’s a picked mesh’s albedo texture.
Do you have the babylon materials library in your vue project?
Yes, I’m importing CustomMaterial from the material library and RawTexture from core library.
Can you provide us with your vue project so we can take a deeper look at it?
Not really. This project I’m doing is part of my company’s SaaS platform, and I can’t share the whole vue project. I would be happy to go through it with you, or maybe I could try put together a small repository with the relevant parts. I’ll discuss with my employer tomorrow.
2 Likes