deck.gl WebGPU 支持现状与启用指南图层、扩展与效果支持矩阵v9【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gldeck.gl 正在逐步将渲染后端从 WebGL2 迁移到 WebGPU。本篇技术指南以docs/developer-guide/webgpu.md为骨架结合modules/下真实存在的 WGSL 着色器、构建脚本与核心渲染管线源码系统梳理 WebGPU 的启用方式、图层/扩展/效果的支持矩阵、特性边界与参与路线帮助你判断当前版本中哪些功能可以迁移到 WebGPU、哪些仍需回退到 WebGL。:::caution deck.gl v9 的 WebGPU 支持仍处于工作进展中work in progress尚未达到生产就绪production ready。本文内容基于当前源码树随着版本演进可能发生变化。 :::状态标记的语义在阅读下文所有支持矩阵前先明确本文档使用的三档状态标记该语义由原文档定义且与源码树一一对应标记含义✅ vX.Y当前源码树中存在显式的 WebGPU/WGSL 实现或该 API 是某 WebGPU 实现的薄封装vX.Y指首个完整支持 WebGPU 的 deck.gl 次版本部分代码路径可用但完整 API 面尚未完成移植❌源码树中尚无 WebGPU 实现对于复合图层composite layer与包装图层wrapper layer状态基于其默认或常规渲染路径判定而不是每个自定义子图层组合。启用 WebGPUdeck.gl 的渲染完全建立在 luma.gl 设备抽象之上因此启用 WebGPU 的关键是让 deck.gl 使用一个基于 luma.glwebgpuAdapter创建的 device。import {webgpuAdapter} from luma.gl/webgpu; new Deck({ deviceProps: { type: webgpu, adapters: [webgpuAdapter] } });这段配置对应Deck的deviceProps属性类型为CreateDeviceProps见 modules/core/src/lib/deck.ts。从该文件源码可以看到设备创建的完整逻辑_createDevicedeck.gl v9 的Deck始终打包并自动追加webgl2Adapter源码注释明确说明该行为预期在 v10 中改变以支持纯 WebGPU 构建因此adapters中即使只传入webgpuAdapterWebGL 回退依然可用当deviceProps.type webgpu时画布上下文强制使用alphaMode: premultiplied这是为了在 WebGPU 下启用透明度并与着色器输出保持一致源码注释we must use premultiplied canvas for webgpu to enable transparency and match shaders设备创建走luma.createDevice并开启着色器与管线缓存_cacheShaders、_cachePipelines。需要特别注意的是拾取picking模式的联动当Deck使用 WebGPU 设备时pickAsync会被自动解析为async而显式请求pickAsync: sync会直接抛错pickAsync: sync is not supported when Deck is using a WebGPU device.见 modules/core/src/lib/deck.ts。这是因为 WebGPU 的读回路径是异步的同步拾取在 WebGPU 上不可用。图层支持矩阵下表覆盖各图层包的公开图层导出直接来源于当前源码树而非可能滞后的官网徽章。从find_files对**/*wgsl*的检索结果看源码树中共有 22 个.wgsl.ts着色器文件分布于modules/layers、modules/aggregation-layers、modules/geo-layers、modules/mesh-layers与modules/core与下表逐一对应。ModuleLayerWebGLWebGPUdeck.gl/layersArcLayer✅✅ v9.4deck.gl/layersBitmapLayer✅✅ v9.4deck.gl/layersIconLayer✅✅ v9.3deck.gl/layersLineLayer✅✅ v9.2deck.gl/layersPointCloudLayer✅✅ v9.2deck.gl/layersScatterplotLayer✅✅ v9.2deck.gl/layersColumnLayer✅✅ v9.4deck.gl/layersGridCellLayer✅✅ v9.4deck.gl/layersPathLayer✅✅ v9.4deck.gl/layersPolygonLayer✅✅ v9.4deck.gl/layersGeoJsonLayer✅✅ v9.4deck.gl/layersTextLayer✅✅ v9.4deck.gl/layersSolidPolygonLayer✅✅ v9.4deck.gl/aggregation-layersScreenGridLayer✅✅ v9.4deck.gl/aggregation-layersHexagonLayer✅✅ v9.4deck.gl/aggregation-layersContourLayer✅✅ v9.4deck.gl/aggregation-layersGridLayer✅✅ v9.4deck.gl/aggregation-layersHeatmapLayer✅✅ v9.4deck.gl/mesh-layersSimpleMeshLayer✅✅ v9.4deck.gl/mesh-layersScenegraphLayer✅✅ v9.4deck.gl/geo-layersA5Layer✅✅ v9.4deck.gl/geo-layersGreatCircleLayer✅❌deck.gl/geo-layersS2Layer✅✅ v9.4deck.gl/geo-layersQuadkeyLayer✅✅ v9.4deck.gl/geo-layersTileLayer✅✅ v9.4deck.gl/geo-layersTripsLayer✅✅ v9.4deck.gl/geo-layersH3ClusterLayer✅✅ v9.4deck.gl/geo-layersH3HexagonLayer✅✅ v9.4deck.gl/geo-layersTile3DLayer✅✅ v9.4deck.gl/geo-layersTerrainLayer✅✅ v9.4deck.gl/geo-layersMVTLayer✅✅ v9.4deck.gl/geo-layersGeohashLayer✅✅ v9.4deck.gl/cartoClusterTileLayer✅❌deck.gl/cartoH3TileLayer✅❌deck.gl/cartoHeatmapTileLayer✅❌deck.gl/cartoPointLabelLayer✅❌deck.gl/cartoQuadbinTileLayer✅❌deck.gl/cartoRasterTileLayer✅❌deck.gl/cartoVectorTileLayer✅❌关键图层的功能边界GeoJsonLayer在 WebGPU 上支持多边形polygon、线line与文本点text point渲染TextLayer支持字形glyph渲染但文本背景与碰撞过滤collision filtering仍依赖 WebGL。S2Layer、QuadkeyLayer、GeohashLayer从PolygonLayer继承 WebGPU 渲染能力包括挤出extruded、描边stroked与线框wireframe单元。H3HexagonLayer在 WebGPU 上同时支持其高精度PolygonLayer路径与 instancedColumnLayer路径对应源码树中的 hexagon-cell-layer.wgsl.ts。H3ClusterLayer通过多边形路径渲染。A5Layer从PolygonLayer继承 WebGPU 渲染同时支持 bigint 与十六进制两种 A5 单元标识符。Tile3DLayer在 WebGPU 上支持点云point-cloud、glTF 场景图scenegraph与 I3S 网格瓦片内容。源码级证据以 ScatterplotLayer 为例以最早完成移植的ScatterplotLayerv9.2为例其 WGSL 着色器位于 modules/layers/src/scatterplot-layer/scatterplot-layer.wgsl.ts可以从三个层面印证“显式 WebGPU 实现”的含义Uniform 结构与 GLSL 版本一一对应ScatterplotUniforms中声明了radiusScale、radiusMinPixels、radiusMaxPixels、lineWidthScale、stroked、filled、antialiasing、billboard、radiusUnits、lineWidthUnits等字段通过group(0) binding(0) varuniform绑定。WGSL 原生语法顶点着色器使用builtin(instance_index)/builtin(vertex_index)读取实例索引使用select(...)代替 GLSL 的三元表达式做条件选择文件中有注释明确说明WGSL selects the second value when the condition is true, so keep the antialiased path second.片段着色器通过location(0)返回颜色。共享着色器模块的 WGSL 端口着色器内调用的project_unit_size_to_pixel、project_position_to_clipspace_and_commonspace等函数来自核心project模块的 WGSL 版本见 modules/core/src/shaderlib/project/project.wgsl.ts这正是“核心project/project32着色器模块已有 WGSL 端口”的落地证据。此外在 WebGPU 设备上图层着色器模块列表会动态追加clipExtension...(this.context.device.type webgpu ? [clipExtension] : [])见 modules/layers/src/scatterplot-layer/scatterplot-layer.ts说明部分扩展已能通过 WGSL 专用路径与 WebGPU 图层协同工作。扩展支持矩阵下表覆盖deck.gl/extensions的公开扩展。绝大多数扩展仍是 WebGL-only原因在于它们依赖 GLSL 着色器注入GLSL shader injections、仅 GLSL 可用的着色器模块或尚未移植到 WebGPU 的额外渲染/拾取通道。ModuleExtensionWebGLWebGPUdeck.gl/extensionsBrushingExtension✅❌deck.gl/extensionsDataFilterExtension✅❌deck.gl/extensionsFp64Extension✅❌deck.gl/extensionsPathStyleExtension✅❌deck.gl/extensionsFillStyleExtension✅❌deck.gl/extensionsClipExtension✅deck.gl/extensionsCollisionFilterExtension✅❌deck.gl/extensionsMaskExtension✅❌ClipExtension是唯一取得进展的扩展在默认MVTLayer渲染路径所用到的图元图层ScatterplotLayer、PathLayer、SolidPolygonLayer上具有初步 WebGPU 支持。从 modules/extensions/src/clip/clip-extension.ts 的源码可以看到其双路径设计当device.type webgpu时getShaders返回空模块对象即不再注入 GLSL 顶点着色器模块改由 WGSL 着色器内的clip_filterPosition/clip_filterColor钩子完成裁剪WebGL 路径则维持基于clipByInstance的 GLSL 模块注入逻辑。效果Effects支持矩阵下表覆盖deck.gl/core导出的公开效果类。ModuleEffectWebGLWebGPUNotesdeck.gl/coreLightingEffect✅材质光照模块已有 WGSL 支持但阴影路径仍依赖仅 GLSL 可用的shadow着色器模块。deck.gl/corePostProcessEffect✅❌当前屏幕后处理链仍由 GLSL 片元着色器模板生成尚未作为受支持的 deck.gl 功能适配 WebGPU。功能特性支持矩阵FeatureStatusCommentViews核心project与project32着色器模块已有 WGSL 端口标准视图/投影路径应可工作。Picking✅Deck在 WebGPU 上执行异步拾取包含 hover 与 click 两条拾取路径。Shader hooks / layer extensionsClipExtension在ScatterplotLayer、PathLayer、SolidPolygonLayer上有针对性支持通用的 WGSL 着色器注入尚未支持。GPU transforms底层 GPU 变换 API 仍在演进deck.gl 仍有 transform 门控测试但尚无面向变换工作流的文档化 WebGPU 支持。Constant attributes✅AttributeManager在 WebGPU 上会把常量属性物化为完整缓冲full buffers作为依赖常量 accessor 图层的兼容路径。Attribute transitions部分图层会在 WebGPU 上禁用过渡transition且过渡工具中仍包含 WebGL 专属的缓冲读回路径。Base map overlays透明叠加层集成仍需要在 deck 与底图栈之间完成预乘 alphapremultiplied alpha相关改造。Base map interleaving❌目前没有任何底图集成路径支持 WebGPU 交错渲染。源码佐证Picking 与 Constant attributes异步拾取拾取模式在 modules/core/src/lib/deck.ts 中由设备类型决定——WebGPU 设备强制异步拾取。而 modules/core/src/passes/pick-layers-pass.ts 进一步展示了渲染层面的差异WebGPU 使用渲染通道动态状态render-pass dynamic state中的blendConstant进行拾取颜色编码WebGL 则使用blendColor。常量属性物化AttributeManager在构造时检测device.type webgpu并创建专用的AttributeBufferGroups实例见 modules/core/src/lib/attribute/attribute-manager.ts通过getBufferLayouts/getBufferGroupBindings生成 WebGPU 风格的缓冲布局描述符与共享缓冲绑定同文件 L307-L349。绘制参数拆分图层绘制时Layer._draw会调用splitWebGPUDrawParameters将blendConstant从管线参数中拆出作为渲染通道参数单独应用见 modules/core/src/lib/layer.ts 与 L1431-L1449并调用syncModelAttachmentFormats同步 WebGPU 模型附件格式L1454-L1456。构建、测试与双后端基础设施WebGPU 支持不仅是运行时渲染还涉及一整套构建基础设施这部分在原文档中未展开但在仓库中可以直接验证依赖根 package.json 声明了luma.gl/webgpu版本^9.4.0-beta.7这是webgpuAdapter的来源。测试命令根 package.json 的test-webgpu脚本为RENDER_TEST_DEVICEwebgpu ocular-test render通过环境变量切换渲染测试设备验证 WGSL 实现的渲染结果。双态构建开关scripts/set-webgpu-build.mjs 通过node scripts/set-webgpu-build.mjs true|false切换根 tsconfig.json 中的webGPUEnabled选项并清理各模块的tsconfig.tsbuildinfo缓存以保证增量编译不会漏掉开关变更。根build脚本会先以false产出visgl:webgl-only条件输出再以true产出默认输出。TypeScript 转换插件根 tsconfig.json 注册了vis.gl/ts-plugins/ts-transform-webgpu插件并配置ts-transform-append-extension处理.wgsl.js扩展名使.wgsl.ts着色器源文件能够被正确编译打包。这些基础设施意味着即使某个图层尚未完成 WebGPU 移植WebGL 路径也始终可用二者通过 luma.gl 设备抽象并存。背景与参与虽然 deck.gl 可见的 WebGPU 表面仍有限但大量底层工作已在 luma.gldeck.gl 底层的 GPU 框架中完成——包括 WebGPU 设备/适配器、渲染管线与缓冲管理等。deck.gl 正通过逐层、逐特性地移植着色器模块、图层与渲染功能来跟进这一工作。本文支持矩阵中从 v9.2 到 v9.4 的推进节奏从ScatterplotLayer/LineLayer/PointCloudLayer到 v9.4 批量覆盖聚合类、网格类与瓦片类图层正是这一增量策略的体现。如果你希望参与 deck.gl 的 WebGPU 开发或只是跟进进展可以关注 OpenJS / Open Visualization Slack 社区的专属频道并查看发布跟踪release tracker任务与 GitHub 上的持续实现工作。在 v9 阶段投入生产环境前请务必对照上文的支持矩阵确认你所使用的图层、扩展与效果组合均在 WebGPU 路径上可用或将关键场景回退到 WebGL。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考