Mapbox SDK Research 02 Gradient Effect
Unity: 2018.4.13f1
Mapbox SDK: 2.1.1
This page talks about how to generate gradient effect based on our data.
In this experiment, the data source is using heatmap data from USL as an example.
We need to add a color feature to Meshdata.cs so that we can manipulate texture colors in mesh generation. Open 'Assets/Mapbox/Unity/MeshGeneration/Data/MeshDada.cs'. Then add the following code.
public List<Color> Colors;
Colors = new List<Color>();
Colors.Clear();
We need to go to the 'Assets/Mapbox/Unity/MeshGeneration/Modifiers/MergedModifierStack.cs'. This script manage the mesh generation which we can modify.
In the override GameObject Execute function, add the following code.
float hf = 0;
if(float.TryParse(feature.Properties["height"].ToString(),out hf))
{
if (hf <= 1)
return null;
try
{
`float.TryParse(feature.Properties["risk"].ToString(),out hf);`
}
`catch { }`
}
Here we save the property 'risk' in our data source to float hf. Then, we can change the colors depending on the value range of the property. For example, we can do the following:
//add colors to buildings
Color baseColor = new Color(0.9f, 0.9f, 0.9f);
if (hf > 0.008)
{
`baseColor = new Color(0.03f, 0.19f, 0.42f);`
}
else if (hf > 0.006)
{
`baseColor = new Color(0.13f, 0.44f, 0.71f);`
}else if (hf > 0.002){
`baseColor = new Color(0.26f, 0.57f, 0.78f);`
}else if (hf > 0.001){
`baseColor = new Color(0.42f, 0.68f, 0.84f);`
}else if (hf > 0){
`baseColor = new Color(0.62f, 0.79f, 0.88f);`
}
meshData.Colors = Enumerable.Repeat(baseColor, meshData.Vertices.Count).ToList();
Attention: This part of code needs to be after the for loop, because we need to render the buildings first, then give them colored texture.
In the GameObject End function, add _tempMeshData.Colors.AddRange(_temp2MeshData.Colors);
Add _tempVectorEntity.Mesh.SetColors(_tempMeshData.Colors);
_tempVectorEntity.MeshRenderer.material = new Material(Shader.Find("Custom/VertexColoredDiffuse"));
If you don't have VertextColoredDiffuse shader file, please go to this link to download "VertextColoredDiffuse.shader" and "VertextColoredDiffuse.shader.meta". Then, drag them into your Mapbox/Shaders folder.
In the Map directory, we need to select Combine Meshes.
Then, we need to change the "Style Type" in the Texture to Custom and give the top and side a base color. In this case we can give it a red color since it represents heat risk. Remember select the shader to our custom VertextColoredDiffuse shader in the settings of the material you are assigning with.
Finally, we need to toggle off "Buildings With Unique Ids".
Now, we can have a grandient effect based on the 'risk' property of the heatmap data.
