Editor’s note: Today’s post is by Ib Green, CTO, and Ilija Puaca, Founding Engineer, both at Unfolded, an “open core” company that builds products and services on the open source deck.gl / vis.gl technology stack, and is also a major contributor to these frameworks. Green and Puaca explain how Google and Unfolded have partnered to develop an open source C++ version of deck.gl. An initial version supporting a limited subset of deck.gl layers and features is now freely available on GitHub.

編者按： 今天的博客是 磅綠色 ，CTO和伊利亞·Puaca創始工程師，無論是在 未折疊 的，“開核”的公司，建立產品和服務的開源deck.gl / vis.gl技術堆棧，并也是這些框架的主要貢獻者。 Green和Puaca解釋了Google和Unfolded如何合作開發eck.gl的開源C ++版本。 支持deck.gl圖層和功能的有限子集的初始版本現已在 GitHub上 免費提供 。

Deck.gl is a widely used large-scale geospatial data visualization framework that has its roots in JavaScript and WebGL. The choice of JavaScript has served the deck.gl community well: Visualization is front-end computing and thus the browser is often the natural vehicle to reach users.

Deck.gl是廣泛使用的大規模地理空間數據可視化框架，其根源于JavaScript和WebGL。 JavaScript的選擇已經很好地滿足了eck.gl社區的需求：可視化是前端計算，因此瀏覽器通常是吸引用戶的天然工具。

But there are cases where native implementation can provide better performance, user experience, and architectural fit, primarily in native mobile applications but also for certain high-performance computing use cases. It’s always been clear that a C++ version would enable new opportunities.

但是在某些情況下，本機實現可以提供更好的性能，用戶體驗和體系結構適應性，主要是在本機移動應用程序中，但在某些高性能計算用例中也是如此。 一直很清楚，C ++版本將帶來新的機遇。

A few months ago, a collaboration with engineers working on Google Earth allowed us to fine-tune the architectural vision for deck.gl-native. The goal was to prototype new deck.gl-powered visualization experiences in Google Earth across web (using WebAssembly), iOS, and Android platforms. A native solution was required to enable a high-performance integration with Google Earth’s rendering engine on all platforms. With our designs solidified, and a concrete use case in hand, we were ready to start building deck.gl in C++.

幾個月前，與從事Google Earth的工程師的合作使我們能夠微調一下deck.gl-native的架構構想。 我們的目標是在網絡( 使用WebAssembly )，iOS和Android平臺的Google Earth中為基于eck.gl的新可視化體驗提供原型。 需要使用本機解決方案才能在所有平臺上實現與Google Earth渲染引擎的高性能集成。 鞏固我們的設計并準備好具體用例之后，我們就可以開始用C ++構建deck.gl了。

既熟悉又高效的新API (A new API that’s both familiar and efficient)

The new deck.gl C++ API has been designed to correspond closely to the JavaScript API whenever that makes sense and performance is not sacrificed.

新的deck.gl C ++ API被設計為在不影響性能和性能的情況下與JavaScript API緊密對應。

As can be seen in the sample code, familiar classes such as Deck, ScatterplotLayer, MapView and ViewState work just as a JavaScript deck.gl user would expect. At the same time, layer accessor methods (getPosition and getFillColor) that enable data-driven styling are now based on C++ lambda functions for maximum flexibility and performance.

