图形学笔记八 Geometry 几何

Posted 2023-05-10

参考技术A

参考课程：
https://www.bilibili.com/video/BV1X7411F744?p=10
从第40分钟左右，终于到了Geometry部分。

隐式的几何不会告诉我们这些点在哪里，而会告诉我们这些点满足的函数关系。比如x 2+y 2+z^2=1就表示了一个球体。隐式的表达的缺点就是，很难直接看出它的形状是什么

通过参数映射，把uv映射到一个马鞍面上。想知道表面的样子时，把每一个UV都测一遍就行，很容易得到。

然而想要判断内外时，显式的表达就很难。

对于任意一个几何，不直接描述表面，而是描述空间中任何一个点到这个表面的最近距离。所以空间中任何一个点都会定义出一个值来。下图把两个物体的距离函数定义出来，做一个blending就能融合

距离函数应用：

可以理解为无限套娃：

不考虑物体是一个表面，而是表面为一堆点，只要点足够密集，就看不到点与点之间的缝隙。理论上可以表示任何几何体，通常三维扫描等得到的结果就是点云，点云可以变成三角形面。

扩展： 绪论：什么是点云？

多边形网格被非常广泛地应用

略

在仿射变换下，只需要对顶点做仿射变换，就能得到这个贝塞尔曲线在仿射变换下的结果。但是其它变换不行，比如投影变换就不行。

贝塞尔曲线在控制点形成的凸包内，即几个控制点形成的凸包内。

如上图就是凸包，可以把黑点当成钉子，然后一个非常大的橡皮筋，啪地一下收缩，包围而成的多边形就是凸包。

控制点多了以后，贝塞尔曲线并不直观，很难控制。于是我们想到每次定义一段贝塞尔曲线，然后连起来，普遍习惯每四个控制点定义一段。但是怎么保证连接处还是平滑的呢？

答案就是导数要连续，也叫C1连续：

当然还有C0连续：

船舶设计者使用细小的有弹性的木条或者钢片，通过配重的钩子约束木条的形状来设计船壳。这样的木条被称之为样条。

相对于未分段的贝赛尔曲线。B样条具有局部性，即更改局部一个点，不会影响其他控制点。

B样条很复杂，可以参考

如图，曲面就像渔网，锚点是上面的黑点。然后锚点固定在空间中的某个位置，再接受一个力，就得到这样的形变：

具体是怎么做的呢？画出四条贝塞尔曲线后，在这四个线上再取四个点，认为是一个新的贝塞尔曲线的控制点。在不断扫的过程中，形成了曲面。

这个没听懂……，曲面的uv,几何体的uv ??

创造更多的三角形，并且改变他们的位置，让表面更光滑。

TIPS:这里的loop是人名，不是循环的意思

Loop细分是一种专门针对三角形面的细分方法，其核心步骤也十分容易理解：

如图所示在连接每条边的中点生成一个新的三角形，原来的三角形就会被分割成4个三角形。我们将所有的顶点分为两类，一类是新生成的顶点，一类是老的原来就有的顶点，对于新生成的顶点做如下处理：

如图，先找到一个白点，它一定是某一条边的中点，找到共享这条边的两个三角形。这条边的两侧就是AB，对面的就是CD。那么生成后的白点，需要的调整位置，就是图中的公式了。其中1/8,3/8都是加权平均，公式的值怎么来的涉及到具体的算法设计就不说了，我们只考虑如何执行。

对于旧的顶点，做如下处理：

对于旧的顶点，一部分靠周围旧的顶点的值，一部分保留自己的，按照公式移动位置

从公式中可以看出来，如果n比较大，那么自己的坐标位置就不那么重要了。反之，如果n=2，那么自己的坐标权重就很大。

Loop细分假设的是三角形网格，但是对于非三角形网格，就没办法，这时候就要用到Catmull-Clark 细分。

找到不是四边形的面，这里以三角形为例：
取每个边的中点，以及面上取一个点(重心或其他的点)，把这些点连起来即可。

在这个过程中，所有的面都变成了四边形面。也就是一次细分后，每一个非四边形面消失，并会引入一个奇异点。

现在总共有4个奇异点，在上面的过程中，两个三角形中各增加了一个奇异点。

结论很简单，在四边形内做上述操作，连接的是四条边的中点，肯定度为4，就不会增加奇异点。而非四边形，做上述操作，必定增加奇异点。

但是，做过上述操作之后，所有的非四边形面都消失了。并且之后的细分，奇异点也不会增加。也就是说，只有第一次细分时，增加了非四边形面的个数对应的奇异点。

