GPU渲染二次贝塞尔曲线

最新推荐文章于 2024-06-01 09:40:19 发布

shenweihui

最新推荐文章于 2024-06-01 09:40:19 发布

阅读量664

点赞数

分类专栏： Graphics

本文链接：https://blog.csdn.net/seizeF/article/details/104749796

版权

Graphics 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原理

Resolution Independent Curve Rendering using Programmable Graphics Hardware中作者指出，存在一个射影变换，使得任意一个二次参数曲线可以转换为如下标准的隐式方程

$f(u,v) = u^2 - v$

对于曲线上的点 $(u, v)$ ，必然有 $f (u, v) = 0$ ，所以在渲染时，我们如果有fragment对应的坐标 $(u, v)$ ，只需代入这个隐式方程，判断是否小于一定的阈值，即认为该fragment在曲线上。

曲线的表示

若二次参数曲线 $C (t)$ 的控制点为 $P_i \ (0 \le i \le 2)$ ，则该曲线可以表示为

$\begin{aligned} B_i^2 &= \binom{2}{i}(1-t)^{2-i}t^i \\ \mathbf{C}(t) &= \sum_0^2 B_i^2(t)P_i \\ &= \begin{bmatrix} P_0 & P_1 & P_2 \end{bmatrix} \begin{bmatrix} (1-t)^2\\ 2t(1-t) \\ t^2 \end{bmatrix}\\ &= \begin{bmatrix} P_0 & P_1 & P_2 \end{bmatrix} \begin{bmatrix} 1 & -2 & 1 \\ 0 & 2 & -2 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 \\ t \\ t^2 \end{bmatrix} \\ &= \mathbf{P M t} \end{aligned}$

对于标准形式的二次参数曲线，可以表示为
$\begin{aligned} \mathbf{F}(t) &= \mathbf{Ft}\\ &=\begin{bmatrix} 0 & 1 & 0 \\ 0 & 0 & 1 \\ 1 & 0 & 0 \end{bmatrix} \begin{bmatrix} 1 \\ t \\ t^2 \end{bmatrix} \\ &= \begin{bmatrix} t \\ t^2 \\ 1 \end{bmatrix} \end{aligned}$

这里令 $u (t) = t$ ， $v(t) = t^2$ ，转换为隐式表示就是 $f(u,v)=u^2-v=0$ 。对应的控制点矩阵 $\mathbf{P}$ 可以如下计算
$\begin{aligned} \mathbf{F} &= \mathbf{PM} \\ \mathbf{P} &= \mathbf{FM^{-1}} \\ &=\begin{bmatrix} 0 & \frac{1}{2} & 1 \\ 0 & 0 & 1 \\ 1 & 1 & 1 \end{bmatrix} \end{aligned}$
所以三个控制点分别为 $(0, 0)$ ， $(\frac{1}{2},0)$ ， $(1, 1)$ 。

将曲线 $\mathbf{C}$ 变换为标准形式的射影变换 $\mathbf{T}$ 可以如下计算

$\begin{aligned} \mathbf{F} &= \mathbf{TC} \\ \mathbf{T} &= \mathbf{FC^{-1}} \end{aligned}$

注意：上述的射影变换在代码中不需要做任何处理，因为已经由三个控制点的位置决定。

实现

由于已经有了三个对应的标准控制点，那么给定一个三角形，我们可以很容易地得到三角形中任意一点的 $(u, v)$ 坐标，只需要利用GPU插值即可。通过将三个控制点坐标分别赋给每个顶点，并在fragment shader求值即可得到隐式方程的值。

float aastep(float edge, float v) 
{
    float fwidth = 0.7 * length(float2(dfdx(v), dfdy(v)));
    return smoothstep(edge - fwidth , edge + fwidth, v);
}

fragment float4 curveFragmentFunc(VertexOut input [[ stage_in ]])
{
    float d = input.texcoord.x * input.texcoord.x - input.texcoord.y;
    // calculate the gradient vector
    float2 grad = float2(ddx(d), ddy(d));
    d /= length(grad);
    constexpr int width = 2;
    return float4(0, 1, 0, 1.0f - aastep(width / 2, abs(d)));
}