Skip to main content

墨水几何结构和渲染管线

通常，引擎会区分光栅颗粒（称为Raster Ink）和矢量多边形渲染（称为Vector Ink），它们的主要区别如下表所列。 由 Ink Geometry Pipeline 计算得到的几何图元是包含控制点的路径，使用@@@插值生成 Catmull-Rom 样条. 除了控制点之外，笔划数学模型在第一段和最后一段（分别是笔划的起始点和结束点）中指定插值参数的值。 如果需要，所有路径都可通过可变宽度和不透明度创建。 光栅化技术（在Rasterizer模块中实现）是画出包含这些特征的笔划路径的技术。

Raster InkVector Ink
Raster 渲染Vector 渲染
固定分辨率 – 在像素水平上定义图形可扩展性和便携性 – 适用于在不同设备上打印或显示
允许像光点一样进行像素水平的操控对象模型 – 可通过不同集合操作操控
在表现性上具有更大的灵活性渲染更加复杂，但表现性受限

Vector Ink （形状填充技术） 是一种用于光栅化可变宽度笔划的纯色技术。 这种方法在表现性上有所限制，但可以执行更加复杂的渲染技术。 它十分适合典型的可缩放矢量图形使用或手写应用。 它在表现性上比较简单，使用这种技术光栅化的笔划操控（拆分）、缩放、重绘等非常容易（参见图 1）。

Vector 渲染 例子 图 1：矢量实例。

颗粒墨水使用重叠颗粒渲染笔划。 通过该技术，可控制渲染章节中所介绍的多种渲染参数，从而构建更具表现性的工具（例如，蜡笔、铅笔或水彩笔）。 它在半专业绘画应用中有着广泛应用，如“图 2”所示。

Raster 渲染 例子 图 2：光栅实例。

管道​

在计算机图形中，渲染管道是描述图形系统对渲染对象执行渲染所需执行步骤的概念模型。 对于 WILL 墨水渲染，该过程分为 geometry pipeline（在所有平台中均以相同方式实现）和渲染部分（使用平台特定图形框架）。

在应用中，geometry pipeline 在InkBuilder中创建和配置。 在应用中，geometry pipeline 在InkBuilder中创建和配置。 VectorInkBuilder扩展了矢量刷的管道，而RasterInkBuilder则专用于光栅（颗粒）刷。 WILL 3.0 使用 geometry pipeline，包括处理的链条块*（处理器、生产者等）。 管道的输入是指针数据（触摸、触控笔、鼠标或控制器）*，它会经历一系列的处理阶段。 每个阶段的输出又作为其后续阶段的输入。 管道的主要目标是创建数字墨水。 然而，由于其通用实现方式，使其具备更广泛的一系列功能。

WILL 3 的渲染管线

图 3： WILL 3 的渲染管线

输入​

最佳的输入提供者是笔，因其可提供最常用的传感器输入，是最自然的书写或素描设备。

数字墨水传感器通道概览。 图 4：数字墨水传感器通道概览。

有下列输入：

  • Position - 由 x 和 y 坐标（输入点的位置）定义
  • Phase - 输入的阶段*（开始、更新/移动、结束）*
  • Timestamp - 输入的时间戳，用于计算速度
  • Force - 可选 - （压力）压力敏感触控笔/显示屏报告的压力值
  • Radius - 可选 - 触控输入的大小
  • Altitude Angle - 可选 - 输入设备与书写平面之间的仰角（OE）。测量单位为弧度 - 介于 0 和 π/2 之间
  • Azimuth Angle - 可选 - 沿着书写平面到对象位置的角度距离

按照惯例，方位角（OA）沿着平面从顶部向底部（从北到南）测量 测量单位为弧度 - 介于 0 和 2π 之间（参见图 5）。

方位图 图 5：方位角图。

