1. IronPDF
  2. 操作指南
  3. 渲染 WebGL 網站
如何使用 C# 將 WebGL 網站渲染為 PDF

如何在 C# 中渲染 WebGL 網站

Curtis Chau
Curtis Chau
更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF 透過將 Chrome 的 GPU 模式設定為 Hardware 並使用 SingleProcess 模式，實現將 WebGL 網站渲染為 PDF 的功能，讓您能將 Mapbox 等網站上的動態 3D 圖形擷取至靜態 PDF 文件中。

Webgl Logo related to 如何在 C# 中渲染 WebGL 網站

WebGL 是一項強大的工具，可用於在網頁瀏覽器中建立互動式 3D 圖形，但將這些動態且高度互動的體驗轉換為靜態的 PDF 格式，可能是一項艱鉅的任務。 將 WebGL 網站渲染為 PDF，涉及擷取由 WebGL 執行環境所產生的視覺內容，並將其轉換為適合 PDF 文件的格式。 此流程需要進行特殊設定，以確保在 HTML 轉 PDF 的過程中，能正確擷取經 GPU 加速的圖形。

IronPDF 提供必要的工具，可透過 WebGL 擷取並渲染網站，例如 Mapbox 及 WebGL 範例集合。 與標準 HTML 渲染不同，WebGL 內容需要存取 GPU，並需確保渲染管線與 PDF 生成之間有適當的同步。 該函式庫的 Chrome 渲染引擎能處理這些複雜性，使其得以在靜態 PDF 格式中完整保留 3D 可視化效果、複雜著色器及互動式圖形。

快速入門：在 .NET 中將 WebGL 內容渲染為 PDF using .NET C# 中的 IronPDF，將互動式 WebGL 圖形轉換為靜態 PDF。 本指南將向您展示如何設定並渲染來自網站的 WebGL 內容。 透過將 Chrome 的 GPU 模式設定為 Hardware 並啟用 SingleProcess，即可擷取動態網頁圖形。 這些步驟可將 3D 網頁內容轉換為可分享的 PDF 文件。

  1. using NuGet 套件管理員安裝 https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 請複製並執行此程式碼片段。

    IronPdf.Installation.SingleProcess = true; IronPdf.Installation.ChromeGpuMode = IronPdf.Engines.Chrome.ChromeGpuModes.Hardware;
new IronPdf.ChromePdfRenderer { RenderingOptions = { WaitFor = IronPdf.Rendering.WaitFor.RenderDelay(5000) } }
    .RenderUrlAsPdf("https://example.com/webgl-demo")
    .SaveAs("webgl-output.pdf");

  3. 部署至您的生產環境進行測試

    立即透過免費試用，在您的專案中開始使用 IronPDF

    arrow pointer

簡化工作流程（5 個步驟）

  1. 下載 IronPDF C# 函式庫
  2. 將 SingleProcess 屬性設定為 true
  3. 將 ChromeGpuMode 屬性變更為 Hardware
  4. 在渲染前加入延遲，以確保正確渲染
  5. 從 URL 渲染 PDF 並儲存結果


如何設定 IronPDF 以渲染 WebGL 網站？

若要啟用 WebGL 渲染，請設定以下 IronPDF 選項：

  • SingleProcess = true. 這會強制 Chrome 在當前程序中執行所有操作，而非使用子程序。 這對於 WebGL 渲染至關重要，因為它確保所有 GPU 運算皆在同一進程上下文中進行。
  • ChromeGpuMode = Hardware. 此功能可啟用硬體加速，讓 GPU 能正確渲染 WebGL 內容。

此外，若網站在渲染前需稍作延遲才能正確顯示，請使用 WaitFor.RenderDelay 方法。 這對 WebGL 內容尤為重要，因為複雜的 3D 場景可能需要數秒鐘才能完全載入並渲染。 如需更進階的時序控制功能，請參閱我們關於使用 WaitFor 來延遲 PDF 渲染的指南。