点的位置的调整，分为三类：新的点分为 面上的点，边上的点 分别操作，老的点单独操作。可以看出，通过平均的方式，得以平滑：

如上图，最终效果，我没搞懂为啥Catmull-Clark让物体的边缘逐渐圆滑起来。

如上图，离得远，低模完全看不出区别。这正是LOD的原理。

其实曲面简化所利用的一个方法叫做边坍缩，如上图所示就是将一条边的两个顶点合成为一个顶点。但随之而来的问题就是，曲面简化需要尽量保持原本模型的shape，如何坍缩一条边，或者说坍缩哪一条边能够使得原模型样貌被改变的程度最小，这就是曲面简化的关键所在。

为此引入一个度量，即二次误差度量(Quadric Error Metrics)。即坍缩之后蓝色新顶点所在的位置与原来各个平面的垂直距离之和。如果能够使得这个误差最小那么对整个模型样貌修改一定程度上也会较小。

那么其实到这整个曲面简化的算法流程已经比较清晰了

这其实是一个标准的贪心算法，可能到不了全局最优解，但事实证明最终的结果依然相当不错。

WPF之几何图形Geometry

在WPF的DrawingContext对象中，提供了基本的绘制椭圆和矩形的API：DrawEllipse和DrawRectangle。但是，这些是远远不够用的，我们在日常应用中，更多的是使用DrawGeometry函数，它可以绘制更多复杂的几何图形，并且提供了许多强大而易用的函数，在大多数场景下，甚至可以取代DrawEllipse和DrawRectangle函数。

在WPF图形体系中，Geometry类表示几何图形的基类，使用的时候是实例化它的一些子类，具体的有：

基本几何图形

• 线段：LineGeometry
• 矩形：RectangleGeometry
• 椭圆：EllipseGeometry

  

 

几何图形集合

路径集合图形PathGeometry里可以包含一系列几何图形集合，常见的有：

• 线段： LineSegment
• 弧：ArcSegment

贝塞尔曲线：贝塞尔曲线系列还比较多，具体有如下几种：

1. BezierSegment：在两个点之间创建一条三次方贝塞尔曲线。
2. PolyBezierSegment：创建一系列三次方贝塞尔曲线。
3. PolyQuadraticBezierSegment：创建一系列二次贝塞尔曲线。
4. QuadraticBezierSegment：创建一条二次贝塞尔曲线。

除了这种组合的方式之外，系统还提供了一个通过一系列API来绘制的StreamGeometry。它不支持绑定，动画，相应也更加灵活而高效。

    StreamGeometry geometry = new StreamGeometry;

    using (StreamGeometryContext ctx = geometry.Open())
    {
        ctx.BeginFigure(new Point(10, 100), true , true);
        ctx.LineTo(new Point(100, 100), true , false);
        ctx.LineTo(new Point(100, 50), true, false);
    }

 

复合几何图形

使用 GeometryGroup、CombinedGeometry 或者通过调用静态的 Geometry 方法 Combine，可以创建复合几何图形对象。它们主要的区别是：

• CombinedGeometry 对子图形进行叠加操作，没有面积的子图形将被丢弃。只能组合两个子图形（但是这两个子图形也可以是复合几何图形）。
• GeometryGroup 只进行组合，而不进行面积叠加。可以添加多个子图形。有关示例，请参见如何：创建复合形状。

CombinedGeometry的叠加方式有四种：Union、Intersect、Exclude 和 Xor，它们的效果为：

 

 

这些在我们的日常应用中是非常有用的，具体示例请参看MSDN文章： 如何：创建复合形状和如何：创建组合的几何图形。

 

常用方法

Geometry对象中本身还包含了一系列非常有用的方法，如：

• GetArea - 获取 Geometry 的面积。
• FillContains - 确定是否包含其他 Geometry。
• StrokeContains - 确定是否包含指定的点。
• Bounds：获取外接矩形

这些都是非常常用的方法，例如FillContains，StrokeContains用于鼠标命中测试是非常方便的。

 

呈现方式

Geometry对象并不能作为图像独立呈现出来，它一般有如下几种呈现方式：

在Path中呈现：

可以作为GeometryDrawing.Geometry的参数呈现为Path对象

    <Path Stroke="Black" StrokeThickness="1" >
        <Path.Data>
            <LineGeometry StartPoint="10,20" EndPoint="100,130" />
        </Path.Data>
    </Path>

