火焰效果材质实现_Creator 3D 材质系统：曲面效果如何实现？

前不久发布的 Cocos Creator 1.0.2 版本中正式加入了对 OPPO 小游戏、vivo 小游戏以及华为快游戏平台的支持，在诸多 Creator 3D 制作的小游戏案例中，《猪猪侠：极速狂飙》已上线 OPPO 小游戏平台。

这款休闲跑酷小游戏，采用了曲面材质效果来使跑酷赛道更加多变有趣，今日，Cocos 引擎开发工程师 ChiaNing 将为各位开发者来解析这种曲面效果的实现思路和方案，在阅读完本文之后，大家便可以将这种效果应用在自己的游戏中。

1

使用背景

在固定背后视角的跑酷游戏中，玩家面对的始终是前方布满障碍的赛道，除去有趣的障碍设计可以一直吸引玩家的注意外，许多游戏还会添加一些视觉效果来使游戏画面看起来更丰富有趣，比如今天我们要分享的这款《猪猪侠：极速狂飙》就采用了曲面的效果使得赛道看起来更多变，也更有立体感和纵深感。

那么，这样的曲面效果在 Cocos Creator 3D 中是如何实现的呢？

2

实现方案分析

要实现曲面的效果，我们有几种方案可选择：

1. 直接使用曲面模型

这是最直观最容易想到的实现方案，从模型层面直接将效果做好，省去了其他处理，但这种方案也存在着很多严重的问题：

(1)模型复用不便，模型生成时的状态几乎决定了它的使用场合，这对于游戏开发中需要大量复用资源以减小包体来说有严重的问题。

(2)对于跑酷游戏这种物理需求并不复杂的游戏来说，大部分的游戏逻辑都可以直接通过计算直接完成而并不需要依赖物理引擎实现，对于正常的模型来说，规则的形状对于逻辑实现是很友好的，但是启用曲面模型就会对这种计算带来很多困难，几乎只能通过使用物理引擎来实现，过多的物理计算对性能是会有较大的影响的。

包体不友好，性能不友好，异型模型还会对制作带来麻烦，对于只是为了实现显示效果来说，这些损耗得不偿失。

2. 使用材质系统实现

我们需要明白一点，要实现的曲面的效果，实际上影响的只有显示效果，与其他的任何系统是不相关的，它不应当影响到其他无关的模块，既然只想改变显示，那采用材质系统相较于采用曲面模型的方案有着诸多好处：

(1)不必使用物理引擎，简单的物理效果可以通过计算来实现，效率更优。

(2)模型可复用，想要实现不同的弯曲效果也很方便，只要使用带有曲面效果的不同参数的材质即可实现同一模型的不同效果。相较于方案一的多重模型来说，只需要几个材质即可解决问题。

(3)参数可配置，可以通过参数调节来得到不同的效果。

分析看来，相较于直接使用曲面模型的方案来说，使用材质系统实现的方案优势很明显，没有额外的开销，也没有太大的包体负担。

综上所述，使用材质系统实现更能满足我们的需求，因此采用材质系统来实现这个效果。

3

方案思路分析

从需求来看，我们的目的是实现一个与我们的观察点相关的模型变形，既然只是变形，并不涉及到颜色的变化和处理，那么需要处理的就只有顶点着色器部分，并不涉及片段着色器。对于不太清楚渲染管线各个阶段的读者，可以参考 [LearnOpenGL]的渲染管线介绍。

在 Shader 中，通过顶点着色器即可完成对模型顶点位置的操作。

明确了是对顶点位置进行操作后，我们将摄像机所在的点定为原点。

由于我们的摄像机是固定在人物背后，且赛道始终保持向 Z 轴负方向延伸，所以可以将模型与摄像机的 Z 轴方向的距离看作函数的输入值，想要得到曲面的效果，模型的点的变化规律如下：

• 距离原点越远的点产生的偏置值越大(函数在区间内为增函数)

• 距离原点越远的点偏置的变化速度越快(函数的导数为一次函数)

由上述两条规律不难得出，二次函数的变化规律与我们想要实现的曲面效果的规律契合，所以我们的顶点着色器的运算为一个关于顶点位置 Z 值的二次函数运算。

我们刚刚得出