takeaway
After reading this article, you should know: 1. UV support for building effects 2
Building Shader effect
Architectural rendering is a very important aspect of the map engine. Map engine has multiple layers, such as water, feature surface, green, road, building, POI, etc. The building layer is the only one with height and is the one that gives the map the best sense of space. For buildings, we’ve accumulated a lot of cool effects to enhance the overall map expressiveness.
We used some custom building shaders to achieve different building renderings. Here are two architectural effects.
Customized UV information
In Map Building Rendering we mentioned that we separated the sides and the top of the building and wrote the building dimensions and random values in the UV information. If the dimensions of the building are not available in the UV, we can use information such as world coordinates or cyclic maps to achieve some simple effects. With size information, we can achieve different effects according to the physical dimensions of the building, and be more flexible.
For the side of the building, we used three sets of UVs to store the required information. The diagram below:
For the top of the building, the UV information uses the same UV information as the side top vertices.
Using these three sets of UVs, each pixel in the Shader can calculate its horizontal and vertical position on a certain side of the building, which can make many effects related to the physical dimensions of the building.
Visualize build shaders
In the past, only people with some programming ability could build shaders in specialized languages, which were unfriendly to designers. Today, there are many visual Shader editors that simplify Shader creation and open the door for designers and other team members who don’t know how to program. You can edit the Shader in wySIWYG by simply connecting nodes in a graphical interface.
One such tool is the Shader Graph, a Shader editor built into the Unity engine. Our client map engine is developed using Unity engine. Here are two effects built with this tool.
Build a Shader with transparent border style
The target
The overall translucent effect of the building is filled with gradients according to height, and the edges are highlighted. Add extra highlights on top of tall buildings.
The overall effect can be divided into the following three modules to achieve the final effect.
1. Gradient filling surface module
First, we create an Unlit Mater node and select the Additive blending mode. Our color will sum with the target color to achieve translucency.
Next we specify the Color input. We directly take y of the world coordinate of the model, make Smoothstep between the two input height values, and then use it as the parameter of Lerp of the two input color values to realize the gradual color change of the building in the height direction.
2. Edge filter module
Filter the highlights on the top floor and below the top floor. The y value of UV2 has already been written into the total height of the building, and we can find the distance to the roof by taking the y value of the world coordinate and this value.
To the distance, we take a power of -a (a > 0) for this distance. The power of -a has a good descending curve in the positive direction of the X-axis, and the value decays rapidly as the height decreases, which can realize the highlight change of the top line. The a value is also used as an input value, and the tuning parameter controls the highlighting range.
Finally, Clamp is set to 0-1 to prevent overexposure, which is the value of the top curve.
In the same way, we set the input 2nd line pos to give a downward offset to the height value, the same parameter to calculate the value of the highlight line below the roof.
For the highlight line below the top, some buildings are too short to add. We add a height filter, and only buildings higher than this height will have a second highlight line. Determined by an input value. Again, use the building height stored on UV2 to do this.
Temporarily connect the values of these two lines directly to the color node of the Master and observe the effect.
As you can see, the second line is normal, while the entire top surface is highlighted, which is not what we want. The height values of all points on the top surface are the maximum height of the building resulting in the vertices of the entire top surface being highlighted. So we want to filter out the top surface and highlight through the sides. The implementation method is very simple, the top surface normal is up, by judging the direction of the normal to achieve filtering.
Multiply this value with the previous highlight value, pass in the Color node of the Master, and see that the edges are normal.
The vertical edge of each side can also be calculated from the width information stored in UV0 and the total width value in UV1. In the same way, each vertical edge can be filtered out.
3. Edge color module
We also fill the edges with a height-based gradient. Given two input color values, we saved the total height of the building by the world coordinate Y value and UV2 y value, and calculated the color of each pixel through interpolation.
4. Color mix
Finally, we use the results of the previous three modules to do color mixing. Using the value of the edge filter module as the parameter of Lerp, interpolate between the face Color and the edge Color to get the final mixed Color, and pass the Color to the Master node to get our final Color.
Build a layered Shader that drives the painting effect
We use an opaque Shader to achieve this effect. First, create an opaque Lit Master.
1. Fill the module with gradient
Similar to the first effect, we used a gradient to fill in the building background. Interpolate using Y of world coordinates.
2. Floor filling
For easy control, we added two control nodes, Bar Center and Bar Half Width, to control the floor height and offset. The difference between the y value of the world coordinate and the total height of the building stored on UV2 was used to obtain the distance from the roof. Remap was carried out through the previous control variables to obtain multiple intervals with 1 value interval.
Posterize is then used to discretize these 0-1 intervals. By modulo, it’s divided into two parts. Every 7 layers, take a special color, the rest of the 3 layers, take a color.
We temporarily connected this color to Emission of Master node to observe the effect of gradient + floor filling.
3. Add flow animations
For animation effects, we mainly use the Noise and Time nodes. First provide an input value to specify the Noise map. The UV of the sample needs to be computed. V We can directly use the discrete floor values obtained in Step 2. U is obtained by using the random value stored in UV2 and the x value of UV0 by some simple mathematical operations. In addition, we provide a Tiling And Offset node that can adjust the parameters of the map, which can better support the adjustment of parameters to check the effect at run time.
The last part is the Time node, which is easy to calculate. Also for ease of adjustment, we provide many input values to control the range of final values. Take this value as a Sine to obtain a changing curve. And then cut it between zero and one.
Temporarily connect this node to Emission of the Master node and observe the effect.
4. Color mix
Finally, we use the BaseColor obtained in the first step as BaseColor, multiply the two colors obtained in the second and third steps as the color of the animation, pass in the Emission, and then we can get the final effect.
conclusion
In this series of sharing, we shared how to DIY 3D map from zero, including data source analysis and calculation, controller design, base drawing rendering, visual layer rendering, how to make customized building model, how to make customized building effects. Based on the map engine, we also made a map temporal analysis tool and style editor, city editor. This series of sharing to here come to an end, the rest of our future long!
Review past
Creating a Cool 3D Map Visualization Product for B-end Clients
Data Sources and Stored Computing
Map Interaction and Pose Control
Map Text Rendering
Map Architecture Rendering
Modeling and Output of Map Architecture
Geographic Data Visualization