这种方式下写一些简单的几何图形还行，但对于PathGeometry来说有些冗繁，因此XAML采用了一种简单的路径标记语法来简化这一过程，

    <Path Stroke="Black" Fill="Gray">
        <Path.Data>
            <PathGeometry Figures="M 10,100 C 10,300 300,-200 300,100" />
        </Path.Data>
    </Path>

甚至可以直接简化为：

    <Path Stroke="Black" Fill="Gray" Data="M 10,100 C 10,300 300,-200 300,100" />

这种语法在一些第三方矢量图转换过来的文件中非常常见，如果能熟练掌握的话，写一些简单的几何图形也是非常方便的。

在DrawingContext中呈现

可以作为DrawingContext. DrawGeometry的参数呈现，这种方式后面的文章中做会更多的说明，这里就不多介绍了。

在GeometryDrawing中呈现

可以作为GeometryDrawing.Geometry的参数呈现为Drawing对象

    <GeometryDrawing Brush="MediumBlue">
        <GeometryDrawing.Geometry>
            <GeometryGroup>
                <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
                <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
            </GeometryGroup>
        </GeometryDrawing.Geometry>
    </GeometryDrawing>

 当然，Drawing对象也不能独立呈现，一般是作为DrawingBrush或作为DrawingContext.DrawDrawing的参数来使用的

 

其它用途：

作为UIElement.Clip参数裁剪控件

    <Image Source="sampleImages\\Waterlilies.jpg" Width="200" Height="150" HorizontalAlignment="Left">
        <Image.Clip>
            <EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/>
        </Image.Clip>
    </Image>

　　

另外，也常用在DrawingGroup.ClipGeometry和DrawingContext.PushClip中裁剪图像。

作为DoubleAnimationUsingPath. PathGeometry属性生成路径动画

 可以将PathGeometry 对象定义的几何路径旋转（转动）对象的路径。

 

 PathGeometry用法

先看显示效果：

（图1）

XAML(代码A)：
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Canvas>

<!--这是使用PathFigureCollection的表示方法-->
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
  </Path.Data>
</Path>

<!--这是使用StreamGeometry的表示方法-->
<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />
</Canvas>
</Page>

 请留意上面加粗及红色文字部分。

WPF提供两个类来描述路径数据：一个是StreamGeometry，另一个是PathFigureCollection。

类似：<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />的形式是StreamGeometry的XAML代码表示形式，也是最简洁的表示形式。
而类似：
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
  </Path.Data>
</Path>
这样的方式是使用PathFigureCollection的XAML代码表示方式。

这两种方式都可以达至同一种显示效果，那么，什么时候使用StreamGeometry，什么时候使用PathFigureCollection方式呢？
一般地，当你建立路径后，不再需要修改时，可使用StreamGeometry方式，如果还需要对路径数值进行修改，则使用PathFigureCollection方式（这里就是PathGeometry）。

Data属性的表示语法：
(1)StreamGeometry方式： [填充规则] 外形描述[外形描述]*
(2)PathFigureCollection方式： 外形描述[外形描述]*

注：
(1)上面语法中，[...]表示可选，*代表任意个。
(2)“填充规则”中，有EvenOdd和Nonzero两种。XAML中为了简洁，使用“F0”表示EvenOdd，“F1”表示Nonzero。
(3)“外形描述”的语法：moveCommand drawCommands [closeCommand]
其中：移动指令（moveCommand），绘制指令（drawCommands），关闭指令（closeCommand）。
(4)moveCommand指定起始点，使用一个drawingCommand描述外形轮廓的内容描述，closeCommand用来关闭路径。

如下图：

（图2）

下面来解释一下“M 100,240 C510,300 80,100 300,160 H40 v80”这样字符串的意义。
分为四种情况来解释：
1. 移动指令：Move Command（M）：M 起始点  或者：m 起始点
比如：M 100,240或m 100,240
使用大写M时，表示绝对值; 使用小写m时; 表示相对于前一点的值，如果前一点没有指定，则使用(0,0)。

2. 绘制指令(Draw Command):
我们可以绘制以下形状：
(1) 直线:Line(L)
(2) 水平直线: Horizontal line(H)
(3) 垂直直线: Vertical line(V)
(4) 三次方程式贝塞尔曲线: Cubic Bezier curve(C)
(5) 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)
(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)
(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)
(8) 椭圆圆弧: elliptical Arc(A) 

上面每种形状后用括号括起的英文字母为命令简写的大写形式，但你也可以使用小写。使用大写与小写的区别是：大写是绝对值，小写是相对值。

