Hi, I am pretty new to Babylon.JS, love it so far, but got stumped with shaders recently.
I have been trying to implement a heatmap over a 3d mesh and ran into a wall. I have a bunch of points (P) just outside of the surface of the mesh in a non-uniform distribution and it would be pretty cool to show the distribution as a heatmap on the mesh’s surface. I decided to use WGSL ComputeShaders for heat calculation, as plain old javascript calcs for vertex colors were incredibly slow. My thinking is the following:
- Run a WGSL compute shader to calculate the aggregate the inverse distances of each vertex from P. This is something I already implemented, very fast, I am happy with it as it solved my performance problem I had with plain JS.
- Scale the inverse distances to be between 0 and 1. (Done in javascript) The resulting array is called heat, each heat corresponds to one vertex. (length(heat) == length(all vertices of the mesh))
- Feed back each vertex’s “heat” into a ShaderMaterial and use heat to color the right vertex.
I have trouble with step #3. I have no idea how to match each vertex in the shader to the right heat value. With WGSL I don’t understandt how to translate from the compute “world” that has a global_id.x, etc to the vertex shader world where VertexInputs are provided for you. Is there a way to compute Vertex related information in a ComputeShader, put it in a buffer, then use these values in the VertexShader?
Any pointers would help. Thanks!