哈喽! 近期可能会继续撰写一些文章,来丰富自己工作之余的生活,弥补没有项目的遗憾。 如标题所见,这个又是一个智慧城市常见的功能:“热力图、高度图”。
利用虚幻 新功能:“虚拟纹理(VirtualTexture)”来达到实时渲染的效果,之前一直是通过“RenderTarget2D”来进行渲染的,奈何“价格高昂”!想寻求其他性价比更高的解决方案。
于是就有了这几期对于对不同解决方案的探索!
第一期:Plane 作为载体,通过不同颜色代表不同高度以“扫描”的形式进行动态呈现。
先说亮点:
性能消耗更“廉价”,有更好的兼容性。
缺点:
需要制作额外的材质,会增加额外的工作量。(官方有相应的文档,放在文末)
制作流程:
1、配置引擎(项目设置):
启用虚拟纹理支持(Enable Virtual texture support) 设为true(可参考官方文档)
2、创建虚拟纹理(资产):
并双击打开,由于我们只采集高度信息,所以就在虚拟纹理内容这一栏选择“场景高度”其他保持不变即可
3、制作虚拟纹理对应的材质:
材质分为两大块: 扫描材质与呈现材质,分两大块呈现。
3.1 扫描材质:
首先就是对山体材质进行制作,相对也很简单,就是通过shader 把山体的高度进行输出到虚拟纹理中,利用RuntimeVirtalTextureOutput进行接收,从而可以得到Mesh 的高度信息。
3.2呈现材质:
废话了这么多,这里就是今天的重点了!
一个会输入纹理的材质节点,我们把需要的信息通过输出节点进行储存,然后通过这个节点接收。
我们要做的就是对接收到的高度信息进行处理。通过输入地形最低高度及高度区间,规范到0-1。
//对输入高度进行规范化
float3 outlerp = (abs(worldHeight - HeightOffset))/HeightMax;
return outlerp;
并把规范后的数值进行进行lerp 颜色映射(蓝-蓝绿-绿-黄-红)。其中Importlerp为输入参数。
float3 OutColor = lerp(float3(1,0,0),float3(1,1,0),clamp(4*Importlerp,0,1));
OutColor = lerp(OutColor,float3(0,1,0),clamp(4*Importlerp-1,0,1));
OutColor = lerp(OutColor,float3(0,1,1),clamp(4*Importlerp-2,0,1));
OutColor = lerp(OutColor,float3(0,0,1),clamp(4*Importlerp-3,0,1));
return OutColor;
最终把一张高度图转换为彩色的热力图。
有了高度信息就可以通过高度信息计算画出“等高线”了
可以通过HeightLineDistance控制等高线之间的间距,HeightLinePower等高线宽度,HeightLineLight控制其强度。来达到最终的效果。
//先画出单跟线条
float outheightline = frac(abs(WorldHeight/HeightLineDistance));
// 钳制线条宽度及亮度
outheightline = HeightLineLight*round(pow(outheightline,HeightLinePower));
return outheightline;
最后来一张“全家福”当然,拿到这个效果并不是最终目的,最终是看这个效果如何应用,来体现出对应的价值。
4、场景放置运行时虚拟纹理体积
在 放置Actor(Place Actors) 面板中,在 体积(Volume) 类目下搜索 运行时虚拟纹理体积(Runtime Virtual Texture Volume),并将其拖入场景。并使用体积套住我们要呈现的范围(也可以使用边界对齐Actor 来对齐虚拟纹理——第一个箭头)。
并在参数面板选择我们需要渲染的虚拟纹理(第二个箭头)
5、开启需要渲染的模型 虚拟纹理(也就是地形)
很多时候不成功就是没有注重细节!
没有启动这个参数,也是没有效果的。
当然我们也可以直接给地形使用(地形也需要增加对应的内容)
到此目前所能达到的效果都已经描述了,可以利用这个思路来达成更好的效果。
这也是动态获取地形高度,也可以有其他的用法:直接利用 <lerp>节点,直接把高程图(人流密度,河流高度,水淹分析等黑白图)输入,来达到同样的效果。当然这不是今天的重点(重点是动态)。
下一期就是利用Niagara 进行动态创建了!可以些许期待一下
虚幻官方文档:https://docs.unrealengine.com/5.1/zh-CN/runtimevirtual-texturing-quick-start-in-unreal-engine/