Creator 3D 材质系统:曲面效果如何实现

要实现曲面的效果,我们有几种方案可选择:
1. 直接使用曲面模型
这是最直观最容易想到的实现方案,从模型层面直接将效果做好,省去了其他处理,但这种方案也存在着很多严重的问题:
(1)模型复用不便,模型生成时的状态几乎决定了它的使用场合,这对于游戏开发中需要大量复用资源以减小包体来说有严重的问题。
(2)对于跑酷游戏这种物理需求并不复杂的游戏来说,大部分的游戏逻辑都可以直接通过计算直接完成而并不需要依赖物理引擎实现,对于正常的模型来说,规则的形状对于逻辑实现是很友好的,但是启用曲面模型就会对这种计算带来很多困难,几乎只能通过使用物理引擎来实现,过多的物理计算对性能是会有较大的影响的。
包体不友好,性能不友好,异型模型还会对制作带来麻烦,对于只是为了实现显示效果来说,这些损耗得不偿失。
2. 使用材质系统实现
我们需要明白一点,要实现的曲面的效果,实际上影响的只有显示效果,与其他的任何系统是不相关的,它不应当影响到其他无关的模块,既然只想改变显示,那采用材质系统相较于采用曲面模型的方案有着诸多好处:
(1)不必使用物理引擎,简单的物理效果可以通过计算来实现,效率更优。
(2)模型可复用,想要实现不同的弯曲效果也很方便,只要使用带有曲面效果的不同参数的材质即可实现同一模型的不同效果。相较于方案一的多重模型来说,只需要几个材质即可解决问题。
(3)参数可配置,可以通过参数调节来得到不同的效果。
分析看来,相较于直接使用曲面模型的方案来说,使用材质系统实现的方案优势很明显,没有额外的开销,也没有太大的包体负担。
综上所述,使用材质系统实现更能满足我们的需求,因此采用材质系统来实现这个效果。
3
方案思路分析
从需求来看,我们的目的是实现一个与我们的观察点相关的模型变形,既然只是变形,并不涉及到颜色的变化和处理,那么需要处理的就只有顶点着色器部分,并不涉及片段着色器。对于不太清楚渲染管线各个阶段的读者,可以参考 [LearnOpenGL]的渲染管线介绍。
在 Shader 中,通过顶点着色器即可完成对模型顶点位置的操作。
明确了是对顶点位置进行操作后,我们将摄像机所在的点定为原点。
由于我们的摄像机是固定在人物背后,且赛道始终保持向 Z 轴负方向延伸,所以可以将模型与摄像机的 Z 轴方向的距离看作函数的输入值,想要得到曲面的效果,模型的点的变化规律如下:
距离原点越远的点产生的偏置值越大(函数在区间内为增函数)
距离原点越远的点偏置的变化速度越快(函数的导数为一次函数)
由上述两条规律不难得出,二次函数的变化规律与我们想要实现的曲面效果的规律契合,所以我们的顶点着色器的运算为一个关于顶点位置 Z 值的二次函数运算。
我们刚刚得出的规律是建立在一个特定空间下的,即以摄像机为原点的空间,这个空间正是空间变换中的观察空间阶段,所以我们之后对顶点的操作正是在这个空间中进行才能够得到正确的结果。
4
材质系统简介
Cocos Creator 3D 提供了完备的材质系统,基于这套材质系统,我们能够很方便地在引擎中创建使用编辑材质,并且在场景预览窗口能够随时观察到材质更改所带来的变化。
在 Cocos Creator 3D 编辑器中与材质系统相关的资源有两种,分别为:
Effect 资源
此类型资源为符合 Cocos Effect 语法标准的渲染流程描述文件,由 YAML 格式的流程控制清单和基于 GLSL 300 ES 语法的 Shader 片段共同组成。
Material 资源
此资源可看做是 Effect 资源在场景中的资源实例,其本身除了 Effect 资源的引用外,还包括很多可配置参数以决定 Material 的状态。在实际使用中,我们的模型是需要使用 Material 资源的,这样就可以实现使用同一个 Effect 但参数不同以实现不同效果的需求了。
材质的使用也非常的方便,在 Cocos Creator 3D 编辑器的资源管理器中右键即可新建出 Effect 资源和 Material 资源。
在 Material 资源可选择需要使用的 Effect 还可对其他参数进行配置,完成配置并保存后,选中需要使用材质的模型,选中需要的 material 或者直接将 material 拖入框中即可完成材质的设置。
具体详尽的材质介绍和参数表请参看官方文档[材质系统]。
5
具体实现
思路已经很清晰了,那么现在开始着手实现Shader。下面是具体的实现步骤:
1、启动 Cocos Creator 3D 编辑器(以下简称编辑器),为实验方便,使用最简单的场景即可,新建场景后,在场景编辑器中新建一个 Plane 模型,之后以此对象作为查看 Shader 效果的对象。
2、在编辑器的资源管理器中右键新建 Effect,将其命名为 curved 或者符合要求的名字。
3、这时新建的 Effect 文件为编辑器内置的 Effect 模板,其包含了最基础的