WPF 三維文字完整實作：從 FormattedText 幾何轉換到 SolidText 實體字體庫

核心挑戰：二維字形輪廓 → 三維三角形網格

WPF 提供 FormattedText.BuildGeometry() 取得字形 Geometry，但三維渲染需要 MeshGeometry3D (頂點 + 三角形索引)。關鍵難點：**任意多邊形三角剖分 (Tessellation)** 數學複雜度極高。

Charles Petzold 的漸進式解決方案

第一層：RibbonText - 中空絲帶字體

• 將字形輪廓展平為折線 (GetFlattenedPathGeometry)
• 每條線段在 XY 平面 (Z=0) 與深度面 (Z=-Depth) 建立兩頂點
• 索引連接形成三角帶，構成「中空絲帶」
• 優點：算法簡單、無需三角剖分、支援貼圖座標
• 缺點：正視透明、無立體厚度感

protected override void ProcessFigure(CircularList<Point> list, ...)
{
    for (int i = 0; i <= list.Count; i++)
    {
        Point pt = list[i];
        vertices.Add(new Point3D(pt.X, pt.Y, 0));       // 前緣
        vertices.Add(new Point3D(pt.X, pt.Y, -Depth));  // 後緣
        // 三角帶索引...
    }
}

第二層：SliverText - 具寬度輪廓字體

• 為每條線段計算平行偏移線 (寬度 = SliverWidth)
• 自行實作 Line2D 結構處理平行線相交
• 形成具厚度的輪廓殼，視覺較實心
• 缺點：寬度過大導致字符合併、動畫時 Z-fighting

突破口：PlanarText - DrawingBrush 繪製平面文字

• 發現 DrawingBrush(new GeometryDrawing(brush, null, TextGeometry)) 可將向量字形繪製於三維平面
• 解決「光柵化 TextBlock」與「幾何輪廓」視覺不匹配問題
• 核心邏輯：攔截 Material 設定，提取 Brush 建構 DrawingBrush 再包裝回 DiffuseMaterial
• 複雜度：需遞迴處理 MaterialGroup 巢狀結構

終極形態：SolidText - 組合模式實現實體字體

public class SolidText : DeepTextBase
{
    public SolidText()
    {
        // 組合三個子視覺元素
        Children.Add(new RibbonText { Depth = Depth });           // 側面
        Children.Add(new PlanarText());                           // 正面
        Children.Add(new PlanarText { Z = -Depth });              // 背面
    }

    // 屬性分發機制：將 Material/BackMaterial/Depth/Text 等屬性同步至三個子元素
    // ...
}

設計精髓：繼承 ModelVisual3D 利用 Children 集合組合，轉換自動套用至所有子元素，屬性變更時分發同步。

進階優化：RoundedText / EllipticalText

• EllipticalText：將輪廓點擴展為橢圓而非矩形，邊緣圓滑
• RoundedText：繼承 SolidText，以 EllipticalText 替換 RibbonText 側面
• 圓角半徑由 EllipseWidth 控制 (預設 0.05)，過大同樣導致 Z-fighting

類別繼承體系總覽

ModelVisual3D
  └── ModelVisualBase (抽象，封裝 GeometryModel3D + MeshGeometry3D，Material/BackMaterial DP)
        └── Text3DBase (Text/FontFamily/FontSize/Origin DP，BuildGeometry → TextGeometry)
              └── DeepTextBase (+ Depth DP)
                    ├── GeometryTextBase (抽象，Triangulate → GetFlattenedPathGeometry → ProcessFigure)
                    │     ├── RibbonText
                    │     └── SliverText
                    ├── PlanarText (Triangulate 產生單一矩形平面，Material → DrawingBrush)
                    └── SolidText (組合 RibbonText + 2×PlanarText，屬性分發)
                          └── RoundedText (替換側面為 EllipticalText)

關鍵技術細節補充

• CircularList<T>：循環緩衝區，索引自動模運算，簡化折線首尾相連處理
• GetFlattenedPathGeometry(tolerance)：將 Bezier 曲線近似為折線，容差越小越精確
• 座標系轉換：WPF 二維 Y 軸向下，三維 Y 軸向上，需 pt.Y = 2*Origin.Y - pt.Y 翻轉
• 法線計算：RibbonText 依賴 WPF 三維自動平均法線，SliverText 共用邊緣頂點產生圓滑視覺
• 動畫效能：IsAnimationProhibited 標記字體大小等觸發重建幾何的屬性

原始碼下載

Microsoft 官方範例程式碼 (含完整 Petzold.Text3D 庫與 Demo)