有什么方法/着色器可以在Unity WebGL中生成3d热图吗？

Question

我在Unity-Webgl中的一个项目中工作，它将不同位置的温度传感器值编码为建筑物的3d热图。我已经尝试使用粒子系统和着色器来根据这些值为粒子着色，但效果不是很理想。我现在正在寻找一种解决方案或着色器，可以使用温度值对半透明对象进行着色(例如，使用颜色的体积照明)。它应该看起来像这样：example

我在互联网上搜索过，但只发现许多体积着色器不支持OpenGL或仅支持单一颜色。

我想知道是否有其他的解决方案。提前感谢您的帮助！

Answer 1

您不需要着色器来完成示例中的效果。可以将热图数据的水平切片加载到纹理中，并将它们放置在平面上。下面是我用perlin噪声表示热数据的一个例子。你可以从这里的https://github.com/keijiro/PerlinNoise得到柏林噪声函数

public class HeatmapBehavior : MonoBehaviour
{
    public int x_size = 128; //width of the textures
    public int y_size = 128; //height of the textures
    public int num_shells = 10; //number of slices of the data
    public GameObject plane_prefab; //the slice geometry and shader
                                    //this prefab is just a plane with the same area 
                                    //as the building, with a material that has its
                                    //shader set to Unlit/Transparent

    public float height = 10; //how tall in world units the dataset is
    public Color LowColor; //the cold color
    public Color HiColor; //the hot color

    void Start()
    {
        for (int i = 0; i < num_shells; i++)
        {

            var shell = GameObject.Instantiate(this.plane_prefab);  //create a slice
            shell.transform.parent = this.transform;
            shell.transform.position += new Vector3(0, (float)i / (float)this.num_shells * this.height, 0);

            var texture = new Texture2D(x_size, y_size);
            //for each texel in the shell's texture
            for(int x = 0; x < x_size; x++)
            {
                for(int y = 0; y < y_size; y++)
                {
                    var heatLocation = new Vector3((float)x / (float)x_size, (float)y / (float)y_size, (float)i / (float)num_shells); //find the coordinate in the heatmap for this texel
                    var heat = (Perlin.Fbm(heatLocation, 4) + 1)/2f; //grab the heat map data
                    texture.SetPixel(x, y, Color.Lerp(this.LowColor, this.HiColor, heat)); //interpolate the color based on heat map
                }
            }

            texture.Apply();


            shell.GetComponent<MeshRenderer>().material.SetTexture("_MainTex", texture);

        }
    }
}

如果要在建筑物内的场景中以交互方式飞行，则解决方案将更加复杂。您将需要将壳与摄影机对齐，根据摄影机视图锥体计算它们需要多大，并基于壳的旋转方向对热贴图数据进行采样。