從示例代碼中可以看出，熟悉的類(如Deck ， ScatterplotLayer ， MapView和ViewState可以像JavaScripteck.gl用戶所期望的那樣工作。 同時，啟用數據驅動樣式的圖層訪問器方法( getPosition和getFillColor )現在基于C ++ lambda函數，以實現最大的靈活性和性能。

auto layerProps = std::make_shared<ScatterplotLayer::Props>();
layerProps>getPosition = [](const Row &row) { 
    return row.getVector3<float>("position"); 
};
layerProps>getFillColor = [](const Row &row) { 
    return mathgl::Vector4<float>{255, 0, 0, 255}; 
};
layerProps>data = /* your dataset (arrow::Table) goes here */;
auto deckProps = std::make_shared<Deck::Props>();
deckProps->layers = {layerProps};
deckProps->initialViewState = std::make_shared<ViewState>();
deckProps->views = {std::make_shared<MapView>()};
auto deck = std::make_shared<Deck>(deckProps);
deck->run();

deck.gl-native C++ code that renders a ScatterplotLayer with data-driven styling.

deck.gl天然C ++ 呈現一個代碼 ScatterplotLayer 與數據驅動樣式。

deck.gl-native的軟件架構 (Software architecture of deck.gl-native)

Implementing a sophisticated WebGL framework such as deck.gl from scratch in a new programming language (without the need to support backwards compatibility and all the specialized features deck.gl has accumulated on the JavaScript side) gave us the ability to take a fresh look at a number of foundational architectural choices.

使用新的編程語言從頭開始實現一個復雜的WebGL框架，例如deck.gl(無需支持向后兼容性，并且deck.gl的所有專門功能都已累積在JavaScript方面)使我們能夠重新審視許多基礎架構選擇。

For more information on deck.gl architecture, the deck.gl Technical Deep-Dive is a good read. While written for the JavaScript version of deck.gl, many concepts apply to the C++ port as well.

有關deck.gl體系結構的更多信息，請閱讀deck.gl技術深度學習 。 雖然是為deck.glJavaScript版本編寫的，但許多概念也適用于C ++端口。

阿帕奇箭 (Apache Arrow)

All in-memory table processing is based on the Apache Arrow C++ API, which provided significant performance advantages because tables are stored in a GPU-friendly columnar binary data layout.

所有內存中表處理均基于Apache Arrow C ++ API，該表具有顯著的性能優勢，因為表存儲在GPU友好的列式二進制數據布局中。

Note that while Apache Arrow has a fairly sophisticated API, this will be almost invisible to deck.gl-native applications as long they use the loaders provided by deck.gl. CSV and JSON table loaders are provided as part of the deck.gl library in the initial version, and .arrow tables can be loaded with the Arrow API.

請注意，盡管Apache Arrow具有相當復雜的API，但只要使用deck.gl提供的加載程序，這對于eck.gl本機應用程序幾乎是看不見的。 CSV和JSON表加載程序在初始版本中作為deck.gl庫的一部分提供，并且.arrow表可以使用Arrow API加載。

Naturally, for advanced table processing use cases, applications are free to work directly with the Arrow API to build and process tables, and then pass resulting Arrow tables to deck.gl.

自然地，對于高級表處理用例，應用程序可以自由直接與Arrow API一起使用來構建和處理表，然后將生成的Arrow表傳遞給deck.gl。

To get started with Arrow, useful resources might be:

要開始使用Arrow，有用的資源可能是：

• Arrow C++ API Docs

  Arrow C ++ API文件

• Arrow Test Suite for examples of working code

  Arrow Test Suite提供了工作代碼示例

圖形后端：通過Dawn的本地WebGPU (Graphics backend: native WebGPU via Dawn)

Deck.gl-native is being built on top of WebGPU API using the Dawn framework.

Deck.gl-native正在使用Dawn框架在WebGPU API之上構建 。

The Dawn framework is a C++ implementation of the WebGPU API and is a compelling choice for deck.gl-native:

Dawn框架是WebGPU API的C ++實現，并且是deck.gl-native的理想選擇：

• The JavaScript version of deck.gl will inevitably move from WebGL to WebGPU, so having both C++ and JavaScript work against a common 3D API will significantly increase the ease of aligning the JavaScript and C++ code bases.
  ceck.glJavaScript版本將不可避免地從WebGL遷移到WebGPU，因此將C ++和JavaScript都與通用的3D API結合使用將顯著提高對齊JavaScript和C ++代碼庫的便利性。
• The Dawn project has the ambition to provide backends on basically all platforms/rendering APIs of interest, including Vulkan, Metal, D3D12, and OpenGL. This ideally means that deck.gl-native itself will only have to implement a single backend, namely Dawn.
  Dawn項目的目標是在所有感興趣的平臺/渲染API上提供后端，包括Vulkan，Metal，D3D12和OpenGL。 理想情況下，這意味著deck.gl-native本身僅需實現一個后端，即Dawn。

Note that Dawn is still a work in progress (with different levels of support for different platforms; the prototype is only being tested on iOS), and there is some risk with this technology choice. However, given the momentum behind WebGPU in browsers, we feel that the prospects are currently looking good.

請注意，Dawn仍在開發中(對不同平臺的支持水平不同；僅在iOS上對原型進行了測試)，選擇此技術存在一定的風險。 但是，鑒于瀏覽器中WebGPU的發展勢頭，我們認為當前的前景很好。

未來發展方向 (Future directions)

超越移動設備：工作站和服務器 (Beyond mobile: workstations and servers)

While deck.gl runs well in a mobile web view, this cannot share the context with other rendering engines. A “native” C++ implementation of deck.gl is not only required to provide optimal user experience on mobile devices and through integrations with apps such as Google Earth for mobile; it also provides exciting integration opportunities with a number of advanced, high-performance (usually C++ based) software packages that are not available or performant in browsers. These could be math libraries, computer vision libraries, etc.

雖然deck.gl在移動Web視圖中運行良好，但無法與其他渲染引擎共享上下文。 不僅需要“ deck.gl”的“本地” C ++實現，以在移動設備上以及與諸如Google Earth for mobile之類的應用程序集成來提供最佳用戶體驗，還需要 它還提供了許多高級，高性能(通常基于C ++)的軟件包提供激動人心的集成機會，這些軟件包在瀏覽器中不可用或性能不佳。 這些可能是數學庫，計算機視覺庫等。

Workstations and servers sometimes provide better GPU capabilities than browsers can expose through WebGL, and a C++ deck.gl implementation opens the option to use more advanced GPU acceleration when specialized hardware is available, such as nVidia’s CUDA technology. The ideal setup would be that vis.gl automatically takes maximum advantage of the best hardware that it is available at run-time (whether WebGL, WebGPU or CUDA).

工作站和服務器有時提供比瀏覽器通過WebGL可以提供的GPU功能更好的功能，并且C ++ deck.gl實現打開了在擁有專用硬件(例如nVidia的CUDA技術)時使用更高級的GPU加速的選項。 理想的設置是vis.gl自動利用運行時可用的最佳硬件(無論是WebGL，WebGPU還是CUDA)的最大優勢。

deck.gl作為跨程序語言框架 (deck.gl as a cross-programming-language framework)

With the addition of a native C++ implementation, deck.gl is taking another big step away from being a JavaScript first framework, moving towards becoming a multi-language visualization architecture, complementing pydeck (Python deck.gl bindings) and the completely declarative deck.gl JSON API.

通過添加本機C ++實現，deck.gl從成為JavaScript第一框架邁出了一大步，朝著成為多語言可視化體系結構的方向發展，對pydeck (Python deck.gl綁定)和完全聲明性的deck進行了補充。 gl JSON API。

For more information, see the deck.gl cross-platform architecture that describes approaches to keeping multi-language implementations of deck.gl compatible. It’s still a work-in-progress, but gives a sense of the higher level direction.

有關更多信息，請參閱deck.gl跨平臺體系結構 ，該體系結構描述了使deck.gl的多語言實現保持兼容的方法。 它仍在進行中，但可以提供更高層次的指導。

附加裝載機 (Additional loaders)

CSV and JSON table loaders are provided as part of the deck.gl library. To support additional table formats, additional “loaders” can be implemented that load various formats and “convert” the loaded tables to Arrow representation. Integrations with other C++ libraries, such as GDAL for geospatial and imaging formats, are also interesting.

CSV和JSON表加載程序作為deck.gl庫的一部分提供。 為了支持其他表格格式，可以實施其他“加載程序”來加載各種格式并將加載的表“轉換”為Arrow表示。 與其他C ++庫的集成(例如用于地理空間和影像格式的GDAL)也很有趣。

致謝 (Acknowledgements)

Unfolded would like to thank Google for support and encouragement in getting the deck.gl-native development started.

Unfolded非常感謝Google在開始執行deck.gl本機開發方面的支持和鼓勵。

Links

鏈接

• deck.gl-native

  甲板本地人

• deck.gl

  卡組

• pydeck

  平臺