讓我們以 Mapbox 的 GeoJSON 圖層為例，呈現一個範例：

:path=/static-assets/pdf/content-code-examples/how-to/render-webgl-render-webgl.cs
using IronPdf;

// Configure IronPdf settings
IronPdf.Installation.SingleProcess = true;
IronPdf.Installation.ChromeGpuMode = IronPdf.Engines.Chrome.ChromeGpuModes.Hardware;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set delay before rendering
renderer.RenderingOptions.WaitFor.RenderDelay(5000);

// Render from URL
PdfDocument pdf = renderer.RenderUrlAsPdf("https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-slot/");

pdf.SaveAs("webGL.pdf");
Imports IronPdf

' Configure IronPdf settings
IronPdf.Installation.SingleProcess = True
IronPdf.Installation.ChromeGpuMode = IronPdf.Engines.Chrome.ChromeGpuModes.Hardware

Dim renderer As New ChromePdfRenderer()

' Set delay before rendering
renderer.RenderingOptions.WaitFor.RenderDelay(5000)

' Render from URL
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-slot/")

pdf.SaveAs("webGL.pdf")
$vbLabelText   $csharpLabel

了解設定選項

SingleProcess 設定至關重要，因為 WebGL 渲染仰賴主程序與 GPU 程序之間的共用記憶體。 當 Chrome 以多執行程序模式（預設模式）運行時，在進行 PDF 擷取之前，GPU 運算可能無法正常完成。 透過強制採用單一進程模式，我們確保所有渲染操作皆能依序完成。

硬體 GPU 模式可啟用 Chrome 的硬體加速功能。 若未啟用此設定，Chrome 將回退至軟體渲染模式，該模式無法妥善處理 WebGL 的進階圖形功能，例如著色器、紋理及 3D 變換。 如需更多關於渲染選項的詳細資訊，請參閱我們的《渲染選項完整指南》。

渲染後的 WebGL PDF 看起來是什麼樣子？

生成的 PDF 會擷取渲染當下的 WebGL 內容，完整保留 3D 圖形、地圖視覺化效果以及複雜著色器效果的視覺狀態。 雖然互動功能在靜態 PDF 格式中無法呈現，但視覺呈現的忠實度仍相當高，因此非常適合用於文件、報告及歸檔用途。

常見的 WebGL 渲染情境

WebGL 渲染特別適用於：

  1. 地理視覺化：擷取包含 3D 地形、天氣疊加層或地理資料視覺化的地圖
  2. 資料儀表板：將互動式 3D 圖表與圖形轉換為靜態報告
  3. CAD 與 3D 模型：文件 3D 設計與建築視覺化
  4. 科學視覺化：保留分子結構、天文數據或模擬結果

若需處理 WebGL 以外的 JavaScript 密集型內容，請參閱我們的 JavaScript 轉 PDF 指南。

Docker 的限制與解決方案

目前無法在 Docker 環境中渲染 WebGL。在 Docker 上渲染 WebGL 可能相當困難，因為 Docker 容器通常屬於無頭環境，意即它們沒有圖形使用者介面 (GUI)。 WebGL 仰賴對 GPU 的存取來渲染圖形，而在無頭環境中，對 GPU 的存取受到限制或根本無法存取。

我們的開發人員仍在評估此可能性。 若您需要部署支援 WebGL 的 IronPDF，請考慮：

  1. 使用虛擬機器或專用伺服器，而非容器
  2. 實作微服務架構，其中 WebGL 渲染在具備 GPU 的主機上進行
  3. 盡可能將 WebGL 內容預渲染為靜態圖像

若為無需 WebGL 的標準 Docker 部署，請參閱我們的 Docker 安裝指南。 若您希望在 Docker 的 WebGL 支援相關決議出爐時收到通知，請聯絡 support@ironsoftware.com。/support@ironsoftware.com

WebGL 渲染疑難排解

