Doris232 发表于 2022-2-3 12:46

[unity] 仿造一个枭龙战机的HUD

我希望在自制的游戏中实现一个简单的HUD(Head-up display 抬头显示器),使其看起来“像那么回事”;DCS游戏中的座舱制作的算比较精致的,鉴于财力问题,我们这次能够“抄作业“的最好对象就是JF-17”枭龙“战机的HUD了:



JF-17的HUD

枭龙模组的HUD非常复杂,我们本次尝试只选择实现这些内容:

[*]反射式成像的效果:图像中心的光线始终与载机轴线平行,看起来始终保持在正前方;图像看起来在无限远处,成像大小仅和视角有关,前后移动,并不会有近大远小的效果
[*]速度、高度、航向指示器,且刻度有滚动效果
[*]姿态仪,能够正确显示俯仰、偏航、滚转角度
[*]速度矢量符号、机头指向
[*]其他纯文字内容:攻角、过载、历史最大过载、马赫数、HUD模式等



反射式瞄具准星始终保持在正前方

贴图绘制

实现HUD的整体思路是将其中动态的部分拆解成独立的图片,来进行移动、旋转操作。通过一些取巧的手段,本次实现的内容都不需要动态生成mesh就能够完成,这样工作量就少了很多。
HUD中的图像除了文字就是一些线条,虽然不太复杂但是对位置的精准性要求比较高,所以我使用了手写svg的方式来绘制HUD。这种方法后续调整参数比较方便,同时不需要专业的软件,直接用文本编辑器就可以了。我构造了一个简单的工作流:首先写出要绘制内容的jinja2模板,然后通过python脚本填入参数生成.svg文件,再使用inkscape将其渲染为.png文件。
以左侧的速度表的滚动刻度为例,它的jinja2模板长这个样子:
<?xml version="1.0" encoding="UTF-8"?>
{% set height = scale_height * (scales|length * line_widths|length) %}
{% set x_mid = width/2 %}
{% set y_mid = height %}
<svg width="{{width}}" height="{{height}}">
    {# background #}
    <g stroke="#00ff00" stroke-width="{{line_stroke_width}}">
      {% for i, _ in scales %}
            {% for j, line_width in line_widths %}
                {% set x = 0 if side=='left' else width-line_width %}
                {% set dy = (j + i * line_widths|length) * scale_height + line_stroke_width%}
                <line x1="{{x}}" x2="{{x + line_width}}"
                  y1="{{height - dy}}" y2="{{height - dy}}" />
            {% endfor %}
      {% endfor %}
    </g>
</svg>生成的svg图长这个样子
<?xml version="1.0" encoding="utf-8"?>
<svg height="125" width="20">
<g stroke="#00ff00" stroke-width="1.5">
<line x1="10" x2="20" y1="123.5" y2="123.5"/>
<line x1="14" x2="20" y1="118.5" y2="118.5"/>
<line x1="14" x2="20" y1="113.5" y2="113.5"/>
<line x1="14" x2="20" y1="108.5" y2="108.5"/>
<line x1="14" x2="20" y1="103.5" y2="103.5"/>
<line x1="10" x2="20" y1="98.5" y2="98.5"/>
<line x1="14" x2="20" y1="93.5" y2="93.5"/>
<line x1="14" x2="20" y1="88.5" y2="88.5"/>
<line x1="14" x2="20" y1="83.5" y2="83.5"/>
<line x1="14" x2="20" y1="78.5" y2="78.5"/>
<line x1="10" x2="20" y1="73.5" y2="73.5"/>
<line x1="14" x2="20" y1="68.5" y2="68.5"/>
<line x1="14" x2="20" y1="63.5" y2="63.5"/>
<line x1="14" x2="20" y1="58.5" y2="58.5"/>
<line x1="14" x2="20" y1="53.5" y2="53.5"/>
<line x1="10" x2="20" y1="48.5" y2="48.5"/>
<line x1="14" x2="20" y1="43.5" y2="43.5"/>
<line x1="14" x2="20" y1="38.5" y2="38.5"/>
<line x1="14" x2="20" y1="33.5" y2="33.5"/>
<line x1="14" x2="20" y1="28.5" y2="28.5"/>
<line x1="10" x2="20" y1="23.5" y2="23.5"/>
<line x1="14" x2="20" y1="18.5" y2="18.5"/>
<line x1="14" x2="20" y1="13.5" y2="13.5"/>
<line x1="14" x2="20" y1="8.5" y2="8.5"/>
<line x1="14" x2="20" y1="3.5" y2="3.5"/>
</g>
</svg>字体

我没有找到JF-17中使用的字体,但是找到了一个开源的航空字体:B612,据说是空客在使用的字体。在unity中,可以使用TextMeshPro来生成与渲染我们自己选择的字体;另外,还支持一些超文本标记,后续扩展HUD中的其他文字显示会比较方便,比如左右对齐、居中、删除线之类的。
SDF着色

在初期的测试中,我发现图像的显示质量十分感人,即使把分辨率拉满,线条边缘也和抠图没扣干净一样,有一些残留的白色。参考TextMeshPro的字体显示方案,解决这个问题的方法就是采用SDF(Signed Distance Field)贴图来进行着色,参考这个blog。使用SDF后,线条的边缘在各种缩放下都能一直保持清晰,不过在贴图分辨率不高的情况下,转角处会更圆滑。
SDF的原理很多地方都有了。简单来说问题的原因是图像渲染时的插值,在同一个色块的内部,插值工作的很好,但是在(字体/线条)的边缘处,颜色发生了突变,插值的结果就不科学了,会产生模糊的效果。对于字体、线条来说,这个问题就很严重,因此要采用一个适合插值的东西作为贴图的值输入着色器。由此产生了SDF的概念,它描述的是像素点与纹样边缘的距离,插值后也很科学(不完全对,比如字体转角处就会变圆滑),在着色器中,最后将这个距离输出为图像的alpha值,就可以获得一个清晰的边缘了,参考这个shader:Image-SDF。
在github上,已经有工具能够将.png图像转化为SDF贴图了,我做了一点小改动:SDF-Generator;只写入alpha通道,不需要其他颜色信息了(基色直接在材质里设置)。这样在unity中导入贴图时可以选择alpha8格式,节省一点空间。
滚动刻度

滚动刻度的范围可以非常大,比如速度表,其展示的范围从0~1000+都有可能(我采用了公制单位,就是任性),直接输出到一张图片中就是又细又长,体积太大。所以需要输出可变的刻度数字,再通过上下移动较小尺寸的组合对象来实现滚动的效果,当偏移超过+-0.5时,改变数字内容,再重置偏移量;多余的部分使用遮罩去除即可。



遮蔽前



遮蔽后

姿态仪与速度矢量符号

姿态仪也通过一整张图片实现,目前使用了均匀的刻度分划,方便进行平移,在大角度时效果不是太好,不过问题不大。



平面上的等角刻度分划不是均匀的

观察JF-17的HUD,可以发现姿态仪是如何展示滚转、俯仰、偏航、攻角数据的,特别地,速度矢量符号总是处在姿态仪的中心垂线上:



姿态仪数据示意

滚转角和速度矢量符号的存在让姿态仪图像的平移稍微麻烦了亿点,需要整点三角函数才能计算出最终的平移量。
反射式成像效果

图像中心的光线始终与载机轴线平行:这个实现起来比较简单,只要让HUD的xy坐标随着观察者一起移动即可。
图像看起来在无限远处,成像大小仅和视角有关:可以让HUD始终保持在观察者前方的固定距离上,也可以让HUD随着观察者z坐标进行缩放。但是后者在观察者距离HUD平面很近的时候,缩放值会非常小,由于数值计算精度的原因,图像会抖动起来,效果非常糟糕。
当姿态仪图像的大小确定后,我们实际上已经固定了视角-HUD中距离的换算关系了,否则姿态仪的虚拟地平线就不能和真正的地平线重合了。假设1弧度对应于HUD中2单位的距离,我们将HUD平面固定在观察者前3单位的位置上,那么此时HUD的缩放大小应该是1*3/2=1.5,即放大1.5倍。

最后整出来的效果就是这样:【超级鱼窝】从零开始的飞行模拟游戏 - HUD测试,看起来海星
页: [1]
查看完整版本: [unity] 仿造一个枭龙战机的HUD