比如：L 100, 200 L 300,400表示从绝对坐标点(100,200)到另一绝对坐标点(300,400)的一条直线。而l 100, 200 l 300,400则表示相对上一点（如果未指定，则默认为(0,0)坐标点）开始计算的坐标点(100,200)到坐标点为(300,400)的一条直线。

当我们重复使用同一种类型时，就可以省略前面的命令。比如：L 100, 200 L 300,400简写为：L 100, 200 300,400。

下图是以下XAML代码的绘制效果（为了方便你比较，我加了背景格子，每小格为10像素）：
XAML（代码B）：
<Path Stroke="Black" StrokeThickness="1" Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" />

（图3）

细心的读者可能会发现，有点怪怪的感觉，因为我故意将下面的三角形的代码放在前面了，这样，似乎不太符合习惯。事实上，上面的代码与这个结果完全一样：
<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 100,10 100,40 Z M 10,100 L 100,100 100,50 Z" />
这里有一个你暂时还没见过的Z指令，它就是一个关闭指令（close Command），表示封闭指定形状，即将首尾点连接起来形成封闭的区域。

绘制指令格式语法:

(1) 直线:Line(L)
格式：L 结束点坐标 或: l 结束点坐标。
比如：L 100,100 或 l 100 100。坐标值可以使用x,y（中间用英文逗号隔开）或x y（中间用半角空格隔开）的形式。

(2) 水平直线  Horizontal line(H)：绘制从当前点到指定x坐标的直线。
格式：H x值 或 h x值(x为System.Double类型的值)
比如：H 100或h 100，也可以是：H 100.00或h 100.00等形式。

(3) 垂直直线 Vertical line(V)：绘制从当前点到指定y坐标的直线。
格式：V y值 或 v y值(y为System.Double类型的值)
比如：V 100或y 100，也可以是：V 100.00或v 100.00等形式。

(4) 三次方程式贝塞尔曲线 Cubic Bezier curve(C)：通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。
格式：C 第一控制点 第二控制点 结束点 或 c 第一控制点 第二控制点 结束点
比如：C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中，点(100,200)为第一控制点，点(200,400)为第二控制点，点(300,200)为结束点。

(5) 二次方程式贝塞尔曲线 Quadratic Bezier curve(Q)：通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。
格式：Q 控制点 结束点 或 q 控制点 结束点
比如：q 100,200 300,200。其中，点(100,200)为控制点，点(300,200)为结束点。

(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)：通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。
格式：S 控制点 结束点 或 s 控制点 结束点
比如：S 100,200 200,300

(7) 平滑二次方程式贝塞尔曲线 smooth quadratic Bezier curve(T)：与平滑三次方程贝塞尔曲线类似。
格式：T 控制点 结束点 或 t 控制点 结束点
比如：T 100,200 200,300

关于第(6)种平滑三次方程式贝塞尔曲线与第(7)种平滑二次方程式贝塞尔曲线的比较：

如下图：

XAML代码：
<!-- 这是左边平滑三次方程式贝塞尔曲线的代码 -->
<Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 S 250,100 80,280" />

<!--这是关键点的连线示意-->
<Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 L 250,100 80,280" />

<!-- 这是右边平滑二次方程式贝塞尔曲线的代码 -->
<Path Stroke="Red" StrokeThickness="2" StrokeDashArray="1,1,1"   Data="M 150,10 T 250,100 80,280" />
备注：为了方便比较，我使用了同一个控制点，坐标均为：(250,100)，起始和结束点也一样。另外，我使用了虚线（用了StrokeDashArray属性）及不同颜色以示区分。

(8) 椭圆圆弧: elliptical Arc(A) : 在当前点与指定结束点间绘制圆弧。
A 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点
或：
a 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点
尺寸(Size): System.Windows.Size类型，指定椭圆圆弧X,Y方向上的半径值。
旋转角度（rotationAngle）：System.Double类型。
圆弧旋转角度值（rotationAngle）：椭圆弧的旋转角度值。 
优势弧的标记（isLargeArcFlag）：是否为优势弧，如果弧的角度大于等于180度，则设为1，否则为0。 
正负角度标记（sweepDirectionFlag）：当正角方向绘制时设为1，否则为0。 
结束点（endPoint）：System.Windows.Point类型。

3. 关闭指令(close Command):用以将图形的首、尾点用直线连接，以形成一个封闭的区域。
用Z或z表示。

如果你对SVG有所了解，你会发现它们是惊人的相似。