若您遇到 WebGL 渲染問題：

  1. 確認 GPU 可用性：確保您的系統配備相容的 GPU 並已安裝最新驅動程式
  2. 檢查 Chrome 依賴項：WebGL 需要特定的 Chrome 元件。 請參閱我們的 Chrome 依賴項疑難排解指南
  3. 調整渲染延遲：複雜的 WebGL 場景可能需要更長的延遲時間。 嘗試設定 3000 至 10000 毫秒之間的數值
  4. 監控記憶體使用量：WebGL 渲染可能消耗大量記憶體。請確保系統資源充足

若遇到持續性問題，請參閱我們的效能優化指南，或提交工程支援請求。

進階 WebGL 渲染技術

針對更複雜的 WebGL 情境，可將 IronPDF 的渲染功能與其他選項結合使用：

準備好探索更多可能性了嗎？ 請點此查看我們的教學頁面：進階功能。 如需更多 HTML 轉 PDF 的功能，請參閱我們的完整 HTML 轉 PDF 教學指南。

常見問題

什麼是 WebGL，以及為何將其轉換為 PDF 會很困難？

WebGL 是一項強大的工具，可用於在網頁瀏覽器中建立互動式 3D 圖形。將 WebGL 轉換為 PDF 是一項艱鉅的任務，因為這涉及擷取動態的、經 GPU 加速的圖形，並將其轉換為靜態格式。IronPDF 透過提供專用的設定選項來解決此挑戰，這些選項能確保正確存取 GPU，並在渲染管線與 PDF 生成之間進行同步。

如何在 IronPDF 中啟用 WebGL 渲染？

要在 IronPDF 中啟用 WebGL 渲染，您需要配置兩項關鍵設定：將 SingleProcess 設為 true 以強制 Chrome 在當前進程中執行所有操作，並將 ChromeGpuMode 設為 Hardware 以啟用硬體加速。這些設定可確保渲染 WebGL 內容時能正確存取 GPU。

哪些類型的 WebGL 網站可以渲染為 PDF？

IronPDF 能渲染各種 WebGL 網站，包括 Mapbox 等地圖服務以及 WebGL 範例集。該函式庫的 Chrome 渲染引擎可處理複雜的 3D 可視化效果、著色器及互動式圖形，並將其保存為靜態 PDF 格式。

將 WebGL 轉換為 PDF/A 時，為何需要渲染延遲？

轉換 WebGL 內容時建議設定渲染延遲，因為這類圖形通常需要額外時間才能完全載入並渲染。IronPDF 允許您設定 WaitFor.RenderDelay()，以確保在開始生成 PDF 之前，WebGL 內容已完全渲染完畢。

將 WebGL 渲染為 PDF 的最簡工作流程為何？

最簡化的工作流程包含 5 個步驟：1) 下載 IronPDF C# 函式庫，2) 將 SingleProcess 屬性設為 true，3) 將 ChromeGpuMode 設為 Hardware，4) 設定渲染延遲以確保正確渲染，以及 5) 使用 RenderUrlAsPdf() 將 WebGL 頁面轉換並儲存結果。

IronPDF 能否擷取 WebGL 中的複雜 3D 圖形與著色器？

是的，IronPDF 的 Chrome 渲染引擎能夠擷取並保留來自 WebGL 網站的複雜 3D 可視化效果、著色器及互動式圖形。其對硬體加速的支持，可確保在轉換過程中正確擷取由 GPU 渲染的內容。

Curtis Chau
Curtis Chau
  立即與工程團隊聯繫
技術撰稿人

Curtis Chau 擁有卡爾頓大學（Carleton University）的電腦科學學士學位，專精於前端開發，並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面，喜歡運用現代框架，並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外，Curtis 對物聯網（IoT）抱有濃厚興趣，致力於探索整合硬體與軟體的創新方法。閒暇時，他喜歡玩遊戲和開發 Discord 機器人，將對科技的熱愛與創意相結合。

準備開始了嗎？
Nuget 下載 19,014,616 | 版本： 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎？

想要快速確認成果嗎？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。