如何呈現 WebGL 網站

查克尼思·賓

2024年7月4日

已更新 2024年12月10日

Translated

View the article in English

WebGL 是一個用於在網頁瀏覽器中創建互動式 3D 圖形的強大工具，但將這些動態且高度互動的體驗轉換成靜態 PDF 格式可能會有挑戰。將 WebGL 網站渲染成 PDF 涉及捕獲 WebGL 上下文生成的視覺內容並將其轉換成適合 PDF 文件的格式。

IronPDF 提供了所需的工具來捕獲和渲染使用 WebGL 的網站，例如 Mapbox 和 WebGL Samples collection。

開始使用 IronPDF

立即在您的專案中使用IronPDF，並享受免費試用。

第一步：

如何呈現 WebGL 網站

下載 IronPDF C# 函式庫
將SingleProcess屬性設為 true
將 ChromeGpuMode 屬性更改為硬體
在呈現之前應用延遲以確保正確呈現
從 URL 渲染 PDF 並將結果保存

渲染 WebGL 網站

要啟用 WebGL 渲染，您需要配置一些 IronPDF 設置：

SingleProcess = true。這迫使 Chrome 在當前進程中執行所有操作，而不使用子進程。
ChromeGpuMode = Hardware 模式。
此外，如果網站需要一些延遲才能正確顯示，您可以使用WaitFor.RenderDelay方法。讓我們為範例渲染一個來自 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

輸出 PDF

目前在 Docker 設置中無法渲染 WebGL。在 Docker 中渲染 WebGL 可能具有挑戰性，因為 Docker 容器通常是無頭環境，意味著它們沒有圖形用戶界面 (GUI)。 WebGL 依賴於訪問 GPU 來渲染圖形，在無頭環境中，訪問 GPU 的能力有限或不存在。我們的開發人員仍在調查這個可能性。如果您希望在結論出爐後收到通知，請聯繫support@ironsoftware.com。

查克尼思·賓

立即與工程團隊聊天

軟體工程師

Chaknith 是開發者界的夏洛克福爾摩斯。他第一次意識到自己可能有個軟體工程的未來，是在他為了娛樂而參加程式挑戰的時候。他的重點是 IronXL 和 IronBarcode，但他也引以為豪的是，他幫助客戶解決所有產品的問題。Chaknith 利用他與客戶直接對話中獲得的知識，以進一步改進產品。他的實際反饋超越了 Jira 工單，並支持產品開發、文件撰寫和行銷，以提升客戶的整體體驗。不在公司時，他通常在學習機器學習、寫程式和徒步旅行。