内部表示和模型​

  • Pointer Data - (输入数据/触控数据） - 输入采用上文所述的格式

  • PathPoint - 点的内部表达

  • Path - PathPoints 的 Flat 集（参见图 6），每一个都通过计算器（既可以预定义，也可以从外部传入）计算得到：

路径点 图 6：路径点。

  • Layout - 每个路径点中项目的描述符

  • Spline - 向心力 Catmull–Rom 样条（参见图 7），由其控制点定义：

Catmull-Rom 样条 图 7：Catmull-Rom 样条.

  • Point Set - 一组定义有特定形式的填充区域的点（不仅仅是一个点）。 该技术使用由其外壳（而不是点集）定义的简单刷子。

Point-Set 图 8：点集。

  • *Polygon - 使用凸壳从点集创建多边形。 多边形是Collection<DIPoint2>:

多边形点 图 9：多边形点。

数据类:

  • DIPoint2 - 包含 x 和 y 坐标的二维点
  • DIPoint3 - 包含 x、y 和 z 坐标的三维点
  • DIPoint4 - 包含 x、y、z 坐标和宽度的三维点
  • DIPointList2D - Collection<DIPoint2>
  • DIPolyline - Collection<DIPoint2>

处理块​

管道由一系列处理块组成（处理器、生产者等）。 下图展示了处理块，并提供了中间步骤的实例。 原始数据 图 10：管道及其中间结果。

BaseDataProcessor​

管道阶段的抽象基类DataProcessor，根据单个输入项来处理数据。

它定义了两种抽象方式：

  • add(phase: Phase, addition: Input, prediction: Input): Pair<Output, Output> - 在管道阶段输入笔划，然后处理
  • reset() - 将处理器重置回初始状态

PathProducer​

根据提供的布局将输入转换为内部路径表达。

构造器参数（包括在 Config 类中）：

  • Layout
  • Calculator - 将输入转换成路径点的功能

添加参数：

  • Addition - InputData - 想要处理的输入
  • Prediction - InputData - 未来输入的预测

输出：

  • Addition - 作为集合的路径<Float>
  • Prediction - 作为集合的路径<Float>

Smoother​

通过双重指数平滑.将路径变得更平滑 平滑会造成某个点滞后的负面结果。

构造器参数：

  • 布局的尺寸（用作输入处理的步幅）

添加参数：

  • Addition - 集合<Float> - 由 TouchToPathProducer 生成的路径
  • Prediction - 集合<Float> - 由 TouchToPathProducer 生成的预测路径

输出：

  • Addition - 作为集合的路径<Float>
  • Prediction - 作为集合的路径<Float>

SplineProducer​

在路径开始和结束位置添加两个控制点，以便生成Catmull-Rom 样条.

构造器参数：

  • 布局的尺寸（用作输入处理的步幅）

添加参数：

  • Addition - Collection<Float> - 路径
  • Prediction - Collection<Float> - 预测路径

输出：

  • Addition - 样条作为“集合<Float>
  • Prediction - 样条作为“集合<Float>

SplineInterpolator​

根据间隔参数，沿着轨迹添加点，将样条离散化。

构造器参数：

  • Layout
  • Spacing - 两个相邻点之间的间隔是尺寸的乘数（小于 1 则为分数）
  • Split Count - 拆分的数量

添加参数：

  • Addition - 集合<Float> - 样条
  • Prediction - 集合<Float> - 预测样条

输出：

  • Addition - 样条作为“集合<Float>
  • Prediction - 样条作为“集合<Float>

BrushApplier​

将点替换为刷子多边形，将样条转换为点集的集合。

构造器参数：

  • Layout
  • Brush Polygon - 定义刷子的多边形

添加参数：

  • Addition - Collection<Float> - 样条
  • Prediction - Collection<Float> - 预测样条

输出：

  • Addition - Collection<DIPointList2D>
  • Prediction - Collection<DIPointList2D>

ConvexHullChainProducer​

使用单调链算法.，在每两个相邻点集周围创建凸包

添加参数：

  • Addition - Collection<DIPointList2D> - 点集的集合
  • Prediction - Collection<DIPointList2D> - 点集的预测集合

输出：

  • Addition - Collection<DIPolygon>
  • Prediction - Collection<DIPolygon>

PolygonMerger​

使用并集合并多边形。 在不同平台上使用限幅器库及其相应的点。

添加参数：

  • Addition - Collection<DIPolygon> - 由 ConvexHullChainProducer 生成的多边形集合
  • Prediction - Collection<DIPolygon> - 由 ConvexHullChainProducer 生成的预测多边形集合

输出：

  • Addition - Collection<DIPolygon>
  • Prediction - Collection<DIPolygon>

PolygonSimplifier​

取由线段组成的曲线（多边形），使用道格拉斯-普克算法.查找点更少的相似曲线

构造器参数：

  • Epsilon- 确定简化水平的阈值。值越大则多边形的段越少。

添加参数：

  • Addition - Collection<DIPolygon> - 集合简化的多边形
  • Prediction - Collection<DIPolygon> - 预测集合简化的多边形

输出：

  • Addition - Collection<DIPolygon>
  • Prediction - Collection<DIPolygon>

渲染​

管道结果使用每个平台特定的二维渲染 API 完成渲染，用于颗粒渲染平台图形引擎，例如：

特定平台 Vector 渲染​

在大多数情况下，将使用贝塞尔曲线作为路径对象，它可以通过连接管道生成的多边形的顶点轻松创建。 得到的结果是代表着路径的填充式贝塞尔轮廓。

PathPoint 计算器​

计算器是转到PathProducer阶段的方法。 它定义如何将数据从指针事件转换为路径点。 我们的采样应用有三种实例路径点计算器方法：一种为VectorInkBuilder，两种为RasterInkBuilder（一种用于笔输入，一种用于鼠标输入）。

构建墨水​

为使用管道，需要创建数据布局，指定墨水路径的内容。 以下是一个基本布局，路径点有 X、Y 坐标和可变尺寸。潜在属性有：

  • PathPoint.Property.X - X 坐标
  • PathPoint.Property.Y >- Y 坐标
  • PathPoint.Property.Z - Z 坐标
  • PathPoint.Property.RED - 红颜色值
  • PathPoint.Property.GREEN - 绿颜色值
  • PathPoint.Property.BLUE - 蓝颜色值
  • PathPoint.Property.ALPHA - α 颜色值
  • PathPoint.Property.SIZE - 与路径点相关的尺寸值
  • PathPoint.Property.ROTATION - 与路径点相关的旋转值
  • PathPoint.Property.SCALE_X - 与路径点相关的 X 尺寸缩放值
  • PathPoint.Property.SCALE_Y - 与路径点相关的 Y 尺寸缩放值
  • PathPoint.Property.SCALE_Z - 与路径点相关的 Z 尺寸缩放值
  • PathPoint.Property.OFFSET_X - 与路径点相关的 X 尺寸偏移值
  • PathPoint.Property.OFFSET_Y - 与路径点相关的 Y 尺寸偏移值
  • PathPoint.Property.OFFSET_Z - 与路径点相关的 Z 尺寸偏移值
  • PathPoint.Property.D_X - 正切向量 X 值
  • PathPoint.Property.D_Y - 正切向量 Y 值

如要实时构建墨水，需要处理指针输入事件OnPointerPressed、OnPointerMoved、OnPointerReleased ，并将输入提供给InkBuilder。 InkBuilder将指针输入数据传送到第一个管道阶段 - PathProducer。 因为可以从两个框架接收多个输入点，PathProducer的输出将会累加。 采样应用使用 PathSegment帮助类，以便累加路径部分。 累加路径随后将被传送到剩余的管道阶段。 每个阶段的输出将作为下一个阶段的输入。 每个管道生成相同类型的一对对象。 第一个对象是添加数据，第二个是预测（或初始）数据。 添加数据变为笔划的永久部分，而预测数据则是临时数据，应仅在当前框架中显示。

构建 Vector Ink​

管道阶段在VectorInkBuilder构造器中创建，处理通过GetPolygons方法完成。 管道输出是一对多边形 - 一个是新笔划的数据块。另一个预测多边形，后者应仅在当前框架中显示。

构建 Raster Ink​

颗粒墨水的管道处理阶段较少：

  • PathProducer
  • Smoother
  • SplineProducer
  • SplineInterpolator

它们在RasterInkBuilder构造器中创建，处理通过GetPath方法完成。

渲染墨水​

当生成墨水几何图形后，可使用不同方法予以显示。 采样应用使用渲染库来实时高效渲染矢量墨水和颗粒墨水。

详细指南请参见here