NekoLab

CG练习(3) 渲染贝塞尔曲线

贝塞尔曲线(Bézier curve)是通过一系列控制点决定的一种平滑的曲线,特点在于生成和计算简单,易于控制,本质上是多项式曲线,常用于矢量绘图,可以用于插画、动画、设计各个领域。Photoshop中的钢笔工具也应用了贝塞尔曲线,可能是最常接触到的应用。

我在Unity里实现了二阶贝塞尔曲线的渲染,加上简单的着色和动画效果如下:

项目地址:

原理很简单,二阶贝塞尔曲线的表达式为$\mathbf {B} (t)=(1-t)^{2}\mathbf {P} {0}+2(1-t)t\mathbf {P} {1}+t^{2}\mathbf {P} _{2}{\mbox{ , }}0\leq t\leq 1.$

对于曲线的每一段有三个控制点P0 P1和P2,随着t变化时曲线上点B(t)的位置由这三个控制点按权重插值得到,像这张动图所示:

渲染使用的是Unity的LineRenderer方法,指定一系列点的集合,LineRenderer将他们用直线段连接渲染出来,曲线细分成很多线段,按顺序一个个计算坐标值就好了。

把代码设置成ExecuteInEditMode,使用编辑器方法OnDrawGizmos在控制点的位置渲染Gizmo就可以看到控制点,编辑界面就是这样:

LineRenderer使用一个Particle Shader作为材质,我用了一张彩色图片当贴图就产生了色彩有变化的曲线。LineRenderer可以指定一个色彩渐变Color Gradient来控制整条曲线的颜色,写了一段简单代码,控制一段Color Gradient沿曲线移动产生动画效果,但写的过程中发现色彩渐变的控制点(GradientKey)最多只能有8个,限制了我的效果,结果并不是很理想。所以要改变颜色最好还是自定义Particle Shader。